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 : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="detail-ref"></div>
dans lequel, après avoir cliqué sur lien, je charge en AJAX une image. Voici le code chargé :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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...