Discussion :

[CinePhil]

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 ?

[SpaceFrog]

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

[CinePhil]

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

[SpaceFrog]

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

[CinePhil]

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.

[SpaceFrog]

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 :

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

id="image_1"

Code :

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

id="image_2"

etc ...
et le texte

Code :

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

id="legende_1"

Code :

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

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 :

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

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 :

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

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

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

Code :

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

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