Question

当我按下小缩略图时，我想要显示一个大图像。一个简单的灯箱样式脚本。

当我按下图像周围的灰色透明覆盖区域时，CSS和图像将从视图中删除。这段代码被删除了。也许错过了所需的东西......

$(document).ready(function() {    
    $(".lightBobo").click(function(e) {
        e.preventDefault();  // prevent to open link in new window
        $(this).lightBobo();
    });
});

jQuery.fn.lightBobo = function(e) {
    if (e != undefined)
        e.preventDefault();

    return this.each(function() {
        var img = new Image();

        $(img).load(function() {
            imgW = img.width;
            imgH = img.height;

            var overlay = $("<div />");
            var container = $("<div />");
            // Lots of css styling for <div> overlay and container image...

            container.append(img); //add image to div
            $("body").append(overlay); //add overlay to body
            $("body").append(container); //add div to body
            overlay.fadeIn("fast", function() {
                container.show();
            });
            $(overlay).click(function() {
                removeDivs();
            });
            function removeDivs() {
                container.hide();
                overlay.fadeOut("fast");
                img = null;
                container = null;
                overlay = null;
                openImgSrc = "";
            }
        });
    });
}

问题是IE（7）第二次显示图像时没有显示图像。我必须重新加载页面才能再次显示图像。它可以在FF中工作。

当我使用FireFox时，我可以在FireBug中看到，每次显示大图时都会附加。并且“旧”图像得到显示：无;经过20次展示大图，我有40个叠加和容器（图像）元素。

我无法弄清楚如何在需要时重新运行lightBobo功能。因此它适用于IE和FF。

Answer 1

初始化时，您可能只需将叠加层和容器附加一次，然后在用户激活模态时显示/隐藏/追加内容。

否则你需要在卸载时对每个元素.remove()做= null是不够的，除非你想在DOM中有很多欺骗。

我会做这样的事情：

(function($) {

var lightBobo = {
    init: function() {
        var self = this;
        this.overlay = $('<div>').click(this.hide); // bind the click event just once
        this.container = $('<div>');
        // apply id's or styling
        $(document.body).append(overlay,container);
    }
    hide: function(e) {
        lightBobo.container.hide();
        lightBobo.overlay.fadeOut('fast');
    },
    show: function() {
        var img = new Image();
        $(img).load(function() {
            imgW = img.width;
            imgH = img.height;
            lightBobo.container.append(img); //add image to div
            lightBobo.overlay.fadeIn("fast", function() {
                lightBobo.container.show();
            });
        });
    }
};

$(function() {
    lightBobo.init(); // init the lightbox once
});

$.fn.lightBobo = function() {
    return this.each(function() {
        lightBoo.show.apply(this);
    });
}

})(jQuery);


// bind the anchors here:

$(document).ready(function() {
    $(".lightBobo").click(function(e) {
        e.preventDefault();  // prevent to open link in new window
        $(this).lightBobo();
    });
});

Answer 2

我找到了解决方案。我改变了很多代码。特别是$(img).load(function() { ... }我遇到了一些问题。我真的不知道为什么load（）函数不想多次启动事件。所以我从该函数中删除了大部分代码。

请记住，$(img).load(function() { ... }用于在找到图像的宽度和高度之前加载图像。否则为0。

$(document).ready(function() {

    $(".lightBobo").click(function(e) {
        if (e != undefined)
            e.preventDefault();
        $(this).lightBobo();
    });
});

jQuery.fn.lightBobo = function(e) {
    return this.each(function() {

        var myClickedObj = $(this);
        //check if we have a anchor or image tag
        var src = "";
        if (this.tagName.toLowerCase() == "a")
            src = this.href.toLowerCase();
        else if (this.tagName.toLowerCase() == "img")
            src = this.src.toLowerCase();
        else
            return;

        var winW = $(window).width();
        var winH = $(window).height();
        var docH = $(document).height();
        if (docH < winH)
            docH = winH;

        //the semitransparant overlay over the whole page
        var overlay = $("<div />")
            .attr("class", "bobOverlay") //used as id for closing all overlays
            .css("background", "#000")
            .css("opacity", "0.8")
            .css("display", "none")
            .click(function() { hideAll(); })

        $("body").append(overlay); //add overlay to body

        var loadLeft = (winW / 2) - (100 / 2);
        var loadTop = (winH / 2) - (20 / 2) + $(document).scrollTop();

        overlay.fadeIn("fast");

        //an element to hold our picture
        var container = $("<div />");
        container.attr("class", "bobOverlay");
        container.hide();

        var img = new Image();
        $(img).load(function() {
           var imgW = img.width;
           var imgH = img.height;

           container.append(this); //add the picture to the container
       $("body").append(container); // add container to the body
           container.fadeIn("fast"); //show container
       })
   .attr("src", src); //add the src to the image

        function hideAll() {
            $(".bobOverlay").fadeOut("fast");
        }
        function IsImage(filename) {
            var ext = filename.split('.').pop().toLowerCase();
            var allow = new Array("gif", "png", "jpg", "jpeg", "bmp");
            if (jQuery.inArray(ext, allow) == -1) {
                return false;
            }
            return true;
        }
    });
}

很抱歉长代码。并自己找出答案......

Javascript jQuery只在IE中显示一次Image元素。 FF工作

2 个答案: