jQuery: Preview Image with Zoom Effect
Here, I will show you how to preview Image with Zoom effect. I mean, you will be able to preview large image when you hover the thumbnail image. The image is zoomed when hovered.
As you can see below, I have kept the large image link in the alt tag. The description/caption for the image is kept in rel tag.
<img src="hills-thumb.jpg" alt="hills.jpg" rel="Hills Image" /> <img src="lilies-thumb.jpg" alt="lilies.jpg" rel="Lilies Image" /> <img src="sunset-thumb.jpg" alt="sunset.jpg" rel="Sunset Image" /> <img src="winter-thumb.jpg" alt="winter.jpg" rel="Winter Image" />
When the mouse is hovered over the image, I just have switched the src and alt tag’s value. Then the width of the image is increased by 30% with the animate function. Everything is brought back to normal (default state) when the cursor is taken away from the image.
The source of the image is changed before zoom, so that it is not blurred when zoomed with larged width.
$(document).ready(function() {
var oldWidth = $("#thumbnail img").width();
$("#thumbnail img").hover(function(){
var src = $(this).attr("src");
$(this).attr("src",$(this).attr("alt"));
$(this).animate({width: "30%"},1000);
$(this).attr("alt",src);
}, function(){
$(this).animate({width: oldWidth},1000);
var src = $(this).attr("src");
$(this).queue(function(){
$(this).attr("src",$(this).attr("alt"));
$(this).attr("alt",src);
$(this).dequeue();
});
});
});
Here’s the full source code:
<html>
<head>
<title>jQuery: Image Preview With Zoom Effect</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var oldWidth = $("#thumbnail img").width();
$("#thumbnail img").hover(function(){
var src = $(this).attr("src");
$(this).attr("src",$(this).attr("alt"));
$(this).animate({width: "30%"},1000);
$(this).attr("alt",src);
}, function(){
$(this).animate({width: oldWidth},1000);
var src = $(this).attr("src");
$(this).queue(function(){
$(this).attr("src",$(this).attr("alt"));
$(this).attr("alt",src);
$(this).dequeue();
});
});
});
</script>
<style>
img {
border: none;
}
#thumbnail img {
cursor: pointer;
width: 100px;
padding: 2px;
float: left;
}
#large {
display: none;
position: absolute;
color: #FFFFFF;
background: #333333;
padding: 5px;
}
</style>
</head>
<body>
<div id="thumbnail">
<h3>Hover over the image</h3>
<img src="hills-thumb.jpg" alt="hills.jpg" rel="Hills Image" />
<img src="lilies-thumb.jpg" alt="lilies.jpg" rel="Lilies Image" />
<img src="sunset-thumb.jpg" alt="sunset.jpg" rel="Sunset Image" />
<img src="winter-thumb.jpg" alt="winter.jpg" rel="Winter Image" />
<p id="large"></p>
</div>
</body>
</html>
Related posts:
- jQuery: Preview Image with Tooltip Effect
- jQuery: Grey out background and preview image as popup
- jQuery: Animate and Transfer effect with Image
- jQuery: How to replace string, div content and image src?
- jQuery: A simple Slideshow
- Magento: Get width height of image using Varien_Image class
- jQuery: Set time interval between events with queue function
- Magento: Get height and width of Image
- Magento: Custom function to resize image proportionally
- phpThumb(): The best PHP thumbnail image generator
View Mukesh Chapagain's profile
