Home Tutorial Jquery Enlarge Image pop up on hovering the image using plugin

 
 

Share on Google+Share on Google+
Enlarge Image pop up on hovering the image using plugin
Posted on: August 2, 2010 at 12:00 AM
Advertisement
In this tutorial, we will discuss about display of enlarge image popup on hovering the "image".

Enlarge Image pop up on hovering the image using plugin

In this tutorial, we will discuss about display of enlarge image popup on hovering the "image". In this Example, 4 images in a table is given. On hovering , it will display enlarge popup of the image . This effect is due to the 'thumbPopup' function of plugin. the plugin used here is "thumbhover.js".

hoverImagePopup.html

<html>
<head>
<script src=jquery-1.4.2.js></script>

<script src="jquery.thumbhover.js"></script>
<script>
$(function(){
$("img[src*='_s.jpg']").thumbPopup({
imgSmallFlag: "_s",
imgLargeFlag: "_l"
});
});
</script>
</head>
<body>
<center><font color="red">
<h2>Mouse Hover on below Image to see effects</h2></font></center>
<table align="center" style="margin-top: 50px;">
<tr>
<td><img src="jquery1_s.jpg" /></td>
<td><img src="jquery2_s.jpg" /></td>
</tr>
<tr>
<td><img src="jquery3_s.jpg" /></td>
<td><img src="jquery4_s.jpg" /></td>
</tr>
</table>
</body>
</html>

OUTPUT

On hovering  image at  1st row & 2nd column :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Enlarge Image pop up on hovering the image using plugin:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com