FancyBox intégration de la galerie

J'ai une question concernant l'intégration de FancyBox.
Je voudrais créer une galerie de 10 photos, mais seulement d'une vignette.
Par exemple:
http://fancyapps.com/fancybox/demo/
La première démonstration montre quatre images : la forêt, la mer, le coucher du soleil et de la tour Effeil.
Puis-je inclure une seule vignette, par exemple, une miniature de la Tour Eiffel, qui à cliqué, pour afficher l'image de la Tour Eiffel dans la lightbox, mais aussi ceux de la forêt, de la mer et le coucher du soleil.
J'ai essayé beaucoup de choses mais rien ne fonctionne correctement.
Si vous avez des idées...
Merci Beaucoup.

PS:
J'utilise le Twitter Bootstrap-1.3 & FancyBox-2

InformationsquelleAutor Gregory COSTA | 2012-02-03
  1. 4

    Vous avez besoin d'un lien pour toutes les images dans votre galerie, indépendamment du fait qu'elles montrent d'une vignette ou pas si vous pouvez avoir cette html

    <a class="fancybox" rel="gallery" href="image01.jpg"><img src="thumbnail01.jpg" alt="" /></a>
<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>

    etc. ... de cette façon, une seule vignette est affichée et le reste de la liens ne sont pas visibles, mais fonctionnelle.

    Puis un script comme cela déclenche la galerie

    $("a.fancybox").fancybox();
    • Je vous remercie pour votre réponse.
    • Mais avec Twitter Bootstsrap, le <a> tag garder un "petit espace" dans les médias-de la grille, même si elles n'avez pas d'articles à afficher. Et il se casse la mise en page... j'ai essayé de changer le Bootstrap CSS mais "l'invisible de l'espace" semble impossible à enlever.
    InformationsquelleAutor JFK
  2. 2

    Vous pouvez simplement ajouter display:none pour les liens que vous ne voulez pas afficher.

    par exemple http://jsfiddle.net/MvvuE/

    • Oui j'ai essayé. Peut-être que j'ai fait une erreur, mais cela n'a pas résolu mon problème. Avec Twitter Bootstrap, le <a> tag garder un "petit espace" dans les médias-de la grille, même si elles n'avez pas d'articles à afficher. Malgré mon faible niveau en javascript, j'ai même essayé de créer une fonction pour cacher un id fancybox mais j'ai enfin eu une réponse de la fancybox équipe et apparemment j'ai essayé de faire trop compliqué.
    • <a href="1.jpg" ><img /></a> <div style="display:none;"> <a href="2.jpg" ><img /></a> <a href="3.jpg" ><img /></a> </div>
    • Qui est ok et vraiment simple à appliquer 🙂
    • De toute façon, merci pour votre réponse !
    InformationsquelleAutor ryanbraganza