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