lightbox dans image chargé en AJAX
Bonjour,
Je tente de faire fonctionner un plugin lightbox sur une image chargée en AJAX...
J'utilise le plugin lightbox de Leandro Vieira :
http://leandrovieira.com/projects/jquery/lightbox/
Mais je ne suis pas fixé sur ce choix... C'est juste une habitude d'utilisation dans mes projets car je le trouve léger et simple.
Je charge donc JQuery (1.8.2), puis le plugin lightbox. J'ai testé sur une image de la page et tout fonctionne bien, donc tout est bien chargé.
Ensuite dans ma page j'ai un :
Code:
<div id="detail-ref"></div>
dans lequel, après avoir cliqué sur lien, je charge en AJAX une image. Voici le code chargé :
Code:
1 2 3 4
|
<div>
<a href="./img/test-large.jpg" title="test" class="lightbox"><img src="./img/test-mini.jpg" alt="image test" /></a>
</div> |
Là encore pas de soucis, mon code récupéré en AJAX s'affiche correctement dans la div.
Mais comme l'élément n'existe pas au moment du chargement de la page et donc de lightbox, la lightbox ne fonctionne pas.
Je pensais régler le problème en chargeant lightbox dynamiquement à chaque clic sur le lien. Voici mon idée sous forme de code :
Code:
1 2 3 4 5 6 7 8
|
<script type="text/javascript">
$(document).ready(function(){
$('#detail-ref').on("click", ".lightbox", function() {
$(this).lightbox();
});
});
</script> |
Mais ça n'a pas l'air aussi simple... en tout cas ça ne fonctionne pas comme ça. Quelque chose m'échappe mais je ne vois pas quoi...