[Fancybox] Galerie d'images + contenu html propre à chaque image.

Bonjour,

En cherchant une solution à mon problème, je suis arrivé sur cette discussion que l'auteur résolu tout seul mais sans donner la solution, ce qui est bien dommage !

J'ai le même genre de besoin mais en PHP : à partir d'un mur de miniatures, quand on clique sur une des vignettes, ça doit ouvrir une fancybox avec la photo choisie + pas mal de contenu HTML en rapport avec la photo et je souhaite aussi qu'une fois la fancybox affichée, on puisse se balader d'image en image directement avec les flèches gauche et droite que fancybox utilise pour faire sa galerie d'images.

Jusque là, j'utilisais fancybox pour afficher en popup du contenu HTML généré en Ajax. Et je viens de découvrir récemment qu'en fait, fancybox inclut en standard une fonction de galerie d'images. Seulement, je ne vois pas comment associer le HTML propre à l'image quand on change d'image dans la fancybox.

Une piste à me donner ?

.data() te permettra d'associe par exemple un id a ton image ...

Merci pour la réponse.
.data est un paramètre de fancybox ?
Je peux y mettre un contenu HTML complexe ?

non .data() est une methode jquery, tu peux y mettre ce que tu veux, mais je recommanderais plutot d'y mettre juste un id ou un index qui fais référence à un div de ta page ou a un element d'array ou a un id d'enregistrement de table mysql ....

Pas sûr de comprendre comment utiliser ça mais je chercherai ce soir à la maison avec les autres messages que j'avais trouvés sur fancybox.

Je reviendrai demander des précisions si je n'y arrive pas.

le but est d'associer une image a du code html ...

soit tu as une methode rationnelle de nommage des zones texte associées
=> genre les images

Code:

---

id="image_1"

---

Code:

---

id="image_2"

---

etc ...
et le texte

Code:

---

id="legende_1"

---

Code:

---

id="legende_2"

---

etc ...

et tu recupères l'indice numérique de l'id de l'image pour afficher la zone de texte associée

Code:

---

texte_id=$(this).attr('id').match(/\d+$/)

---

ici $(this) faisiant référence à l'image

zone de texte =>$('#legende_"+texte_id)ou tu mets directement la référence au texte en data

Code:

---

<img id="image_i" data_legende="leg1" />

---

ztexte=$(this).data('legende') retournera leg1 qui correpsondait à l'id de la zone texte à affocher

Code:

---

$('#'+ztext).show()

---

J'y suis arrivé ! :ccool:

J'ai fini par comprendre que, dans les exemples donnés sur le site de fancybox et ailleurs, le href du lien donné par la miniature à afficher dans la fancybox n'est pas forcément un lien vers une image mais peut tout aussi bien être un lien vers un programme PHP avec paramètres qui va créer le contenu complexe de la fancybox.

Pour ceux que ça intéressent, j'ai ainsi un truc de ce genre...

Vue PHTML affichant les miniatures de photos :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<div id="mur_photos"> <div id="diaporama"> <table> <tr class="diaporama_tr"> <?php $rangee = 1; $i = 0; // Numéro de photo foreach($photos as $id => $donnees) { $i ++ ;   if($i / ($rangee * 4) > 1) { // Si $i est supérieur à un multiple de 4, on change de rangée $rangee ++; ?> </tr> <tr class="diaporama_tr"> <?php } // fin if($i / ($rangee * 4) > 1) ?> <td class="diaporama_td"> <div class="diapo_cadre_photo"> <a class="lien_photo" rel="groupe_photos" href="ajax/popup_photo_controller.php <?php echo '?idPhoto='.$id.'&idMembre='.$_SESSION['coords']['id'].'&langue='.$la_langue; ?>" > <img id="photo_<?php echo $id; ?>" class="vignette" src="images/profil/<?php echo $donnees['fichier']; ?>" /> </a> </div> // et encore du code avant de fermer le foreach

---

Dans le programme Javascript associé à la page :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function() { /** * Affichage des photos dans une Fancybox */ $("a.lien_photo").fancybox( { 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false, 'autoDimensions': true }); });

---

Le lien qui contient la vignette lance un programme php situé dans le répertoire ajax et qui construit le contenu complexe de la fancybox, c'est à dire l'image agrandie et à sa droite les commentaires associés.

Le seul petit problème qu'il me reste, c'est que la flèche de droite de la fancybox pour changer d'image est située dans la colonne de droite, dans les commentaires, au lieu de rester dans l'image. Mais j'imagine qu'avec un bout de CSS, je devrais y arriver.