jQuery Plugin Cycle: un pager pour contrôler plusieurs diapositives sur une page

J'ai un plugin de cycle mis en place sur une page (images) avec un pager pour contrôler la diapositive horizontale. Mon problème est qu'il y a une superposition transparente qui doit s'asseoir sur une partie des images pour un texte relatif à chaque image, mais qui aurait plutôt un effet de transition différent pour cela, donc il ne glisse pas à partir de la gauche. Suis-je en mesure de mettre en place des diaporamas, chacun avec 3 morceaux de contenu connexe, que je peux positionner correctement et les faire contrôler avec un pagineur?jQuery Plugin Cycle: un pager pour contrôler plusieurs diapositives sur une page

Mon script ressemble actuellement à ceci:

$(function() { 
$('.s4').before('<div id="nav" class="nav">').cycle({ 
    fx:  'scrollHorz', 
    speed: 'slow', 
    speedIn: 'slow', // speed of the 'in' transition 
    speedOut: 'slow', 
    timeout: 6000, 
    pager: '#nav' 
});

});

J'espère que cela a du sens,

Merci

Source

2010-06-09 Michael

cela fonctionnerait-il si vous appeliez le cycle deux fois, une fois pour chaque diaporama (si chaque diaporama avait son propre identifiant), mais lui donnait les deux id du même pager? – superUntitled

Je l'avais essayé mais il charge encore deux téléavertisseurs séparés. – Michael

Solution trouvée. Sous mon nez comme d'habitude! http://www.malsup.com/jquery/cycle/pager-double.html – Michael

@Awestruck - Vous pouvez utiliser le plug-in de métadonnées: http://jquery.malsup.com/cycle/meta2.html Spécifiez les options pour chaque conteneur de diaporama en incluant les options dans l'attribut de classe comme ceci: <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> I 'ai inclus un exemple piraté du site Web de plugin de cycle. La seule dépendance de fichier pour cet exemple est jquery.metadata.js.

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - One Pager, Two Slideshows - Different Options for each class</title> 
<style type="text/css"> 
body { padding: 30px } 
.slideshow { height: 232px; width: 232px; margin: 30px; float: left } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
#nav { text-align: center } 
#nav a { padding: 5px; margin: 5px; background: #eee; border: 1px solid #ccc; text-decoration: none } 
#nav a.activeSlide { background: #ddd; color: #800 } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').each(function(index) { 
     $(this).cycle({ 
      pager: '#nav', 
      pagerAnchorBuilder: function(i) { 
       if (index == 0) 
        // for first slideshow, return a new anchro 
        return '<a href="#">'+(i+1)+'</a>'; 
       // for 2nd slideshow, select the anchor created previously 
       return '#nav a:eq('+i+')'; 
      } 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="nav"></div> 
    <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    </div> 
    <div class="slideshow { fx: 'turnDown' }"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html>

Source

2011-06-10 22:09:20

jQuery Plugin Cycle: un pager pour contrôler plusieurs diapositives sur une page

Répondre

Questions connexes