Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery lightbox image slideshow gallery in asp.net

Dec 15, 2011
Introduction:

In this article I will explain how to create lightbox image slideshow in asp.net using JQuery.


Description:
  
In previous post I explained about Ajax SlideshowExtender sample to display images slideshow. Now in this article I will explain how to create lightbox image slideshow in asp.net using JQuery. In many websites generally we will see different types of slideshows like whenever we click on image that is automatically open with lightbox effect and we have a chance to see all the remaining images by press next or previous options in slideshow. All these Slideshows are implemented by using JQuery plugins. After seen those slideshows I decided to write post to use JQuery plugins to implement beautiful slideshown in asp.net. 


To implement this one I am using  previous post insert and display images from folder based on imagepath in database because in that post I explained clearly how to insert images into our project folder and insert images path into database and display images in gridview from images folder based on Images path in database.
To implement slideshow concept first design table in your database as shown below
Column Name
Data Type
Allow Nulls
ID
int(set identity property=true)
No
ImageName
varchar(50)
Yes
Description
nvarchar(max)
Yes

After completion of table creation Open Visual Studio and create new website after that right click on your website and add new folder and give name as SlideImages because here I used same name for my sample if you want to change folder name then you need to change the Slideimages folder name in your code behind also after that write the following code in your aspx page  


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Display Images Slideshow in asp.net using JQuery</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td colspan="2" height="200"></td>
</tr>
<tr>
<td>
Upload Image:
</td>
<td>
<asp:FileUpload ID="fileuploadimages" runat="server" />
</td>
</tr>
<tr>
<td>
Enter Image Desc:
</td>
<td>
<asp:TextBox ID="txtDesc" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">
<ItemTemplate>
<a id="imageLink" href='<%# Eval("ImageName","~/SlideImages/{0}") %>' title='<%#Eval("Description") %>' rel="lightbox[Brussels]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
</a>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</td>
</tr>
</table>
<br />
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css file by using those files we will get lightbox effect slideshow. To get those files download attached sample code and use it in your application.

Another thing here we need to know is href link

<a href='<%# Eval("ImageName","~/SlideImages/{0}") %>' id="imageLink" title='<%#Eval("Description") %>' rel="lightbox[Brussels]" runat="server" >
In above tag I added rel="lightbox" this tag is used to active lightbox title this attribute is used to display image caption. If we have set of related images to group we need to include group name in between square brackets in rel attribute like rel="lightbox[Brussels]"

After completion of aspx page design add following namespaces in code behind 

C# Code

using System;
using System.Data;
using System.Data.SqlClient;
using System.IO;
After add namespace write the following code


SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
con.Open();
//Query to get ImagesName and Description from database
SqlCommand command = new SqlCommand("SELECT ImageName,Description from SlideShowTable", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
dlImages.DataSource = dt;
dlImages.DataBind();
con.Close();
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
//Get Filename from fileupload control
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
//Save images into SlideImages folder
fileuploadimages.SaveAs(Server.MapPath("SlideImages/" + filename));
//Open the database connection
con.Open();
//Query to insert images name and Description into database
SqlCommand cmd = new SqlCommand("Insert into SlideShowTable(ImageName,Description) values(@ImageName,@Description)", con);
//Passing parameters to query
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@Description", txtDesc.Text);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
txtDesc.Text = string.Empty;
BindDataList();
}

VB.NET Code

Imports System.Data
Imports System.Data.SqlClient
Imports System.IO

Partial Class _Default
Inherits System.Web.UI.Page
Private con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDataList()
End If
End Sub
Protected Sub BindDataList()
con.Open()
'Query to get ImagesName and Description from database
Dim command As New SqlCommand("SELECT ImageName,Description from SlideShowTable", con)
Dim da As New SqlDataAdapter(command)
Dim dt As New DataTable()
da.Fill(dt)
dlImages.DataSource = dt
dlImages.DataBind()
con.Close()
End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
'Get Filename from fileupload control
Dim filename As String = Path.GetFileName(fileuploadimages.PostedFile.FileName)
'Save images into SlideImages folder
fileuploadimages.SaveAs(Server.MapPath("SlideImages/" & filename))
'Open the database connection
con.Open()
'Query to insert images name and Description into database
Dim cmd As New SqlCommand("Insert into SlideShowTable(ImageName,Description) values(@ImageName,@Description)", con)
'Passing parameters to query
cmd.Parameters.AddWithValue("@ImageName", filename)
cmd.Parameters.AddWithValue("@Description", txtDesc.Text)
cmd.ExecuteNonQuery()
'Close dbconnection
con.Close()
txtDesc.Text = String.Empty
BindDataList()
End Sub
End Class
Now run your application and enter images description and upload some of the images using upload control after that your page should be like this  



Now click on any image slideshow will begin with lightbox effect. Check the below demo

Demo

If you observe above image in this lightbox slideshow we are having different features like auto playing, navigate images using ‘prev’ and ‘next’ links, show image description and stop slideshow options and many more.

In slideshow we can navigate by using keyboard shortcuts

f- first image
l- last image
x and c to close
left arrow and p for previous image
right arrow and n for next image

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

86 comments :

amitabhaghosh197 said...

hi,
shall it only work with asp.net or i can put it on html?

Suresh Dasari said...

@amitabhaghosh197..
it will work for html also.

Tarikashri said...
This comment has been removed by the author.
Tarikashri said...

error : 'ASP.slideshow_aspx.ProcessRequest(System.Web.HttpContext)': no suitable method found to override c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET

Suresh Dasari said...

@Tarikashri..
i think that problem with your application check it once this application working perfectly.

sanjay kumar acharya(9776544793) said...

It is working very good.But i want to fix the image size at the time of slideshow that is not happening in ths article.

Anonymous said...

Thank you very much! Your code helped me do this with images stored in the database too (not just file path)!

Anonymous said...

thank you very much.

Anonymous said...

what does rel="lightbox[Brussels]" means ? ?
should i use my own image folder name instead of "Brussels" ?

Anonymous said...

I want to display slide-show of images which are inside the folder of the project plz help me out.

GAYATHRIGOPALAKRISHNAN said...

its awesome sir and its so helpful

adi said...
This comment has been removed by the author.
shivsa said...

very nice site in all site.thanks for suresh...........it's real nice site

Shiv Singh Rajput
Software Programmer Head

shivsa said...

Nice site because all demo code with example and all code are true and properly work

J. Martinez said...

It is a greate way to display images and information, however, i need some help displaying the lightbox, i don't have much understanding on js. when i click the thumb i get 404 error... what am i doing wrong? please help!

Unknown said...

hi it is very fantastic it works but when i click on image it starts slide show but size of slide show is much much bigger please help

Unknown said...

Great work, what about a slide of webpages, is this possible? that u can start a slide of some webpages.

Anonymous said...

Thakn you Very much

Anonymous said...

it,s
great

Anonymous said...

suresh sir u r fantastic, want to meet you if you are in hyderabad
thanks, Rehan

Anonymous said...

dear sir
I'm getting dis error when running ur demo application......

Error : It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.
4m bhartijha.4@gmail.com

Inder said...

Godd Work, I have problem. When i click on picture in datalist for slide show ,it gets enlarged into very big picture taking almost double of web page. Where can i correct it.

nephy said...

can you help me to create photo tagging in asp.net like Facebook...thanks in advance..

Unknown said...

There is no attachement to download source code

Suresh Dasari said...

@Sudhur Belani...
Please check the above download source code option is available.

Anonymous said...

It is working very good.But i want to fix the image size at the time of slideshow that is not happening in ths article.

nephy said...

suresh sir...can you help me to create photo tagging in asp.net like Facebook...thanks in advance..please....

dolly said...

Thank you so much for the code
I have one doubt,how to use paging for datalist, i have used listview and used paging its not working properly..plz help

Unknown said...

Thanks sir...
very nice code ....
but
Can i set image resolution in lightbox . when i upload large resolution image then the size of lightbox is automaticaly increases....plz help me ..
if posibal then sent code on my mail...
csp567@gmail.com

Abhinavsingh993 said...

sir , please correct problem i implement this in my b.tech final year project which is intranet mailing system but it working till storing and WHEN I CLICK AT THE IMAGE ONLY I GET THE IMAGE LIKE BUFFERING SYMBOL AT YOUTUBE ,sir solve it because I HAVE TO GIVE THE PRESENTATION OVER IT AT 19 OCT 2012

Abhinavsingh993 said...
This comment has been removed by the author.
lakhsmi said...

i need that jquery code

Unknown said...

can u did videogallery

srinivasan said...

superb, hats off to you. I just copied the code and could could create a web site on the fly in just half an hour.

again thanks a lot

Mubashir said...

Hi,
I have one query. I am trying to change image size and slide show duration during slide show preview but not bale to get exact JS file and location where changes requires. Could you please send a reply on my email id sk27mubashir@gmail.com?

Thanks in advance :)

Maple Quinzon said...

Hello Suresh, thanks for this code but would you mind if I ask, if you have any codes for photos inside album? thanks :)

Unknown said...

Thanks a lot.it working fine but i wan't fix certain width and height.plz tell me.

Surabhi said...

thanks, if we add comment with silde show, each photo save in data base

UI Design said...

sir gd evng,, plz give same answer..if i want stop auto slideshow ???

Anonymous said...

Give your Valuable Comments...

UI Design said...

If want,, image zoom on mouse over and hide,,
Example:pepperfry site in use onmouse over hide,,
so plz sol my question

UI Design said...

hello sir plz give me my answer..??

UI Design said...

hello sir,
I want ajax-zoom in asp.net example,,
mouseover zoom-in and zoom-out?:-"http://www.ajax-zoom.com/"

Anonymous said...
This comment has been removed by a blog administrator.
UI Design said...

Sir I want image zoom by onmouse so plz help me

Sudarsh said...

Hi..

Thank you so much sharing ....
It helped... :)

Sudarsh Khare said...

Hi Suresh,
Just a suggestion.....Using Listview over Datalist will give more control over the gallery for e.g. pagination... :)

UI Design said...

Yes sir. Exm. www.Pepperfry.com Mouse over image to zoom and Image shows in Datalist. And other Exm.- wayfair.com. is also zoom the image in this site

Unknown said...

Hi Suresh,
Iam implemented this slideshow one of my wesite..but there am saving images in DB as byte code..its working pretty fine.but my problem is its taking bit of time to load the images in page..if user trying to click one of image before loading all images some script will show..so i need to avoid that scrip..just i need to show 'loading'..how i can do that..pls help me.

Anonymous said...

HOW MAKE THE IMAGES ALBUMS PLZZ HELP ANYONE
BRUSSELS??????????????

Unknown said...

hello everyone
i m developing a web apps like online media gallery, where i need to slide show movies,Video songs & audio songs from 3 different tables to 3 different container on a single page.
So kindly suggest what should i do..and code for that.
thanq

Indrajeet Singh Dhanik said...

Hi suresh,

I have attached this code in my application,but it is showing some error , when i click on any image ,the image is open in new page .

Microsoft JScript runtime error: Object doesn't support this property or method

Lightbox.js



updateImageList: function(){
var el, els, rel;
for(var i=0; i < this.refTags.length; i++){
els = this.container.getElementsByTagName(this.refTags[i]);
for(var j=0; j < els.length; j++){
el = els[j];
rel = String(el.getAttribute('rel'));
if (el.getAttribute('href') && (rel.toLowerCase().match(this.relAttribute))){
el.onclick = function(){Lightbox.start(this); return false;}
}
}
}
},

If possible Please mention your personal contact no also

Anonymous said...

Hi i am trying to close a fancy box with .net but nothing i do is working do you have any tips

Anonymous said...

i would like to display images inside different folders as like facebook albums.

Abhinavsingh993 said...

as great like you

Amitesh said...

Thanks a lot mate it help me alot

Unknown said...

thanks so much! it's cool!! <3

Amitesh said...

can you tell how i can show images from different folder into datalist. Suppose i have 3 folder in my images folder and i have images in those folder ho can i show those images on datalist

Unknown said...

Hi Suresh, Almost Daily I Used to come visit your website to solve my problems, you really done a great job by making this blog for helping people.

Right now i am in big trouble. i hope you could have a solution.

I wanted to make a Jquery Banner With the help of DATALIST. Is there anyway i can achieve. this....

Anonymous said...

css is not found ..... sir plz help me ..

Unknown said...

Source Error:


Line 28: protected void BindDataList()
Line 29: {
Line 30: con.Open();
Line 31: //Query to get ImagesName and Description from database
Line 32: SqlCommand command = new SqlCommand("SELECT ImageName,Description from Tbl_SlideImage", con);

how can i solve this error ?

vilangulathur said...

da.Fill(dt);

The type initializer for 'System.Data.Common.DataStorage' threw an
exception.

i got error

how can do solve?

Unknown said...

Its working fine....But that prev,next,close images are not visible on the slideshow

Unknown said...

hi suresh in this example when we are clicking the image next, prev and close buttons are showing in the image from where the images are coming i am little bit confused

Anonymous said...

@mohankumar the prev,next,close buttons are work finely. that will show only when we get mouse pointer to closer.
Hello suresh sir,
This is kohila.
I'm very big fan of you.......
It's really awesome man......
Thank you sir.
Have a happy coding.

Manu Vats said...

Sir i use your code every thing process done very well but the image not show in site then please tell what the reason of that problem

Manu Vats said...

Sir if u r online then please help me urgent

Anonymous said...

thnx alot sirrrrr........

Anonymous said...

Thanx Suresh....ur just aawesome...Loved ur post.
U saved my life. :-) <3 :-)

huejiitech said...
This comment has been removed by the author.
huejiitech said...

WHY THE IMAGE IS SO BIGGER THAN THE BROWSER??? HOW TO SET A FIX HEIGHT AND WIDTH OF THE IMAGE INSIDE THE LIGHTBOX??????

Prasanna Vivek said...

thank u suresh. It is very much helpful.

Mani said...

Thanks for your answer. It is helpful to me and simple to understand........thanks again it helps more developers.............

Unknown said...

how to display images with description which is shown below the image..?

Anonymous said...

I just copied this code but no prev/next link is appearing on the picture.. Why is this do? PLease help

Anonymous said...

I attached this code with my code it works properly but when i click on image it showing option-
"Save file" or "open file with" so please help me what will be the problem? please help me out.
Thank You

Anonymous said...

I just want give the lightbox to already stored path in database,means the path is already eixsts im my database so plz help me

Anonymous said...

Hi, Nice post. Animation occuring only after click the image. My requirement is when page load, it should get images from database and need to run animation (with out click image, it should be automatic). It is very urgent Suresh, please let me know how to achieve this? my email: Palanisamy.v@hcl.com

Anonymous said...

How to set the fixed width and Height for Image?! Some Images look very bigger..???

Anonymous said...

Hi, I am trying to implement in such way that number of images shown on main page will be 10 but actual count in database 50 images. When user click on any image on home page lightbox will appear and image count will display 50 images instead of 10. Can you please suggest me for the same?

Anonymous said...

Hi, thanks, what about if i want one image, and show slide when user click on that image (slide show from database). Thanks again for sharing

Unknown said...

Hi,
can i adjust the image size during the slideshow?

Unknown said...

there is a problem when i put this code in my web page with a master page the designing of gallay is not showing but only image is opened and there is no previous,next etc button can you solve it please tell me

GYAN said...

when i use this code for image coming from database. It will show binary codes. what to do??

Damo said...

I have uploaded images of different sizes. They appear the same size in the gallery at first.

But when the slideshow begins, the image expands based on the original size of them.

How do I set the container which displays the images in the slideshow to be fixed? So all the images appear the same size in the slideshow?

Unknown said...

Sir
What is the code for next n previous in image gallery?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.