JQuery Photo Gallery

PrettyPhoto is a free JQuery project, I used to build this nice photo gallery. 

This article is going to describe how to create Image Gallery, Image Paging and Image Listing using JQuery.

First of all, create a new ASP.NET website and provide your website name, browse saving location of website and click OK button.

This will create a website.

After that, add three folders named - javascripts, styles, and images.

Here I am explaining two methods to make an image gallery. The first method is direct display images using img HTML control.  The second method is using a DataList control and bind photos at runtime.

First of all add js files in javascript folder and stylesheet in styles folder and images in images folder and call js file and css file on page like this.

Method 1. Using Img HTML Tag

The first way is this. 

       <link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"  charset="utf-8" media="screen" />  
       <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
       <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js" charset="utf-8"></script>
       <script type="text/javascript" src="javascripts/jquery-1.4.4.min.js" charset="utf-8"></script>
       <script type="text/javascript" src="javascripts/jquery.prettyPhoto.js" charset="utf-8"></script>
         
      <div> 
        <a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
            <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Nice Sea" />
        </a>

        <a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]">
            <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Evening Sunsine" />
        </a>

        <a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]">
            <img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Looks Horrible" />
        </a>

        <a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]">
            <img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Muntains" />
        </a>

        <a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]">
            <img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Snow Mountains" />
        </a>

    </div> 

And write this script before closing of body tag.

    <script type="text/javascript" charset="utf-8"> 
        $(document).ready(function() { 
            $("a[rel^='prettyPhoto']").prettyPhoto(); 
        }); 
    </script>

 

Method 2. Using DataList Control


In this method, drag and drop a DataList data control to the page and bind like this. 

<link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"  charset="utf-8" media="screen" />  
       <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
       <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js" charset="utf-8"></script>
       <script type="text/javascript" src="javascripts/jquery-1.4.4.min.js" charset="utf-8"></script>
       <script type="text/javascript" src="javascripts/jquery.prettyPhoto.js" charset="utf-8"></script>

<asp:DataList ID="galleryDataList" RepeatColumns="5" runat="server"> 
      <ItemTemplate> 
       <a href='<%# Eval("Name","images/fullscreen/{0}")%>' rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">                                
        <img src='<%# Eval("Name","images/fullscreen/{0}")%>' width="60" height="60" alt='<%# Eval("Name") %>' /> 
       </a> 
      </ItemTemplate> 
</asp:DataList> 
</form>

<script type="text/javascript" charset="utf-8"> 
        $(document).ready(function() { 
            $("a[rel^='prettyPhoto']").prettyPhoto(); 
        }); 
</script>

Code behind looks like following.

using System.IO;

protected void Page_Load(object sender, EventArgs e) 
    { 
        if (!IsPostBack) 
        { 
            DirectoryInfo myImageDir = new DirectoryInfo(MapPath("~/images/fullscreen/")); 
            try 
            { 
                galleryDataList.DataSource = myImageDir.GetFiles(); 
                galleryDataList.DataBind(); 
            } 
            catch (System.IO.DirectoryNotFoundException) 
            { 
                Response.Write("<script language =Javascript> alert('Error!');</script>"); 
            } 
        } 
    }

 

Build and Run

Now time to run the application to see the result. The output looks like Image 1.

Image 1.

When click on any image then result looks like Image 2 and so on.

Image 2. 

Image3. 

Image 4. 

Image5. 

Image 6.

Now we are done here. Is't it a cool control. If you have any questions and comments feel free to post me.