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

Manuel Melluso

Nuovo Utente
31 Gen 2013
17
0
0
40
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

Utente Attivo
31 Gen 2013
141
0
0
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.
Codice:
<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>
 
Ultima modifica:

Manuel Melluso

Nuovo Utente
31 Gen 2013
17
0
0
40
Grazie per il suggerimento Mr.PHP,

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

Codice:
<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

Utente Attivo
31 Gen 2013
141
0
0
Per fare ciò mi dovresti dare la struttura della tabella e poi ti posto lo script completo
 

Mr. PHP

Utente Attivo
31 Gen 2013
141
0
0
Prova con questo e una semplice slide con effetto Fade.
Codice:
<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

Nuovo Utente
31 Gen 2013
17
0
0
40
ecco la tabella:
Codice:
<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:
Codice:
#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:
Codice:
<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

Utente Attivo
31 Gen 2013
141
0
0
Prova in questo modo ho inserito le parentesi graffe nell animete { left: '' }
Codice:
<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>
 

Mr. PHP

Utente Attivo
31 Gen 2013
141
0
0
Prova cosi:
Codice:
<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

Utente Attivo
17 Apr 2012
1.102
0
0
Includi correttamente jquery, inoltre le immagini da gestire sono solamente 2?

Se sono solo 2 ti basta fare cosi
Codice:
<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

Nuovo Utente
31 Gen 2013
17
0
0
40
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

Utente Attivo
17 Apr 2012
1.102
0
0
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

Nuovo Utente
31 Gen 2013
17
0
0
40
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

Utente Attivo
17 Apr 2012
1.102
0
0
Contando che cnc è per andare avanti e skills indietro cosi dovrebbe andare ;)

Codice:
<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

Nuovo Utente
31 Gen 2013
17
0
0
40
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

Utente Attivo
17 Apr 2012
1.102
0
0
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

Nuovo Utente
31 Gen 2013
17
0
0
40
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

Nuovo Utente
31 Gen 2013
17
0
0
40
...forse con "setTimeout()" ?

Questo esempio dice:

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

Nel mio caso diventerebbe una cosa del genere?

Codice:
$(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

Utente Attivo
17 Apr 2012
1.102
0
0
Puoi far svolgere tranquillamente l'animazione settando un setTimeout che vada ad eseguire o esegua il redirect dopo quanto vuoi

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

Manuel Melluso

Nuovo Utente
31 Gen 2013
17
0
0
40
quindi, per esempio, montandolo su questa animazione:
Codice:
$(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?

Codice:
setTimeout('location.href="http://google.com"',5000);
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
W ragazzi, che posso dire un saluto a tutti. Presentati al Forum 3
S Qualcuno mi sa dire a cosa serve precisamente questo script? Javascript 1
I Detti, proverbi e modi di dire nei dialetti italiani Presenta il tuo Sito 2
F che vuol dire? HTML e CSS 1
D A chi lo vado a dire? Leggi, Normative e Fisco 1
Cforever if (a===12) ma cosa vuol dire?????? Javascript 12
Filippine Novità Sito!!! MI potete dire cosa ne pensate? Presenta il tuo Sito 1
R Che dire ? Presenta il tuo Sito 6
M Vendo il mio sito web teknosurfng.com, che trasmette nel campo della tecnologia Compravendita siti e domini 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
N Piacere mio! Presentati al Forum 2
Sapuppo Il mio benvenuto Presentati al Forum 1
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
M Non ho rinnovato il mio sito su Aruba... Domini 1
G Vi presento il mio sito: Globalmeteo Presenta il tuo Sito 0
Shyson Google search non trova il mio sito SEO e Posizionamento 1
N Consigli SEO per il mio sito di web design SEO e Posizionamento 0
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
U [Cerco ] incremento traffico per il mio sito Vendere e Acquistare pubblicita' online 0
G (CERCO) pubblicita sul mio IG Vendere e Acquistare pubblicita' online 3
P [PHP] Aggiungere un mio script a prestashop? PHP 10
P [Joomla] Il mio iframe non funziona più Joomla 0
U Progettazione del mio Centro Stella Reti LAN e Wireless 0
D Vendo pubblicità sul mio account Instagram da 12.5 k follower Vendere e Acquistare pubblicita' online 3
L CERCO SOCIO PER IL MIO SITO STREAMING FILM Offerte e Richieste di Lavoro e/o Collaborazione 2
K Cerco account instagram verificato o che possa verificarmi il mio con spunta blu Annunci servizi di Social Media Marketing 0
S rendere mio sito mobile compatibile Offerte e Richieste di Lavoro e/o Collaborazione 2
C [Gratuito][Cerco]cerco staff per il mio sito Offerte e Richieste di Lavoro e/o Collaborazione 1
S Il mio webmaster vuole cancellarmi il sito: può farlo? Leggi, Normative e Fisco 6
Federico.Marcelo Il mio sito web - Instagram Automation Tools Presenta il tuo Sito 2
Federico.Marcelo qual è il modo migliore per promuovere il mio canale di telegramma? Annunci servizi di Social Media Marketing 3
A [VENDO] pubblicità sul mio account Instagram con 250k followers Vendere e Acquistare pubblicita' online 2
M [VENDO] Banner pubblicitari nel mio blog Vendere e Acquistare pubblicita' online 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
A con che programma creo il mio sito? Webdesign e Grafica 1
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
Y COMPRO backlink per il mio sito di Droni Offerte e Richieste di scambio links 1
A cerco socio per il mio sito Offerte e Richieste di Lavoro e/o Collaborazione 3
W [PHP] Un aiuto per il mio primo "Multithread" PHP 0
Lear [COMPRO] Pubblicità per il mio servizio di account sky,mediaset Vendere e Acquistare pubblicita' online 1
borgo italia un mio lavoro Presenta il tuo Sito 1
Shyson [WordPress] Richiamare nel mio sito numero iscritti da gruppo Facebook WordPress 0
T [PHP] piccola modifica a script (non mio...) PHP 8
F Trasferire mio sito su wordpress WordPress 5
F Backup incrementale di file e mysql su mio pc Server Dedicati e VPS 2
M Aiuto: problema con il mio TP-Link range extender Reti LAN e Wireless 0
D dove viene memorizzato il mio db sqlite? Sviluppo app per Android 0
O Descrizione di altro sito sulla ricerca del mio SEO e Posizionamento 0
R Come faccio a far tradurre un mio video su Youtube? Social Media Marketing 2

Discussioni simili