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" %>
  3. <!DOCTYPE html>
  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. }
  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>
  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;
  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. }
  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.