2010-04-20 8 views
2

J'utilise le cycle jQuery dans plusieurs galeries avec la navigation #next #prev et une sortie de compteur d'image. Maintenant, j'essaie de connecter toutes ces galeries ensemble. Si l'utilisateur atteint la dernière diapositive de la galerie A (galleryA.html), l'ancre #next doit pointer vers la galerie B (galleryB.html)/l'ancre #prev doit pointer vers la galerie C (galleryC.html).Cycle jQuery - #next #prev, goto nextGallery après la dernière diapositive de currentGallery

Comment puis-je combiner mes 2 fonctions pour faire cela?

 
// slideshow fx 
$(function() { 
     $('#slideshow').cycle({ 
     fx:  'fade', 
     speed: 350,   
     prev: '#prev', 
     next: '#next', 
     timeout: 0, 
     after:  onAfter 
    }); 
}); 
//image counter output 
function onAfter(curr,next,opts) { 
    var caption = 
     (opts.currSlide + 1) + opts.slideCount; 
     $('#counter').html(caption); 
} 

html:

<div id="slideshow-container"> 

<div class="slideshow-nav"><a id="prev" href=""></a></div> 
<div class="slideshow-nav"><a id="next" href=""></a></div> 

<div id="slideshow" class="pics"> 
    <img src="galleryA/01.jpg" /> 
    <img src="galleryA/02.jpg" /> 
    <img src="galleryA/03.jpg" /> 
    <img src="galleryA/04.jpg" /> 
    <img src="galleryA/05.jpg" /> 
    <img src="galleryA/06.jpg" /> 
</div> 
</div> 

Répondre

1

Pas trop familier avec le plug-in du cycle, mais vous pouvez mettre quelque chose comme ça dans function onAfter:

if(opts.currSlide == opts.slideCount) { 
    $("#next").attr("href","galleryB.html"); 
} 

ou vous pouvez essayer

if(opts.currSlide == opts.slideCount) { 
$("#next").click(function() { document.location = "galleryB.html"; }); 
} 

Untes ted, quelque chose dans ce sens?

Fondamentalement, il attache uniquement le comportement de redirection sur #next après la dernière diapositive a été montré .. Il pourrait y avoir une option onFinish ou quelque chose, avez-vous vérifié les docs?

+0

Merci pour les conseils. Je vais essayer toutes les possibilités dans ce sens. jQuery Cycle dispose d'une option de fin: end: null, // rappel invoqué lorsque le diaporama se termine (utiliser avec les options autostop ou nowrap): fonction (options) Je pense que je suis en difficulté parce que j'essaie de faire pivoter avec image groupes et galeries, donc les ancres #prev et #next font 2 choses, tournent dans un groupe d'images et quand arrive la fin (de chaque côté!) iront à la galerie suivante ou précédente. – FHP

0

Vous pouvez regarder ici:

http://helpdesk.toitl.com/?p=cycle_plugin

Il est pas si facile d'intégrer 2 cycles synchronisés dans la même page ... Dans cet exemple il n'y a pas rechargement de la page avec location = ... mais les 2 galeries sont gérées en utilisant les différentes commandes du plugin cycle.

Cordialement, Dominique VINCENT

+0

Saint ...! Un grand merci pour vos efforts et votre temps. Il me faudra quelques jours pour tout comprendre: -O J'ai vraiment besoin de tes compétences JS ... – FHP

Questions connexes