Make Photo Slideshow using JQuery


This article will describes how to make and run image slideshow with the help of JQuery. I am using PrettyPhoto JQuery in this sample. PrettyPhoto is a free JQuery project, I used to build this nice photo gallery.

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.

Call JS and CSS in inside of head tag like this.

<head runat="server">

    <title>JQuery Photo Slideshow Example</title>

    <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>

</head>

Here I am using two options if you want to fetch images from database then you can use DataList control and if you want to show direct in HTML IMG control then choose first option.

This is using IMG HTML Control

<div>

    <h3>Using IMG HTML Control</h3>

    <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="Red round shape" /></a>

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

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

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

    <a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

    </div>   

   

 

This is using DataList data control.

 

<div>

    <h3>Using DataList</h3>

    <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>

  </div>

 

As you can see everything is same as image gallery sample now the only diffrence is this script, call this script after closing of Body tag.

 

<script type="text/javascript" charset="utf-8">

        $(document).ready(function() {

            $("a[rel^='prettyPhoto']").prettyPhoto({ theme: 'facebook', slideshow: 5000, autoplay_slideshow: true });

        });

        </script>

 

Code Behind:

 

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

Image1.

Now click on any image then image should be open in new window and wait little bit all images show come in slideshow with previous,next option.


2.jpg

Image2.

As you can see images are rotating itself just wait little bit.