Empiler plusieurs diaporamas en utilisant Jquery

Question

JQuery newbie ici! J'ai de la difficulté à empiler plus d'un diaporama avec chacun de ses contrôles individuels. Le diaporama fonctionne très bien. Cependant, lorsque j'ajoute un autre diaporama, je perds les commandes et le titre de celui-ci. lien: http://dl.dropbox.com/u/1466448/numbered/stack.html

Je lis d'autres articles sur l'utilisation d'un identifiant unique pour chaque diaporama, mais j'ai une expérience très limitée dans jquery pour comprendre cette approche. Toute aide serait grandement appréciée.

Merci! -Thai

Answer 1

Dans votre HTML, vous avez droit à deux ensembles de divs? Les deux ont id="slideshow" et un frère avec id="title". Essayez de prendre le second ensemble de divs et de les ré-identifier dans slideshow2 et title2. Cela devrait ressembler à ceci:

<div align="center"> 
<div id="demo"> 
    <div align="left" id="slideshow2" class="pics"> 
     <img src="images/nature/snow.jpg" alt="Snowy fied"/> 
     <img src="images/nature/city.jpg" alt="Furtistic City"/> 
     <img src="images/nature/sea.jpg" alt="By the sea"/> 
    </div> 
    <div align="left" id="title2"></div> 
</div> 
</div> 

Puis copiez et collez votre javascript pour eux, en changeant les références là. Votre deuxième copie devrait ressembler à ceci:

$(function() {    
    $('#slideshow2').after('<div id="nav2" class="nav">').cycle({   
    fx:  'fade',   
    speed: 'slow', 
    timeout: 0*1000, 
    pager: '#nav2', 
    before: onBefore });    
    function onBefore() {  $('#title2').html(this.alt); }});