У меня проблема с кодом, который я запрограммировал. Идея заключается в создании пользовательского "лайтбокса" с использованием jQuery. Когда я нажимаю на миниатюру, код просматривает div, который имеет атрибуты "data-first-img-url", "data-second-img-url" и "data-third-img-url" - эти атрибуты содержат URL-адреса, которые становятся фоновым изображением всплывающей галереи.
HOEVER, проблема, с которой я сталкиваюсь, заключается в том, что когда я закрываю всплывающее окно и нажимаю, чтобы снова открыть его, изображения теперь появляются дважды.
Вот мой jQuery:
$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');
$main_img_url = $(this).attr('data-first-img-url');
$second_img_url = $(this).attr('data-second-img-url');
$third_img_url = $(this).attr('data-third-img-url');
$('.main_image').css("background-image", "url('" + $main_img_url + "')");
$('.second_image').css("background-image", "url('" + $second_img_url + "')");
$('.third_image').css("background-image", "url('" + $third_img_url + "')");
});
$(".close_gallery").click(function() {
$('#overlay').fadeOut();
});
И JSfiddle (упрощенный) здесь: http://jsfiddle.net/9d9sz/3/
Вы можете видеть, что когда вы нажимаете на изображение, как только оно работает нормально, но затем закройте всплывающее окно и снова откройте его, и он появится дважды.
Попробуйте это, вы добавляете новое изображение каждый раз, когда вы его открываете, удалите их, прежде чем добавлять новый
$('.gallery').click(function() {
$('.main_image').remove();
Вы замираете, но каждый раз, когда вы добавляете html обратно на страницу.
Создайте div на странице и сделайте его style = "display: none;" то в ваших функциях щелчка все, что вам нужно сделать, это ссылка на div и исчезновение.
Это потому, что вы добавляете div дважды, не удаляя его при закрытии.
Пытаться:
$('#overlay').find('.main_image').remove().end().fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');
Но, вероятно, лучше, чем добавлять и удалять элементы DOM, все время будет иметь его там все время и скрывать/показывать, когда это необходимо.