Display Full Size Image on Mouse Over Thumbnail in ASP.NET

How to display a full size image when user hovers mouse over a thumbnail image?

1. Add an ASP:Image control for displaying the full size image:

<asp:Image ID="imgOriginalImage" runat="server" style="display:none;" />

Since the full size image will not show up until the mouse is hovered over thumbnail, so the image is hidden initially.

2. Use a DataList control to display the thumbnails:

<asp:DataList ID="dlThumbnails" runat="server" DataKeyField="Name" DataMember="Name"
    RepeatColumns="3" Width="100%">
    <ItemTemplate>
        <asp:Image ID="imgThumbnail" runat="server" />
    </ItemTemplate>
</asp:DataList>

In this example, I stored all images in file system, so I sue DirectoryInfo.GetFiles() as the DataList’s DataSource to bind the control. If you store image path in database, then change your code accordingly.

    Protected Sub LoadThumbnails()
        Dim imgDir As directoryInfo = New directoryInfo(Server.MapPath("~/Photos/Thumbnails"))
        Me.dlThumbnails.DataSource = imgDir.GetFiles()
        Me.dlThumbnails.DataBind()
    End Sub

Then in the ItemDataBound event handler of the DataList control, we need to set the thumbnail image’s url and also add “onMouseOver” attribute to each thumbnail.

Private Sub dlThumbnails_ItemDataBound(ByVal sender As Object, _
            ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) _
                Handles dlThumbnails.ItemDataBound
    If (e.Item.ItemType = ListItemType.AlternatingItem _
            Or e.Item.ItemType = ListItemType.Item) Then
        Dim fileName As String = Me.dlThumbnails.DataKeys(e.Item.ItemIndex).ToString()
        Dim img As System.Web.UI.WebControls.Image = _
                CType(e.Item.FindControl("imgThumbnail"), System.Web.UI.WebControls.Image)
        img.ImageUrl = "~/Photos/Thumbnails/" & fileName
        Dim fullImageURL = Request.ApplicationPath & "/Photos/" & fileName
        img.Attributes.Add("onmouseover", "displayFullImage('" & fullImageURL & "')")
    End If
End Sub

I use the same file name for both the thumbnail and the full image, but store them in differenct directories.

Notice that the “onMouseOver” event will call a JavaScript function to display the full size image. Here is the JavaScript function:

<script type="text/javascript">
    function displayFullImage(url)
    {
        var img = document.getElementById('<%=imgOriginalImage.ClientID %>')
        img.style.display="block";
        img.style.width="800px"; //change to your image size
        img.style.height="600px"; //change to your image size
        img.src = url;
    }

</script>

3. Finally, call LoadThumbnail function in Page_Load event handler:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
            Handles Me.Load
    If Not IsPostBack Then
        Me.LoadThumbnails()
    End If

End Sub

You are done. As usual, here is a demo to show you how it works.

UPDATE:

Ravenheart asked how to make this application work when using a .js file instead of the embedded JavaScript function. Here is the solution if you use .js file:

1. Change the JavaScript function displayFullImage as follows:

function displayFullImage(imgId, url)
{
    var img = document.getElementById(imgId)
    img.style.display="block";
    img.style.width="800px"; //change to your image size
    img.style.height="600px"; //change to your image size
    img.src = url;
}

2. Change the ItemDataBound event handler as follows:

Private Sub dlThumbnails_ItemDataBound(ByVal sender As Object, _
            ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) _
                Handles dlThumbnails.ItemDataBound
    If (e.Item.ItemType = ListItemType.AlternatingItem _
            Or e.Item.ItemType = ListItemType.Item) Then
        Dim fileName As String = Me.dlThumbnails.DataKeys(e.Item.ItemIndex).ToString()
        Dim img As System.Web.UI.WebControls.Image = _
                CType(e.Item.FindControl("imgThumbnail"), System.Web.UI.WebControls.Image)
        img.ImageUrl = "~/Photos/Thumbnails/" & fileName
        Dim fullImageURL = Request.ApplicationPath & "/Photos/" & fileName
        img.Attributes.Add("onmouseover", "displayFullImage('" & Me.imgOriginalImage.ClientID & "', '" & fullImageURL & "')")
    End If
End Sub

So basically we need to pass the id of the full image control as a parameter to the JavaScript function, instead of using <%=imgOriginalImage.ClientID %> because it will not work with included .js file.

0 0 votes

Article Rating

3 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Ravenheart

14 years ago

What if you include the javascript in a .js file and then include it in every page, the server won’t run the , any workarounds(apart from including the script in the page itself)?