Image Popup Using JQuery

In my previous article (http://www.c-sharpcorner.com/UploadFile/prathore/6651/) I discussed image scrolling using JQuery. Here I am taking a simple example (from my previous article) to demonstrate the image popup.

Step 1: Create a simple application in Visual Studio.

Step 2: Add the following JQuery:

  1. prototype.js
  2. scriptaculous.js
  3. effects.js
  4. builder.js
  5. lightbox

These are included in the uploaded file.

Step 3: Add the following style sheet.

lightbox.css

Step 4: Now start work on the default .aspx page.

First, link these Jquery files and styles on the page as follows:

Default .aspx: 

<head runat="server"> 

    <link href="css/lightbox.css" rel="stylesheet" type="text/css" 
     media="screen" />   

    <script type="text/javascript" src="js/prototype.js"></script>   

    <script type="text/javascript" src="js/scriptaculous.js?load=effects,
     builder"></script>   

    <script type="text/javascript" src="js/lightbox.js"></script>   

</head>


Step 5: Drag a DataGrid from the toolbar and drop on the page and use the style as follows: 


<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" 
        ShowHeader="true" CellPadding="5"> 
             <Columns> 
            <asp:TemplateColumn HeaderText="Photo"> 
            <ItemTemplate> 
            <a href='<%#GetDetail(DataBinder.Eval(Container.DataItem,
             "EmplayeeId"))%>' rel="lightbox" 
              title='<%#title(DataBinder.Eval(Container.DataItem,
              "EmployeeName"))%>'> 
            <img height="100" width="90" style="border
              : Solid 1px Black;" src=
            '<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmplayeeId")
             )%>' /> 
             </a> 
            </ItemTemplate> 
            </asp:TemplateColumn> 
            </Columns> 
            </asp:DataGrid>

Now fetch the record from the database such as in the following:

Default .aspx.cs: 

using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Data; 
using System.Data.SqlClient; 
  
public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        ShowFavoriteArticles(); 
    } 
  
    private void ShowFavoriteArticles() 
    { 
  
        SqlConnection con = new SqlConnection(); 
        SqlCommand cmd = new SqlCommand(); 
        con = new SqlConnection("Data Source=server;Initial Catalog=TestData; 
        uid=sa;pwd=wintellect"); 
        cmd.Connection = con; 
        cmd.CommandText = "Select * from Puru_test_Employee"; 
        con.Open(); 
        DataGrid1.DataSource = cmd.ExecuteReader(); 
        DataGrid1.DataBind(); 
        con.Close(); 
    } 
    public string GetDetail(object objEmplayeeId) 
    { 
        int EmplayeeId = int.Parse(objEmplayeeId.ToString()); 
        string path = "images/" + EmplayeeId + ".jpg"; 
        return path; 
  
    } 
  
    public string title(object objEmployeeName) 
    { 
        string employeename = objEmployeeName.ToString(); 
        return employeename; 
    } 
}


Output: Press F5 and see the result.

Image1.gif

Figure:1

When you click an image you will see the popup like as follows:

Image2.gif

Figure 2:

Note: This is a very simple and attractive example for an image popup using JQuery. By using this example you can also show the description of the image.

image3.gif

Figure 3: