JQuery Quickies #2 – LightBox Plugin by Leandro Vieria Pinho

 

NOTE:-
  1. LightBox plugin is used to view images using a  modalpopup window in a browser, just like a slideshow (with NEXT and PREV buttons).
  2. The main advantage of this plugin is to show the original image at times when we use Thumbnails on the page. This plugin is really helpful when the content of the page is to be limited.
  3. To Download –> http://leandrovieira.com/projects/jquery/lightbox/
  4. For detailed info on plugin along with its implementation and feature –> “Example – How to Use”  http://leandrovieira.com/projects/jquery/lightbox/
  5. The terminology in the code is very important, if any word is misspelled, there will be a distorted slideshow.

In this tutorial, I create a sample Database “Example” with a table “Images” which holds the information about images like ImageName, ImageDescription and ImagePath. Then I use a SqlDataSource in combination with Repeater to display the images from the database onto the page. Here we use LightBox plugin to open up a modalpopup window with the details of the image (shown in modalpopup) along with the flexibility of navigating between images without closing the modalpopup.

================================================================================================

Database Details

Database details which are used to accomplish this tutorial are furnished in this section.

================================================================================================

Database Name :- Example

Database Table :- Images

Database Definition :-

LightBox-Database-Definition

Database sample data :-

LightBox-Database-Data

ConnectionString entry in the Web.Config file (inside the <Configuration> tag) would look like (kindly change it to your systems corresponding) :-

  <connectionStrings>
    <add name="ExampleConnectionString" connectionString="Data Source=RAMILU-PC\SQLEXPRESS;
          Initial Catalog=Example;Integrated Security=True"  providerName="System.Data.SqlClient" />
  </connectionStrings>

================================================================================================

JavaScript Files and CSS File Details

Download the following rar file and place it in the website as shown.

================================================================================================

Download :- Click Here – Javascript files & css file – LightBox.rar

Once downloaded, unzip it and place them in the website as shown in the below image.

LightBox-Folder-Structure

================================================================================================

Page.aspx

Below code shows the implementation of LightBox.

================================================================================================

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="LightBox/css/jquery.lightbox-0.5.css" media="screen" />
    <script type="text/javascript" src="LightBox/js/jquery.js"></script>
    <script type="text/javascript" src="LightBox/js/jquery.lightbox-0.5.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#gallery a').lightBox({
                overlayOpacity: 0.6,
                imageLoading: 'LightBox/images/lightbox-ico-loading.gif',
                imageBtnClose: 'LightBox/images/lightbox-btn-close.gif',
                imageBtnPrev: 'LightBox/images/lightbox-btn-prev.gif',
                imageBtnNext: 'LightBox/images/lightbox-btn-next.gif',
                fixedNavigation:true,
                txtImage: 'Image',
                txtOf: 'of'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ExampleConnectionString %>" 
            SelectCommand="SELECT * FROM [Images]"></asp:SqlDataSource>

        <div id="gallery">
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">                     
                      
                     <ItemTemplate>
                            <a href='<%#Eval("ImagePath") %>' title='<%#Eval("ImageName") %>'> 
                                <img src='<%#Eval("ImagePath") %>' width="72" height="72" alt="" /> 
                            </a>
                     </ItemTemplate>
                    
            </asp:Repeater>
        </div>
    </div>
    </form>
</body>
</html>

================================================================================================

OUTPUT 

For better Demonstration and Live Example – Click Here

================================================================================================

LightBox-Output1

LightBox-Output2

Disclaimer:-

Of late, I had a chance to work with some JQuery plugins (even though, UI enhancement is not my cup of cake). So in this section i.e., “JQuery Quickies” I am going to narrate about some of the plugins i worked with. As usual, the main area of concentration would be on – “HOW TO IMPLEMENT?”. The reader should digest the fact, that I am not the author of any plugin (unless stated) and also I never RATE any plugin out of my experience (as i am no judge). I do provide the details of the plugin in detailed (say author details with website), so that any further assistance can be obtained from the same. I do moderate derogatory comments (if any) and kindly suggest the commentator to approach the author of the plugin for further clarifications. And for the authors of the plugins, I convey my warmest regards for your excellent works. Feel free to contact me in case my discretion of your (author) plugin is misrepresented.

You may also like...

One Pingback/Trackback