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="images/thumbnails/hills-thumb.jpg" alt="images/hills.jpg" rel="Hills Image" />
<img src="images/thumbnails/lilies-thumb.jpg" alt="images/lilies.jpg" rel="Lilies Image" />
<img src="images/thumbnails/sunset-thumb.jpg" alt="images/sunset.jpg" rel="Sunset Image" />
<img src="images/thumbnails/winter-thumb.jpg" alt="images/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>Image Preview With Zoom Effect</title>
<script type="text/javascript" src="js/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="images/thumbnails/hills-thumb.jpg" alt="images/hills.jpg" rel="Hills Image" />
<img src="images/thumbnails/lilies-thumb.jpg" alt="images/lilies.jpg" rel="Lilies Image" />
<img src="images/thumbnails/sunset-thumb.jpg" alt="images/sunset.jpg" rel="Sunset Image" />
<img src="images/thumbnails/winter-thumb.jpg" alt="images/winter.jpg" rel="Winter Image" />
<p id="large"></p>
</div>
</body>
</html>
Thanks.