Problème Dynamic Links et jQuery Lightbox: Chargement de l'image dans la visionneuse ... complètement perplexe!

Question

J'ai une fonction qui crée dynamiquement des liens pour une galerie de photos. La fonction produit également une image plus grande en tant qu'image d'arrière-plan d'un div lorsque vous cliquez sur une vignette. Ce que je veux faire est d'avoir un troisième événement, où si l'utilisateur clique sur l'image agrandie dans le div, le jQuery Fancybox charge une version encore plus grande de l'image affichée dans la div. Le problème est que le lien pour la balise d'ancrage que j'utilise est créé dynamiquement, et je sais que Fancybox analyse le HTML quand le DOM est prêt ... malheureusement ma fonction change le DOM en ajoutant la balise d'ancrage pour l'image en taille réelle . L'aide dont j'ai besoin utilise les options de Fancybox pour spécifier l'attribut href pour le plugin. Je suis désolé que c'était si long ... voici le code.

jQuery:

function gallery(picid, picnum){ 
var ext = 'jpg'; 
var fullSize = 'imgs/'+picid+'_full.'+ext; 
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat'); 
$('#photolarge a').attr(
    { href: fullSize 
     //rel: 'lightbox', 
    } 
    ); 

$("#lightboxlink").click(function(){ 
    $('#lightboxlink').fancybox({ 
     'autoDimensions' : false, 
     'width' : 'auto', 
     'height' : 'auto', 
     'href' : fullSize 
     }); 


    }); 




return false; 

}

HTML Snippet

<div id="photolarge"> 
    <a id="lightboxlink" href="#"></a> 
</div> 
     <div id="phototable"> 
      <ul id="photorow1"> 
       <li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li> 
      </ul> 
     </div> 

CSS ultérieure:

#photolarge { 
width: 590px; 
height: 400px; 
margin-left: 7px; 
border: 2px solid; 
background: none;} 

#phototable { 
width: 590px; 
height: 300px; 
border: 2px solid; 
margin: 10px 0 0 7px;} 

#phototable img { 
cursor: pointer;} 

#phototable ul { 
list-style: none; 
display: inline;} 

#phototable li { 
padding-left: 10px;} 

#lightboxlink { 
display: block; 
height: 100%; 
width: 100%;} 

Toute aide serait grandement appréciée !!!

Answer 1

Vous pouvez utiliser .live() pour le gestionnaire d'événements, et .triggerHandler() ouvrir immédiatement la lightbox, comme ceci:

$("#lightboxlink").live('click', function(e){ 
    $(this).filter(':not(.fb)').fancybox({ 
     'autoDimensions' : false, 
     'width' : 'auto', 
     'height' : 'auto', 
     'href' : fullSize 
    }).addClass('fb'); 
    $(this).triggerHandler('click'); 
    e.preventDefault(); //prevent opening in new window 
}); 

Cela va .fancybox() sur le lien, mais seulement si nous avons pas déjà terme, il , que nous suivons avec un ajout de classe .fb. Que ce soit une liaison nouvelle ou nouvelle, nous devons déclencher le gestionnaire click, qui est ce que fancybox écoute pour ouvrir.