Enlarge Image pop up on hovering the image using plugin

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

Enlarge Image pop up on hovering the image using plugin
Posted on: August 2, 2010 at 12:00 AM

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

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

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics