Javascript jQuery показывает элемент изображения только один раз в IE.ФФ работает

Question

Я хочу показать большое изображение, когда нажимаю на маленькую миниатюру.Простой скрипт стиля Lightbox.

Когда я нажимаю на прозрачную серую область наложения вокруг изображения, 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, к чему добавляется каждый раз, когда я показываю большое изображение.И отображение «старого» изображения get: нет;После 20 раз, когда я показываю большое изображение, у меня есть 40 элементов Overlay и Container (image).

Я не могу понять, как запустить функцию 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;
        }
    });
}

Извините за длинный код. И сам узнаю ответ ...