Jquery image hover zoomer

Thursday, July 19, 2012

print this page
send email

Here is the simple jquery zoomer without even keeping an extra copy of image using simple css and jquery(you can use bigger mage too).
















Usage:
Html:
<div class="bui_img" id="b0"><img alt="" src="image.jpg"></div>
Jquery script:
Add this code to you page 


// starting the script on page load
$(document).ready(function(){
 xOffset = 10;
  yOffset = 30;
 $(".bui_img").mouseover(function(e){
  var imgsrc = $(this).children('img:first').attr('src');//variable to store image source
  
  $("body").append("<p id='preview'><img src='"+ imgsrc +"' alt='Image preview' /></p>");  
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast"); 
 });
 
 $(".bui_img").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });
 
 $(".bui_img").mouseleave(function(e){
  
  $("#preview").remove();
 });
});


Note: store image source to variable  imgsrc.

Css:

Happy coding  :)

2 comments: