aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.Net Image Gallery with Enlarge Image Preview in DataList using C# and VB.Net

Jun 27, 2016

Here I will explain how to show enlarge image preview when mouseover on images in image gallery using JQuery in  or zoom / enlarge images in datalist on mouseover using JQuery in or how to show enlarge image when mouse over on image using JQuery in


In previous article I explained jQuery modal popup image slideshow in, jQuery simple image slideshow with text overlay example, jQuery zoom image on mouseover using zoom image pluginGenerate thumbnail from images in, Generate thumbnails from YouTube videos using JQuery and many articles relating to JQuery,, SQL Server etc. Now I will explain how to show large image preview when mouse hover on images in datalist using JQuery in

To implement this concept first create new web application >> Right click on your application >> Select Add New Folder and Give name as Images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in

After completion of folder creation and insertion of images in folder write the following code in your aspx page

<html xmlns="">
<head id="Head1" runat="server">
<title>Show Image Preview when hover on Link using jQuery</title>
<script type="text/javascript" src="">
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// Configuration of the x and y offsets
function ShowImagePreview() {
xOffset = -20;
yOffset = 40;

$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")

function() {
this.title = this.t;

$("a.preview").mousemove(function(e) {
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px");

<style type="text/css">
border:3px solid #ccc;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
<form id="form1" runat="server">
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" />
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
Now add the following namespaces in code behind

C# Code

using System;
using System.Collections;
using System.IO;
After add namespaces write the following code in code behind

protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
protected void BindDataList()
DirectoryInfo dir = new DirectoryInfo(MapPath("Images"));
FileInfo[] files = dir.GetFiles();
ArrayList listItems = new ArrayList();
foreach (FileInfo info in files)
dtlist.DataSource = listItems;

Imports System.Collections
Imports System.IO
Partial Class VBCodeSamples
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then
End If
End Sub
Protected Sub BindDataList()
Dim dir As New DirectoryInfo(MapPath("Images"))
Dim files As FileInfo() = dir.GetFiles()
Dim listItems As New ArrayList()
For Each info As FileInfo In files
dtlist.DataSource = listItems
End Sub

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

Its working done sir, Thank u very much

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.