Come dire al mio slideshow di non scrollare all'infinito!

[Manuel Melluso]

Salve ragazzi,

sto costruendo il mio semplicissimo slideshow in jquery sul mio sito e volevo chiedere a qualcuno di darmi un suggerimento al riguardo. Come si può notare da questa pagina, totalmente in costruzione, http://imad.it/skills.html ci sono 2 immagini che scrollano se vengono premuti i pulsanti "cnc" e "skills".

Questo è il codice semplicissimo che ho deciso di testare (sono principiante in materia jquery e assolutamente ignorante in java!):

<script>
$(document).ready(function(){
$("#p_skills").click(function(){
$("#tabella").animate({left:'+=904px'});
});
$("#p_cnc").click(function(){
$("#tabella").animate({left:'-=904px'});
});
});
</script>

Ora, diciamo che il risultato in se non mi dispiace anche se vorrei implementarlo con qualche altro effetto; l'unica cosa, per ora, che non riesco a risolvere è come dirgli di fermarsi quando finiscono le immagini o di ritornare alla prima come avviene in una normale gallery! Se infatti si prova a spingere uno dei 2 pulsanti più di una volta, anche se non si vede niente, la tabella che contiene le immagini continua a scorrere fino all'infinito! Immagino che non debba nemmeno spiegarvelo insomma, sicuramente già lo saprete.

Comunque, è risolvibile questa cosa? Come faccio a dire alla tabella di scrollare solamente tra la prima e l'ultima immagine caricata, che siano 2 o 100? Oppure come faccio a dirgli di ritornare dall'ultima alla prima e viceversa?

Grazie a chi volesse aiutarmi

Ciauz

 

[Mr. PHP]

Prima di tutto devi sapere quante immagini hai e poi in base allevento scelto aumenti o diminuisci il valore fin arrivando ad un punto si settarlo.

<script type="text/javascript">
$(document).ready(function(){
	
	var start = 1;
	var total = 0;
	
	$('img').each(function(){
		
		total++;
		
	});
	
	$('.next').click(function(){

		start++;
		
		if( start > total )
			start = 1;
		
	});
	
	$('.back').click(function(){
			
		--start;
		
		if( start < 1 )
			start = total;
									
	});
	
	
});
</script>

 

[Manuel Melluso]

Grazie per il suggerimento Mr.PHP,

quindi, per quanto riguarda il mio caso come andrebbe? Così?

<script type="text/javascript">
$(document).ready(function(){
	
	var start = 1;
	var total = 0;
	
	$("#tabella").each(function(){
		
		total++;
		
	});
	
	$("#p_skills").click(function(){

		start++;
		
		if( start > total )
			start = 1;
		
	});
	
	$("#p_cnc").click(function(){
			
		--start;
		
		if( start < 1 )
			start = total;
									
	});
	
	
});
</script>

...credo di no perchè non funziona! http://imad.it/skills1.html

Volendo rimanere sempre su questo caso, quindi 2 immagini, come va integrato il tuo codice nel mio?...ammesso che vada integrato! In parole povere cosa devo scrivere per far funzionare il tuo codice con la mia interfaccia (pulsante "cnc" pulsante "skills" e "tabella")...puoi farmi un esempio, se no non riesco a capire, scusa ma sono proprio principiante!

 

[Mr. PHP]

Per fare ciò mi dovresti dare la struttura della tabella e poi ti posto lo script completo

 

[Mr. PHP]

Prova con questo e una semplice slide con effetto Fade.

<script type="text/javascript">
$(document).ready(function() {
	
	var start = 1;
	var total = 0;
	
	$('#tabella img').each(function(){
		
		total++;
		
		if( total > 1 )
			$( '#tabella #g_' + total ).hide();
		
	});
	
	$("#p_skills").click(function(){
			
		$( '#tabella #g_' + start ).fadeOut( 500, function(){
			
			start++;
			
			if( start > total )
				start = 1;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	});
	
	$("#p_cnc").click(function(){
				
		$( '#tabella #g_' + start ).fadeOut( 500, function(){
			
			--start;
			
			if( start < 1 )
				start = total;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	}); 

  
});
</script>

 

[Manuel Melluso]

ecco la tabella:

<div id="img_gallery">
  <table id="tabella">
  <tr>
    <td><img src="img/slider/01.jpg" id= "g_1"></td>
    <td><img src="img/slider/02.jpg" id= "g_2"></td>
    <td></td>
  </tr>
</table>
  
  
  
  </div>

css:

#img_gallery {
	position: absolute;
	left: 50px;
	width: 900px;
	height: 450px;
	background-color: #006633;
	top: 80px;
	overflow: hidden;
}
#tabella {
	position:absolute;
	width: 900px;
	left: -4px;
	top: -4px;
}

Ho modificato il tuo codice sostituendo il "fade" con "animation" ...ma ovviamente non funziona! :incazz2:

<script type="text/javascript">
$(document).ready(function() {
	
	var start = 1;
	var total = 0;
	
	$('#tabella img').each(function(){
		
		total++;
		
		if( total > 1 )
			$( '#tabella #g_' + total ).hide();
		
	});
	
	$("#p_skills").click(function(){
			
		$( '#tabella #g_' + start ).animate(left:'+=904px', function(){
			
			start++;
			
			if( start > total )
				start = 1;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	});
	
	$("#p_cnc").click(function(){
				
		$( '#tabella #g_' + start ).animate(left:'-=904px', function(){
			
			--start;
			
			if( start < 1 )
				start = total;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	}); 

  
});
</script>

dove sbaglio?

 

[Mr. PHP]

Prova in questo modo ho inserito le parentesi graffe nell animete { left: '' }

<script type="text/javascript">
$(document).ready(function() {
	
	var start = 1;
	var total = 0;
	
	$('#tabella img').each(function(){
		
		total++;
		
		if( total > 1 )
			$( '#tabella #g_' + total ).hide();
		
	});
	
	$("#p_skills").click(function(){
			
		$( '#tabella #g_' + start ).animate({ left: '+=904px' }, function(){
			
			start++;
			
			if( start > total )
				start = 1;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	});
	
	$("#p_cnc").click(function(){
				
		$( '#tabella #g_' + start ).animate( { left: '-=904px' }, function(){
			
			--start;
			
			if( start < 1 )
				start = total;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	}); 

  
});
</script>

 

[Manuel Melluso]

Nada

http://imad.it/skills1.html

però con il fade funzionava bene!

 

[Mr. PHP]

Prova cosi:

<script type="text/javascript">
$(document).ready(function() {
	
	var start = 1;
	var total = 0;
	
	$('#tabella img').each(function(){
		
		total++;
		
		if( total > 1 )
			$( '#tabella #g_' + total ).hide();
		
	});
	
	$("#p_skills").click(function(){
			
		$( '#tabella #g_' + start ).animate({ width: 'toggle' }, 500, 'linear', function(){
			
			start++;
			
			if( start > total )
				start = 1;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	});
	
	$("#p_cnc").click(function(){
				
		$( '#tabella #g_' + start ).animate( { width: 'toggle' }, 500, 'linear', function(){
			
			--start;
			
			if( start < 1 )
				start = total;
			
			$( '#tabella #g_' + start ).fadeIn( 500 );
			
		});
		
	}); 

  
});
</script>

 

[Nefyt]

Includi correttamente jquery, inoltre le immagini da gestire sono solamente 2?

Se sono solo 2 ti basta fare cosi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script> 
    var turno = 1;
    
$(document).ready(function(){
  $("#p_skills").click(function(){
      if(turno==2){
          $("#tabella").animate({left:'+=904px'});
          turno--;
      }
});
$("#p_cnc").click(function(){
    if(turno==1){
       $("#tabella").animate({left:'-=904px'});
       turno++;
    }
});  
});
</script>

 

[Manuel Melluso]

Molto carino l'effetto Mr. PHP, funziona, ma vorrei mantenere lo scroll orizzontale come ho postato nel primo esempio!

Nefyt, il tuo funziona proprio come vorrei! E' perfetto...solo che le immagini non saranno 2! Non so nemmeno dirti quante saranno sinceramente, ma vorrei comunque essere libero di inserirle e togliere senza compromettere la gallery! Che suggerisci? Mi sembra di capire che questo "turno" faccia la differenza!

 

[Nefyt]

Molto carino l'effetto Mr. PHP, funziona, ma vorrei mantenere lo scroll orizzontale come ho postato nel primo esempio!

Nefyt, il tuo funziona proprio come vorrei! E' perfetto...solo che le immagini non saranno 2! Non so nemmeno dirti quante saranno sinceramente, ma vorrei comunque essere libero di inserirle e togliere senza compromettere la gallery! Che suggerisci? Mi sembra di capire che questo "turno" faccia la differenza!

Su cosa vorresti gestire l'evento delle immagini? Nel senso tramite appositi pulsanti o altre voci nel menu? Magari posta un esempio per chiarire meglio

 

[Manuel Melluso]

Si esatto 2 pulsanti, una cosa molto semplice; ora la funzione "prev" e "next" la fanno i 2 pulsanti "cnc" e "skills" perchè ancora non li ho disegnati!

 

[Nefyt]

Contando che cnc è per andare avanti e skills indietro cosi dovrebbe andare

<script> 
    //modifica solo questa
    var immagini = 5;
    
    var turno = 1;
    
$(document).ready(function(){
  $("#p_skills").click(function(){
      if(turno-1>=1){
          $("#tabella").animate({left:'+=904px'});
          turno--;
      }
});
$("#p_cnc").click(function(){
    if(turno+1<=immagini){
       $("#tabella").animate({left:'-=904px'});
       turno++;
    }
});  
});
</script>

<div id="img_gallery">
  <table id="tabella">
  <tr>
    <td><img src="img/slider/01.jpg" id= "g_1"></td>
    <td><img src="img/slider/02.jpg" id= "g_2"></td>
    <td><img src="img/slider/03.jpg" id= "g_3"></td>
    <td><img src="img/slider/04.jpg" id= "g_4"></td>
    <td><img src="img/slider/05.jpg" id= "g_5"></td>
  </tr>
</table>
</div>

 

[Manuel Melluso]

Grandeee!!

Perfetto, funziona alla grande!! Grazie mille.

Ho caricato altre immagini ma adesso già le ho tolte perchè non sono pronte ancora, funziona benissimo

Appena gli do un'aggiustata faccio un UP.

Cosa sarebbe qusto "turno"?

 

[Nefyt]

Grandeee!!

Perfetto, funziona alla grande!! Grazie mille.

Ho caricato altre immagini ma adesso già le ho tolte perchè non sono pronte ancora, funziona benissimo

Appena gli do un'aggiustata faccio un UP.

Cosa sarebbe qusto "turno"?

Di nulla, turno è una variabile che aumenta o decrementa a seconda dell'immagine che viene, il suo minimo è 1 e il suo massimo la variabile immagini, in pratica serve a fare un limite, sennò continuerebbe all'infinito

 

[Manuel Melluso]

Ho dato una sistemata alla pagina, cosa ne pensate? Ogni volta che la visito, nonostante sia stata progettata da me, faccio difficoltà a percepire 2 elementi in particolare! Se per voi sarà lo stesso mi toccherà provvedere!

Di cosa parlo?

Volevo anche chiedere un suggerimento su come, sempre se possibile, ritardare il passaggio da una pagina all'altra dopo aver spinto un pulsante/link; mi spiego meglio:

premo pulsante "contacts"(per esempio) -> parte animazione jquery -> alla fine dell'animazione jquery avviene il passaggio alla pagina "contacts".

E' possibile una cosa del genere?

 

[Manuel Melluso]

...forse con "setTimeout()" ?

Questo esempio dice:

jQuery(document).ready(function () {
    //hide a div after 3 seconds
    setTimeout(function(){ jQuery("#div").hide(); }, 3000);
});

Nel mio caso diventerebbe una cosa del genere?

$(document).ready(function(){
  $("#p_contacts").click(function(){
setTimeout(function(){ non so cosa scrivere qui, ammesso che ci vada qualcosa!Tipo: aspetta 1 secondo prima di passare all'altra pagina!}, 3000);
});

:book:

 

[Nefyt]

Puoi far svolgere tranquillamente l'animazione settando un setTimeout che vada ad eseguire o esegua il redirect dopo quanto vuoi

del tipo

setTimeout('location.href="http://google.com"',5000);

 

[Manuel Melluso]

quindi, per esempio, montandolo su questa animazione:

$(document).ready(function(){
  $("#gallery_prev").click(function(){
      if(turno-1>=1){
          $("#tabella").animate({left:'+=990px'},600);
		  $("#tabella").animate({left:'-=30px'},380);
          turno--;
      }
});

dove devo inserire questo?

setTimeout('location.href="http://google.com"',5000);