zoom image on mouse over
$('.classname').mouseover(function(){ var image = $(this).find('img').attr('src'); zoomImage(this,image,"frame"); }); function zoomImage(el, image, type, text) { var zoomDiv = document.createElement("div"); $('.fmb-zoom-div').remove(); //remove it if already there. $("body").append(zoomDiv); $(zoomDiv).addClass("fmb-zoom-div"); var position = $(el).offset(); var top = position.top - 380 + 2; var left = position.left; var htmlText = ""; var leftOffset = 0; if (window.scrollY > top) { top = top + 180 + $(el).height() - 2; left = left + $(el).width() +10; leftOffset = 310 } if ($(window.document).width() < (left + 380 + 2)) { left = left - $(el).width() - 10 - leftOffset; } htmlText = "<span style='display:block;width:280px;height:280px;background-image: url(\"" + image + "\")' ></span>";