How to use JQueryLightBox in ASP.NET

Raj Kumar
May 13, 2012

48.8k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

jquery-lightbox-0.5.zip

This sample is going to examine how to use JQueryLightBox in a database application. jQuery lightBox plugin is simple, elegant and unobtrusive; there no need for extra markup and it is used to overlay images on the current page through the power and flexibility of jQuery's selector.

There are two javascript script files

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryLightBoxExample.aspx.cs" Inherits="JQueryLightBoxExample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>JQueryLightBox Example</title>
    <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
     <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
      <style type="text/css">
      /* jQuery lightBox plugin - Gallery style */
      #gallery {
            background-color: #444;
            padding: 2px;
            width: 800px;
      }
      #gallery ul { list-style: none; }
      #gallery ul li { display: inline; }
      #gallery ul img {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
      }
      #gallery ul a:hover img {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
      }
      #gallery ul a:hover { color: #fff; }
      </style>
</head>

<body>
    <form id="form1" runat="server">
    <div id="gallery">
    <asp:DataList ID="FeaturedList" runat="server" RepeatLayout="Table" Width="100%" RepeatColumns="5">
                                                        <ItemTemplate>
                                                            <div>
                                                                <ul>
                                                                <li>
                                                                   <a href='<%#getHREF(Container.DataItem)%>' title='<%# DataBinder.Eva
(Container.DataItem, "Rep_FirstName")%>'>
                                                                                                                    <img src='<%# getSR
(Container.DataItem) %>' align="top" title='<%# DataBinder.Eval(Container.DataItem, "Rep_FirstName")%>' height="100" width="100">
                                                                   </a>
                                                                </li>
                                                                </ul>
                                                             </div>
                                                        </ItemTemplate>
                                                    </asp:DataList>
    </div>
    </form>
</body>
</html>

Code Behind :

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Data.SqlClient;

public partial class JQueryLightBoxExample : System.Web.UI.Page
{
    SqlConnection conn;
    SqlCommand cmd;
    DataTable dataTable;
    SqlDataAdapter sqlAdapter;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetImagesFromDatabase();
        }
    }

    public void GetImagesFromDatabase()
    {
        conn = new SqlConnection();
        conn.ConnectionString = "Data Source=RAJ-PC\\;Initial Catalog=ModelingCorner;Integrated Security=True";
        if (conn.State == ConnectionState.Closed)
            conn.Open();
        cmd = new SqlCommand();
        cmd.CommandText = "Select top 5 * from tbl_Rep_Profile";
        cmd.CommandType = CommandType.Text;
        cmd.Connection = conn;
        dataTable = new DataTable();
        sqlAdapter = new SqlDataAdapter();
        sqlAdapter.SelectCommand = cmd;
        sqlAdapter.Fill(dataTable);
        FeaturedList.DataSource = dataTable.DefaultView;
        FeaturedList.DataBind();
    }

    public string getHREF(object sURL)
    {
        DataRowView dRView = (DataRowView)sURL;
        return ResolveUrl("~/Rep_Images/" + dRView["UserId"].ToString() + "/" + dRView["Rep_Id"].ToString() + "/" + "Real" + "/" + dRView["Rep_Img_Name"].ToString());
    }

    public string getSRC(object imgSRC)
    {
        DataRowView dRView = (DataRowView)imgSRC;
        return ResolveUrl("~/Rep_Images/" + dRView["UserId"].ToString() + "/" + dRView["Rep_Id"].ToString() + "/" + "Thumbnail" + "/" + "M" + "/" + dRView["Rep_Img_Name"].ToString());
    }
}

Now run the application:

Image 1.

When you click on an image then the picture will expand. When you roll over on top of image then you can see PREV and NEXT, Image Title, Image Counting and Close button.