Plus d'un diaporama sur une page en utilisant jQuery

Question

Est-il possible de créer plusieurs diaporamas (chaque diaporama ayant un ensemble d'images différent, bien sûr) sur la même page Web en utilisant jQuery (ou un package similaire)? Si c'est le cas, comment?

Toutes les tentatives ont échoué car toutes les images étaient affichées dans les deux diaporamas, la numérotation était incorrecte ou d'autres interférences se produisaient.

Answer 1

Oui, c'est possible.

J'ai eu de bons résultats en utilisant le code Coulisse coda d'ici: http://www.ndoherty.biz/demos/coda-slider/2.0/

Le code ressemblerait à quelque chose comme ça, où un groupe spécial est l'un des éléments de votre curseur:

<div class="slider-wrap"> 
    <div id="slider1" class="csw"> 
    <div class="panelContainer">     
     <div class="panel" title="Panel 1"> 

Vous pouvez également les faire vous-même en utilisant CSS, JS et jQuery appropriés avec des plugins comme http://gsgd.co.uk/sandbox/jquery/easing/ pour aider à créer des animations lisses.

Answer 2

oui, j'ai utilisé le plugin Cycle à: http://malsup.com/jquery/cycle/

J'emboîtés chacun de mes img dans deux divs et deux divs pour envelopper les choses ...

<div id="before_window_wrapper"> 
    <div name="before_n_after_window"> 

    <div id="before_slide_wrapper"> 
     <div id="before_slide"> 
     <img src"my/image/directory/1.img"/> 
     </div> 
    <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
    </div> 

    </div> 
</div> 

<div id="before_slide_wrapper"> 
    <div id="before_slide"> 
    <img src"my/image/directory/3.img"/> 
    </div> 
    <div id="slide_comment"> 
    <h3>person comment for this img goes here</h3> 
    </div> 
</div> 

et :

<div id="after_window_wrapper"> 
    <div name="before_n_after_window"> 

     <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
      <img src"my/image/directory/2.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
     <img src"my/image/directory/4.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    </div> 
</div> 

les enfants de "before_n_after_window" sont les e divs qui sont vélo:

$("#before_n_after_window").each(function(index){ 
    $(this).cycle(); 
}); 

Les emballages coulissants (before_slide_wrapper et after_slide_wrapper) sont en cours de cycle() s '-fine de contrôle complet. Cependant, tout ce qui est niché à l'intérieur ne l'est pas, donc vous pouvez placer plus de frères et sœurs pour les diapositives (before_slide et after_slide) - d'où le div "#slide_comment". "Before_n_after_window" est seulement sous semi-contrôle de cycle(), et utilise votre code CSS qui n'est pas en conflit avec le sien. "#before_window_wrapper" et "#after_window_wrapper" sont sous votre contrôle total (css-sage).

Maintenant que vous avez « #before_n_after_window » et ses enfants, tout simplement itérer à travers eux et le nom et le point les commandes pour chaque paire:

var i = index; 
var current_slide = $(this); 

// hides the pause button 
$('#pause_button_'+i).hide(); 
//checks index for odd or even 
i = (i%=2) ? ((index+1)/2) : ((index/2)+1); 

$(current_slide).cycle({ 
    fx: 'fade', 
    pager: '#nav_' + i, 
    prev:  '#previous_button_' + i, 
    next:  '#next_button_' + i, 
}); 

// I want to only show the play or pause button at any given time 
$(current_slide).cycle('pause'); 
$('#play_button_'+i).click(function(){ 
    $(current_slide).cycle('resume', true); 
    $('#pause_button_'+i).show(); 
    $('#play_button_'+i).hide(); 
}); 
$('#pause_button_'+i).click(function() { 
    $(current_slide).cycle('pause'); 
    $('#pause_button_'+i).hide(); 
    $('#play_button_'+i).show(); 
}); 

Vous devez suivre la convention de nommage ci-dessus ou tout autre vous pouvez décider sur. les contrôles réels peuvent être placés n'importe où sauf dans les fenêtres - problèmes de bogue. Sur une note de côté, je mets ces paires en pause immédiatement après avoir été mises en cycle car je ne voulais pas que plusieurs diapositives soient affichées sur la page. Je voulais que l'utilisateur choisisse celui à vélo. En outre, je dois trouver un moyen d'éteindre tous les autres cycles qui peuvent être en cours d'exécution. Cependant:

if(better_solution){ 
    return please_post; 
}