Chargement Lightbox2 à partir de div

J'ai créé un site Web avec plusieurs divs chargés avec jQuery. Dans l'une des divs, j'ai des vignettes d'image cliquables qui montrent les images dans une lightbox avec le script Lightbox2. Le problème est que lorsque je clique une seconde fois sur le lien qui charge les images dans le div, une lightbox vide apparaît. Pour clarifier: le div avec les images est déjà chargé au second clic.Chargement Lightbox2 à partir de div

Je pensais que l'erreur est survenue parce que j'ai déjà chargé les images dans la div et que le second chargement a déclenché le script lightbox2. Mais je nettoie ce div avec chaque clic, donc cela ne devrait pas être possible.

Comment puis-je empêcher cela de se produire?

code:

loader.js (script pour afficher le contenu en divs après clic, #rightinfo = right div avec images)

$(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 });

Code de la page html chargé dans le rightinfo-div pour afficher la visionneuse et les images:

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

J'ai vérifié et le timthumb.php utilisé pour faire les pouces n'a pas changé le comportement de la visionneuse.

Source

2015-10-02 Sander Vermeulen

Je l'ai eu!

solution a consisté à déplacer le script lightbox.js de la page html qui a été chargé dans le rightinfo div avec jQuery, directement dans la div sur la page index.php comme ceci:

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

J'ai également supprimé toutes les balises html de la page html qui est chargée dans la div rightinfo, car il ne semblait pas important de savoir si c'était là ou non. Le htmlpage dans le rightinfo div ressemble maintenant à ceci:

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

Source

2015-10-02 12:33:52

Chargement Lightbox2 à partir de div

Répondre

Questions connexes