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

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.

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

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.

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!

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

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

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?

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.

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

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

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

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?

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