Enlarge Image pop up on hovering the image using plugin


 

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 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

Ads