Discussion :

[manu_71]

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...

[Walkn]

Hello,

Je ne suis pas sur mais, ne devrais tu pas faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type="text/javascript">
   $(document).ready(function(){
        $('#gallery a').lightBox();
   });
</script>

Avec quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="gallery"><a href="./img/test-large.jpg" title="test" class="lightbox"><img src="./img/test-mini.jpg" alt="image test" /></a></div>

[manu_71]

?? Soit je n'ai pas compris où tu voulais en venir, soit tu n'as pas compris mon problème
Ce que tu me proposes là, c'est une utilisation classique de lightbox() qui n'a pas de rapport avec mon problème d'ajax, non ? Mais pour l'utilisation classique de lightbox, comme je le précise dans mon message, je n'ai aucun problème, tout fonctionne bien. A ce propos, je confirme également que lightbox n'a nullement besoin d'une majuscule à la lettre B.

Mon soucis n'a rien à voir avec l'utilisation classique de lightbox mais avec son utilisation dans un contenu chargé en AJAX. Ce contenu n'est pas reconnu par lightbox car absent de la page au moment du chargement. D'où mon idée d'utiliser .on() ... sauf que ça n'a pas l'air aussi simple que je le croyais...

EDIT : Mea maxima culpa ! lightBox a bien besoin de sa majuscule. Mais ça ne règle pas mon problème qui reste entier...

[Walkn]

Je pense que je n'ai pas du bien comprendre ta problématique.

Que charges-tu en Ajax ? Dans ton exemple, je ne vois aucun chargement en Ajax.

Concernant lightbox de Leandro Vieira que tu utilises, dans le source du son .js il est mentionné avec un "B" majuscule. De même, dans la rubrique "How to use" de son site, il l'indique comme tel.

Concernant Ajax peut-être que ceci pourrait aider :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$.ajax({
  url: 'url de ton code à charger',
  success: function(data) {
    $('#detail-ref').html(data);
    alert('Load was performed.');
 
    //Ici tu mets 
    $('#gallery a').lightBox();
  }
});

[manu_71]

Yep, en effet, j'ai édité mon message précédent. Tu as parfaitement raison, lightBox nécessite un B majuscule Mais en fait, la majuscule a été oublié ici seulement, je l'avais bien dans mon code (c'est pour ça qu'au départ, sûr de moi je disais qu'il n'y avait pas de majuscule... mais après vérif, il y a bien majuscule dans mon code )

Je n'ai pas mis le code du chargement Ajax pour éviter de faire un message trop à rallonge (souvent pas lu). Je l'ai donc simplement expliqué dans mon message initial en donnat le div dans lequel se charge ma requête AJAX et le HTML (correctement) chargé dans ce DIV.

Ceci dit, je n'avais pas du tout pensé à mettre le chargement de la lightBox directement dans l'AJAX ! En effet cette solution me paraît évidente maintenant que je la vois ! Je vais essayer ça tout de suite. Je ne vois pas pourquoi ça ne fonctionnerait pas...

EDIT : En effet, aucun soucis de cette manière

[Walkn]

EDIT : En effet, aucun soucis de cette manière

Je ravis de voir que ça fonctionne Ravis d'avoir pu t'aider