[RISOLTO] Creazione slider con anteprima con jquery

fradamma

Utente Attivo
28 Set 2012
93
0
0
ciao a tutti.
devo creare per il mio sito uno slider con jquery (senza l'utilizzo di alcun plugin però) che mi permetta in alto di scorrere le immagini e in basso di visualizzare l'immagine selezionata. Al caricamento della pagina deve essere visibile la prima dell'elenco. Come posso fare? Ne approfitto per augurarvi un buon weekend.

PS inserisco sotto in allegato un mockup di quello che vorrei fare.

slider-img.jpg

Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"  >
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="script/jquery.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

	$(document).ready( function(){
		$("a").click( function(event){
			event.preventDefault();
			alert("sono dentro");
		});
	});


</script>

<style type="text/css">
	.container {
	   width: 680px;
	   height: 500px;
	   background: #e3e3e3;
	   position: absolute;
	   left: 0;
	   top: 100px;
	}
	.slider {
	   height: 110px;
	   background: #666666;
	   width: 650px;
	   position: relative;
	   top: 10px;
	   left: 15px;
	}
	.slider a {
	   display: block;
	   cursor: pointer;
	   text-indent: -9999px;
	}
	.arrow_left {
	   background: none repeat scroll 0 0 #0000FF;
	   bottom: 0;
	   height: 30px;
	   left: 0;
	   position: absolute;
	   width: 30px;
	}
	.arrow_right {
	   background: none repeat scroll 0 0 #0000FF;
	   height: 30px;
	   position: absolute;
	   right: 0;
	   top: 0;
	   width: 30px;
	}
	.content_image {
	   width: 350px;
	   height: 350px;
	   position: absolute;
	   top: 140px;
	   left: 165px;
	   background: #ccc;
	}
</style>
</head>
<body>

<div class="container">
	<div class="slider">
		<div class="arrow_left"><a href="#">sinistra</a></div>
<div class="slider_interno">
			<ul>
				<li><img src="img/image1"></li>
				<li><img src="img/image2"></li>
				<li><img src="img/image3"></li>
				<li><img src="img/image4"></li>
				<li><img src="img/image5"></li>
				<li><img src="img/image6"></li>
				<li><img src="img/image7"></li>
				<li><img src="img/image8"></li>
				<li><img src="img/image9"></li>
			</ul>
		</div>
		<div class="arrow_right"><a href="#">destra</a></div>
	</div>
	<div class="content_image"></div>
</div>

</body>
</html>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova questo
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function start() {
            go = setInterval(function(){
                $(".contenuto").prepend($(".contenuto div").last().hide().animate({width: 'toggle'}));
            },1500);
        }        
        $(".contenitore").mouseover(function() {
            clearInterval(go);  
        })
        $(".contenitore").mouseout(function() {
            start();
        });
        $(".contenitore img").click(function() {
            $(".immagine img").attr("src",$(this).attr("src"));
        });
        start();
    })
</script>
<style type="text/css">
    div.contenitore {
        width:288px;
        overflow: hidden;
        padding:4px;
        border: 2px solid #e1e1e1;
    }
    div.contenuto div {
        float: left;
        width: 72px;
        overflow: hidden;
    }
    div.contenitore div img {
        width: 72px;
        cursor: pointer;
    }
    div.contenuto {
        height: 72px;
        margin-left:-72px;
        width: 1000px;
        overflow: hidden;
    }
    div.immagine {
        overflow: hidden;
        width:288px;
        text-align: center;
        border: 2px solid #e1e1e1;
        padding:4px;
        margin-top:2px;
    }
    div.immagine img {
        width: 80%;
    }
</style> 
<div class="contenitore">
    <div class="contenuto">
        <div><img src="../img/1.png" alt=""/></div>
        <div><img src="../img/2.png" alt=""/></div>
        <div><img src="../img/3.png" alt=""/></div>
        <div><img src="../img/4.png" alt=""/></div>
        <div><img src="../img/5.png" alt=""/></div>
        <div><img src="../img/6.png" alt=""/></div>
        <div><img src="../img/7.png" alt=""/></div>
        <div><img src="../img/8.png" alt=""/></div>
        <div><img src="../img/9.png" alt=""/></div>
    </div>
</div> 
<div class="immagine">
    <img src="../img/1.png" alt=""/>
</div>
dovrai adattare CSS e HTML alle tue esigenze
Io ho usato delle immagine larghe 72px, ma , quello che ti interessa dovrebbe essere il codice Jquery
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao Criric,

faccio alcune considerazioni per meglio capire:

1) da quanto ho capito, il seguente pezzo di script:
Codice:
 $(".contenitore img").click(function() {
            $(".immagine img").attr("src",$(this).attr("src"));
 });

dice che al click sull'immaginetta piccola sopra (dentro .contenitore), l'immagine contenuta nel div ".immagine" di sotto deve cambiare e lo fa andando a riscrivere l'attributo "src" di quella di sotto. Con "$(this)" gli dici di cambiarlo con quello su cui hai cliccato ....giusto?

2) la funzione start():

Codice:
 function start() {
            go = setInterval(function(){
                $(".contenuto").prepend($(".contenuto div").last().hide().animate({width: 'toggle'}));
            },1500);
        }

crea una variabile "go" al cui interno inserisci un setInterval. La funzione passata come primo argomento al setInterval dice di attaccare all'inizio del div contenuto (credo all'interno o no ?!) l'ultimo div interno contenente l'immagine reso "hide". Non capisco solo l'ultima parte....".animate({width: 'toggle'})"...fa il toggle di cosa???

3) con il seguente pezzo:

Codice:
  $(".contenitore").mouseover(function() {
            clearInterval(go);  
        })
        $(".contenitore").mouseout(function() {
            start();
  });

"giochi" con il mousover/mouseout stoppando l'animazione con un clearInterval passandogli come argomento la funzione("go") e facendola ripartire con start() al mouseout. In realtà quello che devo fare io è un tantino differente:

Codice:
<div class="arrow_left"><a href="#">freccia sinistra</a></div>
<div class="contenuto">
        <div><img src="../img/1.png" alt=""/></div>
        <div><img src="../img/2.png" alt=""/></div>
        <div><img src="../img/3.png" alt=""/></div>
        <div><img src="../img/4.png" alt=""/></div>
        <div><img src="../img/5.png" alt=""/></div>
        <div><img src="../img/6.png" alt=""/></div>
        <div><img src="../img/7.png" alt=""/></div>
        <div><img src="../img/8.png" alt=""/></div>
        <div><img src="../img/9.png" alt=""/></div>
</div>
<div class="arrow_right"><a href="#">freccia destra</a></div>

ho bisogno che al click sulla canonica freccia destra o sinistra le immagini scorrono....come si può modificare??? io ci sto dando un'occhiata ma non riesco ad integrare quello che hai fatto tu.

Grazie Criric, sei un grande cmq! :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
1)
esattamente

2)
In pratica prende l'ultimo elemento div di ".contenuto" lo nasconde (.hide) e lo riapre con animazione (animate({width: 'toggle'}))

3)
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        
        $("#sin").click(function(){
            $(".contenuto").append($(".contenuto div").first().hide());            
        });
        $("#des").click(function(){
            $(".contenuto").prepend($(".contenuto div").last().hide());
        });
        $(".contenitore img").click(function() {
            $(".immagine img").attr("src",$(this).attr("src"));
        });
        
    })
</script>
<style type="text/css">
    div.move {
        width:288px;
        overflow: hidden;
        padding:4px;
        border: 2px solid #e1e1e1;
    }
    div.contenitore {
        width:288px;
        overflow: hidden;
        padding:4px;
        border: 2px solid #e1e1e1;
        margin-top:2px;
    }
    div.contenuto div {
        float: left;
        width: 72px;
        overflow: hidden;
    }
    div.contenitore div img {
        width: 72px;
        cursor: pointer;
    }
    div.contenuto {
        height: 72px;
        margin-left:-72px;
        width: 1000px;
        overflow: hidden;
    }
    div.immagine {
        overflow: hidden;
        width:288px;
        text-align: center;
        border: 2px solid #e1e1e1;
        padding:4px;
        margin-top:2px;
    }
    div.immagine img {
        width: 80%;
    }
    span#sin {
        float: left;
        margin-left: 22px;
    }
    span#des {
        float:right;
        margin-right: 22px;
    }
    span.b {
        font-weight: bold;
        font-size: 1.5em;
        cursor: pointer;
    }
</style>
<div class="move">
    <span class="b" id="sin"><</span>
    <span class="b" id="des">></span>
</div>
<div class="contenitore">
    <div class="contenuto">
        <div><img src="../img/1.png" alt=""/></div>
        <div><img src="../img/2.png" alt=""/></div>
        <div><img src="../img/3.png" alt=""/></div>
        <div><img src="../img/4.png" alt=""/></div>
        <div><img src="../img/5.png" alt=""/></div>
        <div><img src="../img/6.png" alt=""/></div>
        <div><img src="../img/7.png" alt=""/></div>
        <div><img src="../img/8.png" alt=""/></div>
        <div><img src="../img/9.png" alt=""/></div>
    </div>
</div> 
<div class="immagine">
    <img src="../img/1.png" alt=""/>
</div>
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao Cricic
lo script che mi hai postato al terzo punto non funziona. L'ho modificato nel seguente modo e sembra funzionare:

Codice:
 $(document).ready(function(){
        
            $("#sin").click(function(){
                $(".contenuto").append($(".contenuto div").first().hide().show());            
            });
            $("#des").click(function(){
                $(".contenuto").prepend($(".contenuto div").last().hide().show());
            });
            $(".contenitore img").click(function() {
                $(".immagine img").attr("src",$(this).attr("src"));
            });
        
        })

Grazie tanteee!!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Hai ragione! la mi idea era quella di dare l'effetto scorrevole sia in avanti che indietro, ma, ad un certo punto mi ero arreso e ti ho postato lo script incompleto
Sono contento che tu abbia modifcato fino a farlo funzionare
cmq ho risolto provalo cosi
Codice:
$(document).ready(function() {        
        $("#sin").click(function(){
            $(".contenuto div").first().animate({width: 'toggle'},500,function(){           
                $(".contenuto div").first().appendTo(".contenuto").show();
            });            
        });
        $("#des").click(function(){
            $(".contenuto").prepend($(".contenuto div").last().hide().animate({width: 'toggle'},500));
        });
        $(".contenitore img").click(function() {
            $(".immagine img").attr("src",$(this).attr("src"));
        });
    })
edit:
ho tolto un comando che non c'entrava
 
Ultima modifica:

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao Criric.
Va tutto benissimo nel tuo script, l'unica piccola imperfezione è data dal fatto che se io clicco velocemente su "#sin" (quasi con un doppio click) le immagini sembrano sovrapporsi...non ho capito da che cosa sia dato. Cmq è solamente una fesseria....per il resto è proprio l'effetto che desideravo!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Si, me ne ero accorto, basta disabilitare la freccia appena cliccato e riabilitarla finita l'animazione
Ho dovuto cambiare l'elemento da <span> a <input> per poter utilizzare la proprietà disabled
di conseguenza è stato necessario aggiornare il css
riposto lo script completo
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {           
        $("#sin").click(function(){
            $(this).prop("disabled",true);
            $(".contenuto div").first().animate({width: 'toggle'},300,function(){           
                $(".contenuto div").first().appendTo(".contenuto").show();
                $("#sin").prop("disabled",false);
            });            
        });
        $("#des").click(function(){
            $(this).prop("disabled",true);
            $(".contenuto").prepend($(".contenuto div").last().hide().animate({width: 'toggle'},300,function(){
                $("#des").prop("disabled",false);
            }));
        });
        $(".contenitore img").click(function() {
            $(".immagine img").attr("src",$(this).attr("src"));
        });
    });
</script>
<style type="text/css">
    html body {
        text-align: center;
    }
    div.move {
        width:288px;
        overflow: hidden;
        padding:4px;
        border: 2px solid #e1e1e1;
    }
    div.contenitore {
        width:288px;
        overflow: hidden;
        padding:4px;
        border: 2px solid #e1e1e1;
        margin-top:2px;
    }
    div.contenuto div {
        float: left;
        width: 72px;
        overflow: hidden;
    }
    div.contenitore div img {
        width: 72px;
        cursor: pointer;
    }
    div.contenuto {
        height: 72px;
        margin-left:-72px;
        width: 1000px;
        overflow: hidden;
    }
    div.immagine {
        overflow: hidden;
        width:288px;
        text-align: center;
        border: 2px solid #e1e1e1;
        padding:4px;
        margin-top:2px;
    }
    div.immagine img {
        width: 80%;
    }
    input#sin {
        float: left;
        margin-left: 22px;
    }
    input#des {
        float:right;
        margin-right: 22px;
    }
    input.b {
        font-weight: bold;
        font-size: 1.5em;
        cursor: pointer;
        border: none;
        background-color: transparent;
    }
</style>
<div class="move">
    <input type="button" class="b" id="sin" value="<"/>
    <input type="button" class="b" id="des" value=">"/>
</div>
<div class="contenitore">
    <div class="contenuto">
        <div><img src="../img/1.png" alt=""/></div>
        <div><img src="../img/2.png" alt=""/></div>
        <div><img src="../img/3.png" alt=""/></div>
        <div><img src="../img/4.png" alt=""/></div>
        <div><img src="../img/5.png" alt=""/></div>
        <div><img src="../img/6.png" alt=""/></div>
        <div><img src="../img/7.png" alt=""/></div>
        <div><img src="../img/8.png" alt=""/></div>
        <div><img src="../img/9.png" alt=""/></div>
    </div>
</div> 
<div class="immagine">
    <img src="../img/1.png" alt=""/>
</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
T [Photoshop] Problema creazione pennello personalizzato [RISOLTO] Photoshop 3
G [risolto] Creazione file excel con PHP PHP 3
M [RISOLTO] Creazione database MySQL 14
D [RISOLTO]domande varie su creazione sito con php, mysql e phpmyadmin PHP 42
L (risolto) MySQL 0
B getElementById su piu id(Risolto) Javascript 7
L Esercitarsi con Js [RISOLTO] Javascript 4
C [RISOLTO]Inserimento variabile php in input html PHP 20
L risolto visualizzazione e ordinamento dati PHP 1
moustache [RISOLTO] SQL PHP IIS PHP 8
Sergio Unia Ricezione email con destinatari multipli [Risolto] PHP 2
L update tabelle in php mysql [risolto] PHP 6
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [RISOLTO] Stampa a video risultato count in html PHP 13
L [RISOLTO] Eliminare una discussione creata PHP 3
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
A [PHP] Problema query insert [RISOLTO] PHP 14
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
K [RISOLTO] Problema Griglia Php+Mysql PHP 13
S [RISOLTO] aggiorna tabella da select option asp classic Classic ASP 7
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Problema insert valori apostrofati MySQL 1
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
G [MS Access] Gestione biglietti [RISOLTO] MS Access 2
G [MS Access] Casella combinata & Query [RISOLTO] MS Access 4
G [MS Access] Query mese corrente con conteggio [RISOLTO] MS Access 2
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
C [RISOLTO][PHP] Errore di sintassi PHP 8
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
Kolop [RISOLTO][PHP] Problema Pagination PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
N [PHP] Utilizzo variabili di sessione [Risolto] PHP 13
Tommy03 [RISOLTO][PHP] Webserver o devserver? PHP 2
Sergio Unia Recupero dati da una vecchia versione MySql [Risolto] MySQL 4
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1
A [RISOLTO]Inserimento Immagini da pc a MySql PHP 15
A [PHP] RISOLTO Invio Mail con Tabella PHP 2
felino Risolto - [Wordpress][WooCommerce] PayPal Checkout e campi di fatturazione WordPress 2
elpirata [PHP][RISOLTO] Sommare gli importi estratti da un ciclo while PHP 3
elpirata [PHP][RISOLTO] Effettuare la somma dei tempi di lavorazione PHP 3
elpirata [PHP] [RISOLTO]Sovrascrivere testo in una tabella PHP 2
A [RISOLTO]Recuperare dati inviati con json tramite php PHP 4
C [RISOLTO][PHP] Passaggio variabili senza refresh di pagina PHP 7
elpirata [PHP][RISOLTO] Errore di tipo Notice: Undefined index - Come risolvere quando si hanno tante var PHP 10
S Problema in PHP per invio file XML - RISOLTO- PHP 8
A [Javascript] [RISOLTO] Doppio "submit", in uno stesso "Form" , che puntino ad "action" diversi Javascript 1
marino51 [Risolto]videochat di messenger ha smesso di funzionare sul telefonino Smartphone e tablet 1
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
ken_korn [Javascript][Risolto] browser.tab.Tabs.favIconUrl non funziona Javascript 5

Discussioni simili