how to remove zoom icon from jQuery FancyZoom plugin

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.

Leave a Reply

%d bloggers like this: