Attacher un HREF et une classe à un lien img généré par le script PhotoSlider?

Question

J'utilise le très beau script PhotoSlider de http://opiefoto.com/articles/photoslider pour créer un diaporama d'images pour l'un de mes clients.

Ce script remplace une solution Javascript précédente codée à la main qui permettait de cliquer sur la grande image, ce qui donnait lieu à une fenêtre modale lightbox montrant la version en taille réelle de l'image cliquée.

Bien sûr, le client insiste sur le fait que cette fonctionnalité restent intactes, mais le code HTML pour la grande image est générée sur la volée par le script PhotoSlider lui-même. Cela signifie que je vais devoir modifier légèrement le script pour attacher une classe ("lightbox") et un href (ou juste un clic, selon ce qui est le plus logique), mais je ne suis pas sûr de la meilleure façon de accomplir ceci. Je pense que l'événement et la classe devront être attachés chaque fois que l'on cliquera sur une vignette, mais si ce n'est pas la meilleure façon de le faire, tout conseil sera apprécié.

Le script est mis en œuvre dans ma page comme on peut le voir here, sans clic ou classe. J'apprécierais vraiment toute aide que stackoverflowites peut offrir.

Merci d'avance!

Answer 1

Jetez un oeil à la méthode jquery live(), qui vous permet d'attacher un événement à un sélecteur qui existe maintenant ou à l'avenir. En effet, vous pouvez faire quelque chose comme (basé sur l'exemple sur le site photoslider):

$(document).ready(function() { 
    $('.photoslider_main img').live('click', function() { 
    $(this).showLightbox(); 
    }); 
}); 

Answer 2

Après la vignette est cliqué, et la nouvelle image est affichée, vous pouvez joindre un événement click à la nouvelle image à l'aide de jQuery bind. Si vous trouvez que vous devez l'enlever plus tard, vous pouvez utiliser unbind.

Answer 3

Attendez que le script pour terminer générer son code HTML puis le modifier à votre goût. La modification de chaque clic n'est pas nécessaire car PhotoSlider génère son code HTML une seule fois.

Answer 4

Voici le code complet qui se traduit par la variable « src » étant undefined - ne sais pas pourquoi.

<div class="photoslider" id="default"></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    //change the 'baseURL' to reflect the host and or path to your images 
    FOTO.Slider.baseURL = ''; 

    //set images by filling our bucket directly 
    FOTO.Slider.bucket = { 
     'default': { 
      <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>, 
      1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>, 
      2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>, 
      3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>, 
      4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %> 
     } 
    }; 
    FOTO.Slider.reload('default'); 
    FOTO.Slider.preloadImages('default'); 
    FOTO.Slider.enableSlideshow('default'); 

    //or set our images by the bucket importer 
    //var ids = new Array(0,1,2,3); 
    //FOTO.Slider.importBucketFromIds('default',ids); 


    console.log($('.photoslider_main img')); 
    var src = $(".photoslider_main img").attr("src"); 
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox')); 

    $('a.lightbox').lightBox(); 

// $('.photoslider_main img').live('click', function() { 
// $(this).showLightbox(); 
// }); 
}); 



</script>