JQuery lightbox image slideshow gallery in asp.net

http://www.aspdotnet-suresh.com/2011/12/jquery-lightbox-image-slideshow-gallary.html

and http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

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

18 thoughts on “JQuery lightbox image slideshow gallery in asp.net

  1. わが子のピンとした膝にはかれているハイソックスは堂々として見えるが、
    これらのツートップに次いで目立つ、しかしお手入れを忘れがちな厄介な場所・・

  2. Have you ever thought about publishing an ebook or guest authoring on
    other blogs? I have a blog centered on the same ideas you discuss and would love to have you share some stories/information.
    I know my viewers would appreciate your work.
    If you are even remotely interested, feel free to send me an e
    mail.

  3. Hi everyone, it’s my first pay a quick visitt at this web page,
    annd post is truly fruitful foor me, keep up posting such articlews or reviews.

  4. The best way to generate traffic is by writing, formulating and posting articles on adult dating and adult websites.
    Follow the techniques describe below for better results.
    You will just need a lot of creativity and some time to make it work.
    Go through your list and do this for every page in your list.

  5. Hello great website! Does running a blog similar to this take
    a great deal of work? I have virtually no expertise
    in programming however I was hoping to start my own blog in the near future.

    Anyhow, if you have any recommendations or tips for new
    blog owners please share. I understand this is off subject nevertheless I just had
    to ask. Many thanks!

  6. Hello I am so delighted I found your blog,
    I really found you bby error, while I was researching on Yahoo for something else, Anyways I
    am here now and would just like to saay cheers for a ttremendous post and a all round exciting blog (I also love the theme/design),
    I don’t have time to browse iit alll at the minute but I have bookmarked it and also added in your RSS feeds, so when I have time
    I will be back to read a lot more, Please do keep up the awesome jo.

  7. It helps to strengthen the immune system in fighting against any inflammation and infection.
    Numb extremities can be revived and regenerated to sensation.
    As we mentioned in previous articles, endometriosis which grows somewhere else other than the
    endometrium also reacts to hormonal signals of the monthly menstrual cycle by building up tissue, breaking it,
    and eliminating it through the menstrual period.

  8. I’ve been exploring for a little bit for any high-quality articles or weblog
    posts on this sort of house . Exploring in
    Yahoo I finally stumbled upon this website. Reading this
    info So i’m happy to exhibit that I’ve a very just right uncanny feeling I discovered exactly what I needed.
    I so much for sure will make sure to don?t fail to remember this website and give it a glance on a constant basis.

  9. 50 shots include the Washington Apple, Royal F-(wait, can I
    say that. Everyone who played back in Tempest knows about Slivers, but not everyone knows their
    power. This means the hull is the same width in the bow as it is
    the stern, which gives you more room and better
    comfort.

  10. Уже в начале лета у тебя стал проскакивать бендекс .
    Сначало не часто , затем
    уже постоянно. А учесть что у меня оказался полу мертвый АКБ и в сильные морозы
    , чтоб завести на холодную у нас осталась одна
    попытка, а все еще бендекс пару
    секунд проскочит и АКБ сдохла.
    Понял что ездить постоянно так нельзя
    было ! Вскоре приобрел себе б/у АКБ ,
    и сейчас наступил черед стартера …
    Был зарыт в сарае аналогичный старый стартер , как оказалось
    он с дизельного бусика Мерседес .
    На взгляд снаружи похожи, отличия в передней двери.

    ремонт стартера уаз

    Решил генератор разобрать
    и снять с него бендекс и поставить
    на свой . Зато бендеск с Бехи отличался
    от оригинала – он немного короче , а так встал {отлично | хорошо

  11. Essayez notre programme pour vos routages à
    l’avance de SMS. Pensé pour le particulier comme pour l’entreprise, le programme vous permet depuis internet de créer vos messages à
    l’attention de tous vos contacts. Capable pour router un très grand
    nombre de SMS, notre application est très conseillé pour effectuer vos envois en masse.

    Parée d’une fantastique fonctionnalité de mailing, notre service est le summum des
    services d’expédition de SMS et de MMS.
    Vous pouvez mettre au point simplement vos envois à vers
    des dizaines de milliers de propects.

  12. Hey there! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly? My weblog looks weird when viewing from my
    apple iphone. I’m trying to find a template or plugin that
    might be able to correct this problem. If you have any suggestions,
    please share. Thank you!

  13. {Hi love your {Page I took a few minutes to read some of your posts! I was hoping you would visit my page and do the same!! We have been opening a ton of awesome toys over on my {Page! Check out my page and see some of my work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s