Post
Ask Question

Enlarge Image Using jQuery

This article shows how to show images in a data list from a directory and on the click of an image how to enlarge that image using JQuery.

The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EnlargeImageOnClick.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>jQuery: Enlarge an Image</title>  
  8.     <link href="StyleSheet.css" rel="stylesheet" />  
  9.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  10.     <style type="text/css">  
  11.         .imgthumb {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.         }  
  15.   
  16.         .imgdiv {  
  17.             background-color: White;  
  18.             margin-left: auto;  
  19.             margin-right: auto;  
  20.             padding: 10px;  
  21.             border: solid 1px #c6cfe1;  
  22.             height: 500px;  
  23.             width: 450px;  
  24.         }  
  25.     </style>  
  26.     <script type="text/javascript">  
  27.         $(function () {  
  28.             $("img.imgthumb").click(function (e) {  
  29.                 var enlargeImage = '<img src=Images/' + $(this).attr("alt") + '></img>';  
  30.                 $('#divImgEnlarge')  
  31.                    .html($(enlargeImage)  
  32.                    .animate({ height: '300', width: '450' }, 1500));  
  33.             });  
  34.         });  
  35.     </script>  
  36. </head>  
  37. <body>  
  38.     <form id="form1" runat="server">  
  39.         <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"  
  40.             style="background: White;">  
  41.             <tr>  
  42.                 <td style="height: 50px; background-color: skyblue; padding-left: 10px;">  
  43.                     <span style="font-size: 20pt; font-weight: bold; color: blue;">jQuery: Image Enlarge On Image Click</span>  
  44.                 </td>  
  45.             </tr>  
  46.   
  47.             <tr>  
  48.                 <td>  
  49.                     <asp:DataList ID="dListImages" runat="server" RepeatColumns="8">  
  50.                         <ItemTemplate>  
  51.                             <table border="1">  
  52.                                 <tr>  
  53.                                     <td>  
  54.                                         <img alt='<%#Eval("Text") %>' src='<%#Eval("Value") %>' class="imgthumb" /></td>  
  55.                                 </tr>  
  56.                             </table>  
  57.                         </ItemTemplate>  
  58.                     </asp:DataList>  
  59.                 </td>  
  60.             </tr>  
  61.             <tr>  
  62.                 <td style="text-align: center; vertical-align: central; border: solid 2px red;">  
  63.                     <div id="divImgEnlarge"></div>  
  64.                 </td>  
  65.             </tr>  
  66.         </table>  
  67.     </form>  
  68. </body>  
  69. </html>  
My aspx.cs code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8.   
  9. namespace EnlargeImageOnClick  
  10. {  
  11.     public partial class Default : System.Web.UI.Page  
  12.     {  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             if (!IsPostBack)  
  16.             {  
  17.                 BindImages();  
  18.             }  
  19.         }  
  20.   
  21.         public void BindImages()  
  22.         {  
  23.             string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));  
  24.             List<ListItem> files = new List<ListItem>();  
  25.             foreach (string filePath in filePaths)  
  26.             {  
  27.                 files.Add(new ListItem(Path.GetFileName(filePath), filePath));  
  28.             }  
  29.             dListImages.DataSource = files;  
  30.             dListImages.DataBind();  
  31.         }  
  32.     }  
  33. }  
Now run the application:

jquery
Image 1.

Click on an image.

image
Image 2.

image enlarge
Image 3.

image click
Image 4.

show image
Image 5.


Similar Articles