Problema slideshow JQuery

22-10-2011, 13.46.38

Salve a tutti e scusate, ma avrei bisogno di una mano , io vorrei creare una specie di slideshow di immagini in JQuery, ma non riesco a far funzionare i codici, qualcuno riesce a darmi una mano?
Questo è il contenuto della pagina.html

Codice HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#contenitore{overflow:hidden; width:600px}
#contenitore_interno{height:100px; width:1000px; overflow:hidden; position:relative}
#contenitore_interno img{float:left; width:100px; height:100px}
</style>
<script href='slideshow.js'></script>
</head>
<body>
<div id='contenitore'>
	<div id='contenitore_interno'>
		<img src='img/1.jpg' alt='1'>
		<img src='img/2.jpg' alt='2'>
		<img src='img/3.jpg' alt='3'>
		<img src='img/4.jpg' alt='4'>
		<img src='img/5.jpg' alt='5'>
		<img src='img/6.jpg' alt='6'>
		<img src='img/7.jpg' alt='7'>
		<img src='img/8.jpg' alt='8'>
		<img src='img/9.jpg' alt='9'>	
	</div>
</div>
</body>
</html>

Questo è il contenuto del slideshow.js:

Codice HTML:

$('#contenitore_interno').toggle(function(){
	var scrollAmount = $(this).width() - $(this).parent().width();
	$(this).animate({'left':'-=' + scrollAmount}, 'slow');
}, function() {
	$(this).animate({'left':'0'}, 'slow');
});

22-10-2011, 17.36.58

Non ho visto tutto ma ho notato che il div "contenitore_interno" è più largo del div "contenitore".

Potresti fornire una pagina per vedere all'opera quello che hai fatto?

22-10-2011, 18.25.23

il #contenitore_interno lo uso per contenere tutte quante le immagini, mentre #contenitore è quello che uso per visualizzare le immagini che intendo far vedere "alla volta", questo è il link per la pagina con immagini prese alla cavolo da google Clicca qui
Devo dirlo io non sono un esperto nel JQuery ma intendo conoscerlo, quindi se potete correggetemi o consigliatemi tranquillamente come perfezionare i codici!

22-10-2011, 20.03.42

Sto cercando da dare un'occhiata al tuo codice, e mi viene da chiederti:

dalla documentazione di jquery si evince che .toggle

Description: Display or hide the matched elements.

quindi la funzione mostra o nasconde l'elemento selezionato.

Ma quale evento scatena la funzione?

Hai scritto tu il codice ho sei partito da qualcosa di pronto?

22-10-2011, 20.13.20

Solo qualche giorno fa mi avevano regalato un libro che spiega il JQuery .

E' da lì che viene il codice e leggendo si capisce che quando si clicca su un'immagine (non specifica quale quindi penso che vada bene una qualsiasi) l'effetto dello scorrimento si aziona.
Me sembra però una cosa strana.

Il codice più completo che c'è scritto:

Codice HTML:

$('#contenitore_interno').click(function(){
var Scroll=$(this).width() - $(this).parent().width();
var CorrentePos = Math.abs(parseInt($(this).css('left')));
var ScrollRimanente= Scroll - CorrentePos;

var nextScroll = Math.floor($(this).parent().width() /2);
if(ScrollRimanente < nextScroll){
 nexScroll = ScrollRimanente;
}
if(currentScrollPos < Scroll ) {
$(this).animate({'left':'-=' + nextScroll}, 'slow');
}
else{
$(this).animate({'left':'0'},'fast');
}

22-10-2011, 20.23.49

Originalmente inviato da gogogames

Solo qualche giorno fa mi avevano regalato un libro che spiega il JQuery .

E' da lì che viene il codice e leggendo si capisce che quando si clicca su un'immagine (non specifica quale quindi penso che vada bene una qualsiasi) l'effetto dello scorrimento si aziona.

Nel tuo codice non c'è traccia di gestore di eventi legati al click su una qualsiasi immagine.

dovresti impostare qualcosa del genere:

Codice:

$('img').click(function(){
  // Tuo codice
}

Prova, se non riesci vediamo dove ti fermi

PS.
Come ho detto tante altre volte provare e sbatterci la testa è un modo per capire cosa si sta facendo e imparare.

22-10-2011, 21.08.13

Ho fatto dei controlli nello script e ora faccio una ricerchina per capirci di più sulla funzione animate()

Ps: Un mio errore comunque è stato quello di mettere il codice js nella head, dove ho notato che non mi andava, ora l'ho posizionato nel footer

**EuroSalute** · 22-10-2011, 21.27.45

per il cambio immagini la sintassi jquery corretta è questa:

Codice HTML:

<script language= "JavaScript"  type= "text/javascript" >
$(document).ready(function(){
	$('img').toggle(
          function(){$(this).attr("src","gallery_jQuery/images/coffee.jpg");},     
          function(){$(this).attr("src","gallery_jQuery/images/rose.jpg");}
	 );
});
</script>

22-10-2011, 21.43.34

Ho dato un'occhiata al libro di cui parli.

Beh, non c'è da meravigliarsi che non funzioni se hai sostituito un bel po' di codice con tre sole righe.

Per la posizione dello script, puoi benisismo lasciarlo nell'head, l'importante è che lo richiami solo quando tutti gli elementi sono stati caricati (con jquery: $(document).ready() ...)

22-10-2011, 22.10.02

Ho capito il funzionamento nello script e sono riuscito a farlo funzionare.
Mi sento abbastanza realizzato di esserci riuscito da me (dato che di js so na pippa)

Comunque simpleticket quelle tre righe che ho estratto dal libro non sono sbagliate, per far funzionare una semplice carrellata di immagini funzionano.

Per esempio se volevo far scorrere le immagini di un lato potrebbe andare bene scrivere così:

Codice HTML:

$('#contenitore_interno').click(function (){
var scrollAmount = $(this).width() - $(this).parent().width();
	$(this).animate({left:'-='+scrollAmount}, 'slow';
});

Discussione: Problema slideshow JQuery

LinkBack

Strumenti discussione

Display

Problema slideshow JQuery

Regole di scrittura