JavaScript jQuery только показывает Элемент изображения однажды в IE. Работы FF
Я хочу показать большое Изображение, когда я нажимаю маленькую миниатюру. Простой Лайтбокс разрабатывает сценарий.
Когда я нажимаю серую прозрачную область наложения вокруг изображения, 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 I, видит в FireBug, что становление добавленным к в течение каждого раза я показываю большое изображение. И "старый" дисплей get's изображения:ничего; после того, как 20 раз я показываю большое изображение, у меня есть 40 элементов Наложения и Контейнера (изображение).
Я не могу выяснить, как повторно выполнить функцию lightBobo при необходимости. Таким образом, это работает и в IE и в И следующие.
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;
}
});
}
Извините за длинный код. И сам нашел ответ...
Вероятно, вам следует добавить оверлей и контейнер только один раз при инициализации, а затем просто показать / скрыть / добавить контент, когда пользователь активирует модальное окно.
В противном случае вам нужно выполнить .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();
});
});