Reader Level:
ARTICLE

JQuery Photo Gallery

Posted by Raj Kumar Articles | JQuery January 07, 2011
This article describes how to create a photo gallery with image listing and paging using JQuery and prettyPhoto.
  • 0
  • 0
  • 56825
 


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.


1.jpg
Image 1.

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

2.jpg

Image 2. 

3.jpg

Image3. 

4.jpg

Image 4. 

5.jpg

Image5. 

6.jpg


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.

Article Extensions
Contents added by Eduardo Alexander on Apr 17, 2013
Thanks
Contents added by Neelesh Malvi on Jun 22, 2012
How to drag and drop images in another panel in this examples
COMMENT USING

Trending up