Я создал сайт с несколькими div, которые загружаются с помощью jQuery. В одном из divs у меня есть пальцы с интерактивными изображениями, которые показывают изображения в лайтбокс со сценарием Lightbox2.Загрузка Lightbox2 из div
Проблема заключается в том, что когда я нажимаю ссылку, которая загружает большие пальцы изображения в div во второй раз, появляется пустой лайтбокс. Чтобы сделать ясно: div с большим пальцем изображения уже загружен во втором клике.
Я думал, что ошибка произошла из-за того, что я уже загрузил изображения в div и что вторая загрузка каким-то образом вызвала сценарий lightbox2. Но я очищаю этот div с каждым щелчком, так что это не должно быть возможным.
Как я могу остановить это?
Код:
loader.js (скрипт для отображения содержимого в дивы после щелчка, #rightinfo = правый DIV с изображениями)
$(document).on('click', '#main a[name="inner"]', function() {
\t \t var page = $(this).attr('href');
\t \t var hash = $(this).attr('href').replace(/^.*?(#|$)/,'');
\t \t image = new Image();
\t image.src = 'timelines/' + hash + '.jpg';
\t \t // alert(hash);
\t \t image.onload = function() {
\t \t $('#timeline').empty().append(image);
\t \t \t $('#rightinfo').empty();
\t \t };
\t \t image.onerror = function() {
\t \t $('#timeline').empty().html('Geen tijdlijn beschikbaar.');
\t \t \t $('#rightinfo').empty();
\t \t }
\t \t $('#timeline').empty().html('Loading...');
\t \t $('#rightinfo').empty().html('Loading...');
\t \t $('#main').load('content/' + page);
\t \t $('#rightinfo').load('info/' + hash + '.html');
\t \t // $('.lijn').hide();
\t \t // $(hash).show(); \t \t
\t \t return false;
\t });
Код HTML-страницы Добавить в лайтбокс и фото:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="lightbox/css/lightbox.css" rel="stylesheet">
<script src="lightbox/js/lightbox.js"></script>
</head>
<body>
<i>Nieuw-Beijerland in 1650</i><p>
<a href="images/Nieuw-BeijerlandDorp1650.jpg" data-lightbox="NBDorp1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandDorp1650.jpg&q=100&h=150"></a><p>
<a href="images/Nieuw-BeijerlandKerk1650.jpg" data-lightbox="NBKerk1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandKerk1650.jpg&q=100&h=150"></a><p>
</body>
</html>
Я проверил и timthumb.php используется для создания превью не изменить поведение осветителя.