2015-10-02 2 views
1

Я создал сайт с несколькими 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 используется для создания превью не изменить поведение осветителя.

ответ

0

Я понял!

Решение было переместить lightbox.js скрипт из HTML-страницы, которая была загружена в сНу rightinfo с JQuery, прямо в DIV на странице index.php, как это:

<div id="rightinfo"> 
 
<script src="lightbox/js/lightbox.js"></script> 
 
</div>

Я также удалил все теги html с html-страницы, которая загружается в div справа, поскольку, похоже, это было не так. HTMLPage в rightinfo DIV теперь выглядит следующим образом:

<link href="lightbox/css/lightbox.css" rel="stylesheet"> 
 

 

 
<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>

Смежные вопросы