Skip Navigation LinksHome > Categories > Code from a Category

jQuery show larger image when hover a thumbnail image



User Name: jamest85
Name: James Tang
Contact Me: www.datawebcoder.com/ContactUs.aspx
Home Page: www.datawebcoder.com
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: 8293
Add Date: 07/13/2010
This post shows how to use jQuery to show a larger image when user hovers thumbnail images in a asp.net image control.
The original idea was from this nice article wirtten by Alen Grakalic: Easiest Tooltip and Image Preview Using jQuery, and you can that live demo from this link

Please also check my another post: jQuery show larger image when hover thumbnail images in a .net DataList control

This post shows how to popup a larger image when hover a single asp.net image control:
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 on .aspx page: 4. Here is the code on .aspx.cs page to get the URL from database for imgProductDetails control: 5. Code in main.js 6. Don't forget to put this css in App_Themes/Styles.css file, this style is for: p id='myscreenshot'
Ruhi Pawar
Comment #:  60 Replay this Comment Reply this comment Posted on: 5/17/2012

stringValueFromDatabase() in this function what is to be written

Comment #:  62 Replay this Comment Reply this comment Posted on: 5/17/2012

 Just a C# function that fetch the image url from database table, you can hard code it url for testing purpose.

disha
Comment #:  63 Replay this Comment Reply this comment Posted on: 5/18/2012

but how to write that function?

disha
Comment #:  64 Replay this Comment Reply this comment Posted on: 5/18/2012

can u send me similar function????

Comment #:  65 Replay this Comment Reply this comment Posted on: 5/18/2012

 Sorry, we are not able to send you sample code for this, if you know how to get data from sql database using C# code, then you should figure it out easily. if you are not a programmer, pls ask somebody else around you for assistance.

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:
Details**:
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.