Aide avec la méthode .live() de jQuery

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:

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

Answer 1

Essayez et voir si cela fonctionne, cela est tout simplement peu de boîte fantaisie cependant, le reste de votre code semble bien

$("#lightboxlink").live('click', function(){ 

    $.fancybox({ 
     'autoDimensions' : false, 
     'width'   : 'auto', 
     'height'   : 'auto', 
     'href'   : $(this).attr('href') 
    }); 
    return false; 
});