Introduction:
In this article I will explain how to create lightbox image slideshow in asp.net using JQuery.
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
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.
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.
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 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 Email
|
|||
86 comments :
hi,
shall it only work with asp.net or i can put it on html?
@amitabhaghosh197..
it will work for html also.
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
@Tarikashri..
i think that problem with your application check it once this application working perfectly.
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.
Thank you very much! Your code helped me do this with images stored in the database too (not just file path)!
thank you very much.
what does rel="lightbox[Brussels]" means ? ?
should i use my own image folder name instead of "Brussels" ?
I want to display slide-show of images which are inside the folder of the project plz help me out.
its awesome sir and its so helpful
very nice site in all site.thanks for suresh...........it's real nice site
Shiv Singh Rajput
Software Programmer Head
Nice site because all demo code with example and all code are true and properly work
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!
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
Great work, what about a slide of webpages, is this possible? that u can start a slide of some webpages.
Thakn you Very much
it,s
great
suresh sir u r fantastic, want to meet you if you are in hyderabad
thanks, Rehan
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
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.
can you help me to create photo tagging in asp.net like Facebook...thanks in advance..
There is no attachement to download source code
@Sudhur Belani...
Please check the above download source code option is available.
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.
suresh sir...can you help me to create photo tagging in asp.net like Facebook...thanks in advance..please....
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
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
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
i need that jquery code
can u did videogallery
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
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 :)
Hello Suresh, thanks for this code but would you mind if I ask, if you have any codes for photos inside album? thanks :)
Thanks a lot.it working fine but i wan't fix certain width and height.plz tell me.
thanks, if we add comment with silde show, each photo save in data base
sir gd evng,, plz give same answer..if i want stop auto slideshow ???
Give your Valuable Comments...
If want,, image zoom on mouse over and hide,,
Example:pepperfry site in use onmouse over hide,,
so plz sol my question
hello sir plz give me my answer..??
hello sir,
I want ajax-zoom in asp.net example,,
mouseover zoom-in and zoom-out?:-"http://www.ajax-zoom.com/"
Sir I want image zoom by onmouse so plz help me
Hi..
Thank you so much sharing ....
It helped... :)
Hi Suresh,
Just a suggestion.....Using Listview over Datalist will give more control over the gallery for e.g. pagination... :)
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
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.
HOW MAKE THE IMAGES ALBUMS PLZZ HELP ANYONE
BRUSSELS??????????????
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
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
Hi i am trying to close a fancy box with .net but nothing i do is working do you have any tips
i would like to display images inside different folders as like facebook albums.
as great like you
Thanks a lot mate it help me alot
thanks so much! it's cool!! <3
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
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....
css is not found ..... sir plz help me ..
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 ?
da.Fill(dt);
The type initializer for 'System.Data.Common.DataStorage' threw an
exception.
i got error
how can do solve?
Its working fine....But that prev,next,close images are not visible on the slideshow
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
@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.
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
Sir if u r online then please help me urgent
thnx alot sirrrrr........
Thanx Suresh....ur just aawesome...Loved ur post.
U saved my life. :-) <3 :-)
WHY THE IMAGE IS SO BIGGER THAN THE BROWSER??? HOW TO SET A FIX HEIGHT AND WIDTH OF THE IMAGE INSIDE THE LIGHTBOX??????
thank u suresh. It is very much helpful.
Thanks for your answer. It is helpful to me and simple to understand........thanks again it helps more developers.............
how to display images with description which is shown below the image..?
I just copied this code but no prev/next link is appearing on the picture.. Why is this do? PLease help
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
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
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
How to set the fixed width and Height for Image?! Some Images look very bigger..???
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?
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
Hi,
can i adjust the image size during the slideshow?
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
when i use this code for image coming from database. It will show binary codes. what to do??
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?
Sir
What is the code for next n previous in image gallery?
Note: Only a member of this blog may post a comment.