JQuery lightbox image slideshow gallery in asp.net
In this article I will explain how to create lightbox image slideshow in asp.net using JQuery.
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
int(set identity property=true)
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
<title>Display Images Slideshow in asp.net using JQuery</title>
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
After add namespace write the following code
SqlConnection con = newSqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
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
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