JQuery

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs