[SantoriniPartecipante]

Ciao ragazzi

prima volta qui e molto acerbo con jQuery, quindi abbiate pietà 🙂
Ho scaricato questa semplice galery-slideshow sviluppata da Jon Raasch
> http://jonraasch.com/blog/a-simple-jquery-slideshow

E’ molto basica ma soprattutto fa quello che intendevo realizzare, uno slideshow semplicissimo in loop (senza controller e altro).

Il problema però è che sembra difficile avere due diversi slideshow funzionanti nella stessa pagina.

Quello che ho provato a fare io è stato duplicare sia il codice JS che quello CSS, in questo modo (nell’ordine: javscript, css, html):

<!-- SLIDESHOW 1 . start --><script type="text/javascript">// <![CDATA[
function slideSwitch() {     var $active = $('#slideshow1 IMG.active1'); 	if ( $active.length == 0 ) $active = $('#slideshow1 IMG:last'); 	var $next =  $active.next().length ? $active.next()         : $('#slideshow1 IMG:first');     $active.addClass('last-active');     $next.css({opacity: 0.0})         .addClass('active2')         .animate({opacity: 1.0}, 1000, function() {             $active.removeClass('active1 last-active1');         }); } $(function() {     setInterval( "slideSwitch()", 2000 ); });
// ]]></script><!-- SLIDESHOW 1 . end --> <!-- SLIDESHOW 2 . start --><script type="text/javascript">// <![CDATA[
function slideSwitch() {     var $active = $('#slideshow2 IMG.active2'); 	if ( $active.length == 0 ) $active = $('#slideshow2 IMG:last'); 	var $next =  $active.next().length ? $active.next()         : $('#slideshow2 IMG:first');     $active.addClass('last-active');     $next.css({opacity: 0.0})         .addClass('active2')         .animate({opacity: 1.0}, 1000, function() {             $active.removeClass('active2 last-active2');         }); } $(function() {     setInterval( "slideSwitch()", 2000 ); });
// ]]></script><!-- SLIDESHOW 1 . end -->

/*** SLIDESHOW 1 css **/

#slideshow1 {
	position:absolute;
	height:350px;
	left: 47px;
	width: 0px;
	top: 33px;
}

#slideshow1 IMG {
	position:absolute;
	top:-8px;
	left:112px;
	z-index:8;
	opacity:0.0;
}

#slideshow1 IMG.active1 {
    z-index:10;
    opacity:1.0;
}

#slideshow1 IMG.last-active1 {
    z-index:9;
}

/*** SLIDESHOW 2 css **/

#slideshow2 {
	position:absolute;
	height:350px;
	left: 47px;
	width: 0px;
	top: 33px;
}

#slideshow2 IMG {
	position:absolute;
	top:396px;
	left:123px;
	z-index:8;
	opacity:0.0;
}

#slideshow2 IMG.active2 {
    z-index:10;
    opacity:1.0;
}

#slideshow2 IMG.last-active2 {
    z-index:9;
}

 

[SantoriniPartecipante]

Dimenticavo la porzione html …

<div id="slideshow1"> 
	<img src="image1.jpg"  class="active1" />  
    <img src="image2.jpg"  />  
    <img src="image3.jpg"  />  
    <img src="image4.jpg"  />
    </div>
    
<div id="slideshow2"> 
	<img src="01.jpg"  class="active2" />  
    <img src="02.jpg"  />  
    <img src="03.jpg"  />  
    <img src="04.jpg"  />
</div>

[Matteo Antonio AugelliPartecipante]

Devodire che in qualsiasi caso avrei optato per una soluzione differente da quella intrapresa da te, comunque quel risolvere il tuo problema devi chiamare la seconda funzione per la gestione dello slideshow con un nome differente, ad esempio startslideshow2 , in modo che non vada in conflitto con la prima funzione. e alla fine li richiami nel setinterval.

$(function() {
    setInterval("slideSwitch()", 2000);
    setInterval("startslideshow2", 2000);
});

[jqueryitaliaAmministratore]

Anch’io come Antonio avrei optato per una soluzione diversa.In ogni caso non è necessario creare una doppia funzione, ma solamente modificarla ad hoc.
Questa la mia soluzione, con la quale tra l’altro puoi evitare di usare due classi differenti per le immagini:

<script type="text/javascript">
<!-- //
function slideSwitch( elemId ) {
      var $active = $(elemId +' img.active');
      if ( $active.length == 0 ) $active = $(elemId +' img:last');
      var $next =  $active.next().length ? $active.next() : $(elemId +' img:first');
      $active.addClass('last-active');
      $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {
              $active.removeClass('active last-active');
      });
}  

$(function() {
      setInterval( 'slideSwitch('#slideshow1')', 2000 );
      setInterval( 'slideSwitch('#slideshow2')', 2000 ); 
});
// --></script>

[SantoriniPartecipante]

Devodire che in qualsiasi caso avrei optato per una soluzione differente da quella intrapresa da te,

Anch’io come Antonio avrei optato per una soluzione diversa.

Ringrazio sia Antonio che jqueryitalia.
Ovviamente se avete volete consigliarmi voi una soluzione più semplice rispetto a quella che ho trovato, accetterei il consiglio molto volentieri.

Ho sperimentato entrambi i vs. accorgimenti e purtroppo non funzionano.
Per la soluzione di Antonio, Dreamweaver mi segnala un errore nel codice.

[SantoriniPartecipante]

Se definisco un altro setinterval nel javascript succede questo …

 

[Matteo Antonio AugelliPartecipante]

quella non è la mia soluzione =) ma quella proposta dal jQita =P

In quel caso manca la concatenazione delle stringhe:

      setInterval( 'slideSwitch('+#slideshow1+')', 2000 );
      setInterval( 'slideSwitch('+#slideshow2+')', 2000 );

p.s.
Mi chiamo Matteo O.o’ non Antonio =X

[Autore]

Post