Question

thanks for your reading. I am trying to modify Jquery Nivo Zoom plugin to make it close previous clicked images.

You can see its current behavior here: http://nivozoom.dev7studios.com/

Now what the plugin does is open a large image when clicking on the thumbnail but keeping the previous clicked opened. As I said I’d like to modify it to close previous clicked images.

Looking into the code I think I should add something in this part of the code, here:

function doZoom(img, link, nivoZoomHover){
            var imgLarge = $('img.nivoLarge', link);
            if(link.hasClass('zoomed')){
                //Hide Overlay
                if(settings.overlay) $('#nivoOverlay').fadeOut(settings.speed/2);
                //Hide Caption
                if($('.nivoCaption', link).length > 0){
                    $('.nivoCaption', link).fadeOut(settings.speed/2);
                }
                //Hide Image
                imgLarge.fadeOut(settings.speed/2, function(){
                    img.animate({ opacity:1 }, settings.speed/2);
                });
                link.removeClass('zoomed');
            } else {
                //Show Overlay
                if(settings.overlay) $('#nivoOverlay').fadeIn(settings.speed/2);
                //Hide ZoomHover
                nivoZoomHover.css('opacity','0');
                //Show Image
                img.animate({ opacity:0 }, settings.speed/2, function(){
                    imgLarge.fadeIn(settings.speed/2, function(){
                        showCaption(img, imgLarge, link);
                    });
                });
                link.addClass('zoomed');
            }
        }

but I tried some stuff and didn’t work for now. Anyone can help ?

Thank you very much.

Answer 1

Around line #67 – just after ‘link.bind(‘click’, function(){‘

paste the following:

var notThis = $(".nivoCaption").not($(".nivoCaption", link));
notThis.closest("a").removeClass("zoomed");
notThis.removeClass("nivo-processed");
notThis.css("display","none");
notThis.parent().children("img").not($("img.nivoLarge")).css("opacity","1");
$(".nivoLarge").not($("img.nivoLarge", link)).fadeOut(settings.speed/2);

There’s probably a better way, but it seems to work.

What’s going to nag at you next is the IE9 z-index issue of zoomed images appearing behind previously zoomed thumbnails. Go to line #185 or so and find the ‘IE7 Fix’ and comment that 3 line function out. That “Fix” breaks z-index in IE9. (but you’re going to resurrect the issue with IE7, oh well).