ARTICLE

Image Popup Using JQuery

Posted by Purushottam Rathore Articles | JQuery April 11, 2011
In this article you will learn how to show any thumbnail image in full size using JQuery.
Reader Level:
Download Files:
 

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:

COMMENT USING