Skip Navigation LinksHome > Categories > Code from a Category

jQuery show larger image when hover thumbnail images in a DataList

User Name: jamest85
Name: James Tang
Contact Me:
Home Page:
Google Apps for Work Partner, Certified Zoho CRM Consultant. 7 years experience on Zoho consulting, implementation, and programming using C#, VB, Php..., 15 years of total IT experience including prog... [More]
Viewed Times: 18634
Add Date: 07/13/2010
This post shows how to use jQuery to show a larger image when user hovers thumbnail images from a Datalist control, also use hidden img control to cache the large image when page loads which improves the performance dramatically.
You can see the live demo here: Click this demo link

The original idea was from this nice article wirtten by Alen Grakalic: Easiest Tooltip and Image Preview Using jQuery, and you can find that live demo from this link

Please also check my another post: jQuery show larger image when hover a thumbnail image

My task is:
Have a Datalist control which lists products information along with their thumbnail images, once user hover any image, it will popup its larger image.

1. Put jQuery files in application folder, I put here:
jQuery/jquery-1.2.6-vsdoc.js, this is for supporting Visual Studio Intellisense
jQuery/jquery.js, this is the jQuery JavaScript Library v1.4.2
jQuery/main.js, this is the modified file based on Alen Grakalic's main.js
App_Themes/Styles.css , add the css style in that style sheet.

2. Reference above files in header section: 3. Here is the code, note: the asp:Image control is getting image from .ashx handler, I want to keep that unchanged, so I add a hidden img control for caching the images. 4. This is the main.js file: 5. When I use Alen Grakalic's main.js code, it works fine, but since my large image size is pretty big, and it shows slow espicailly the first time, and reaches to the unacceptable point, so I added a hidden img control to cache the large images to the client side when page loads, and then set the largeImg.src = hiddenImg.src, that solved the problem. The main changes are: a. add a hidden img control, and get unique id, also get the src value from database. b. assign the hidden img.src to hover img.src: 6. This is the style I use for p id='screenshot': 7. The function formatURL() in code behind just formats the image URL from database, for example from: ~/myImageFolder/uniqueImageName.jpg to: myImageFolder/uniqueImageName.jpg, since the image names are all unique, that is why I can assign them as each hidden img's id.

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.