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.