Reader Level:
Article

Image Popup Using JQuery

By Purushottam Rathore on Apr 11, 2011
In this article you will learn how to show any thumbnail image in full size using JQuery.
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:

Purushottam Rathore

I am working as a Software Developer and has 6 years of experience on Microsoft Technology and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with ASP.NET 2.0/3.5/... Read more

COMMENT USING