0

感谢您的阅读。我正在尝试修改 Jquery Nivo Zoom 插件以使其关闭以前单击的图像。

您可以在此处查看其当前行为：http: //nivozoom.dev7studios.com/

现在插件所做的是在单击缩略图时打开一个大图像，但保持先前单击的打开状态。正如我所说，我想修改它以关闭以前单击的图像。

查看代码我认为我应该在这部分代码中添加一些内容，这里：

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');
            }
        }

但我尝试了一些东西，但现在没有用。任何人都可以帮忙吗？

非常感谢。

4

1 回答 1

0

大约第 67 行 - 就在 'link.bind('click', function(){' 之后

粘贴以下内容：

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);

可能有更好的方法，但它似乎有效。

接下来要困扰你的是 IE9 z-index 问题，即出现在以前缩放的缩略图后面的缩放图像。转到第 185 行左右，找到“IE7 Fix”并注释掉 3 行功能。那个“修复”破坏了 IE9 中的 z-index。（但你会用 IE7 重新解决这个问题，哦，好吧）。

于 2012-06-17T03:58:51.877 回答