Galerie Fancybox sans a href?
Je veux faire de la galerie fancybox avec img sans passer par un lien (a href)? Comment je peux faire?
HTML:
<div id="foo2">
<img src="/images/banners/001.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/002.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/003.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/004.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/005.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/006.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/007.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/008.jpg" rel="downslider" alt="" width="80" height="80" />
.....
</div>
JS (maintenant, il fonctionne avec des images simples, sans galerie d'effet):
$("#foo2 img").click(function(e) {
var url = $(this).attr('src');
var rel = $(this).attr('rel');
var content = '<img src="' + url + '" pun">+ rel + '" />';
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'content' : content
});
});
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas avoir une galerie à l'aide de la méthode manuelle
.click()
sauf si vous mettez tous les éléments de la galerie à l'intérieur de la fancybox script lui-même comme:Cependant, pour le faire fonctionner comme vous le souhaitez et de simuler un régulier de la galerie fancybox sans utiliser de liens (
<a>
les balises dehref
attributs de ), vous devez créer votre propre fonction avec vos propres méthodes de navigation.Sans changer votre
HTML
, essayez cetteJS
:Qui crée une fancybox la galerie de l'
<img>
tags, avec un beau vélo effet. Aussi, avec un peu deCSS
nous pouvons avoir les contrôles de navigation à l'aide de la fancybox icônes de flèche. Voir un exemple ici.Depuis le contrôle de la navigation est totalement manuel, vous n'avez pas réellement besoin de la
rel
attribut sur la<img>
tag.Veuillez noter que le code ci-dessus est pour Fancybox v1.3.x (je suppose que vous utilisez v1.3.x parce que les options de l'API).
Cela a fonctionné pour moi:
alors:
et puis avec une personnalisation supplémentaire
le moyen le plus facile, vous pouvez ajouter de l'ancre, une balise dans chaque img à partir de l'id='foo2'.
Et puis:
Vous devez faire la fancybox appel sur les images:
devrait fonctionner, mais je n'ai pas testé...