Jquery FancyZoom is a pretty nice plugin for zooming images, but I needed to remove the blue icon from the view, while the image is hovered by a pointer.
I added new default option:
//Default Options $.fn.fancyzoom.defaultsOptions = { overlayColor: '#000', overlay: 0.6, imagezindex:100, showoverlay:true, Speed:400, shadow:true, shadowOpts:{ color: "#000", offset: 4, opacity: 0.2 }, imgDir:'ressources/', imgResizeScript:null, autoresize:true, zoomIcon: true //new default option };
and customized a little the entire code:
if(imgTarget.is('img')){ var oImgHover = $("").css({display:'none'}); if (opts.zoomIcon) oImgHover = $("
").css({position:'absolute',top:0,left:0}); imgTarget.hover(function(){ if(imgTarget.css('opacity') != 0){ oImgHover.appendTo(imgTarget.parent()).hide(); var pos = imgTarget.position(); var marginLeft = parseInt(imgTarget.css('margin-left').replace(/px/,'')); var marginTop = parseInt(imgTarget.css('margin-top').replace(/px/,'')); marginTop = (marginTop)?marginTop:0; marginLeft = (marginLeft)?marginLeft:0; if (opts.zoomIcon) oImgHover.css({left:(pos.left+marginLeft-12),top:(pos.top+marginTop-12)}).show(); if($.fn.ifixpng) {oImgHover.ifixpng(opts.imgDir+'blank.gif');} } },function(){ oImgHover.remove(); }); }
This makes the zoom icon invisible, but still displaying on the page.