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.
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.
Image2.
As you can see images are rotating itself just wait
little bit.