jQuery easy slider

**scudobravo** · 03-03-2009, 14:12

Salve a tutti/e,

mi sono scaricato questo esempio (http://javascript.html.it/demo/javas...89/esempio.htm) che usa jQuery e nelle opzioni ho messo scorrimento orizzontale, lo preferisco. Vorrei però eliminare l'effetto slide-in e che cliccando su next apparisse l'immagine col fade-in. È possibile? Qualcuno sa come?

**blekm** · 03-03-2009, 14:21

qua ci sono diverse demo e una bella spiegazione

http://cssglobe.com/post/4004/easy-s...in-for-sliding

guarda se trovi qualcosa

**scudobravo** · 03-03-2009, 14:50

Sì avevo già visto ma manca. Ho visto mille altri script per gallerie immagini, ma quello che cerco forse é troppo semplice, ma non riesco a farlo perché in javascript sono negato.

Vorrei una lista di immagini che scorrono cliccando sulle frecce, senza alcun effetto (o al limite pre-caricamento con fade-in) e quando si arriva all'ultima foto, la freccia next scompare. Esiste già fatto? O qualcuno sa dirmi come farlo?

**blekm** · 03-03-2009, 15:39

Originariamente inviato da scudobravo
Vorrei una lista di immagini che scorrono cliccando sulle frecce, senza alcun effetto (o al limite pre-caricamento con fade-in) e quando si arriva all'ultima foto, la freccia next scompare. Esiste già fatto? O qualcuno sa dirmi come farlo?

le frecce scompaiono se sei all'ultima immagine, almeno dalle demo che ho visto nel link che ti ho postato.

per l'effetto fate-in

**Straystudios** · 03-03-2009, 20:09

In effetti potrebbe essere questa l' occasione per te, che mi sembri ben disposto, per cominciare a mettere insieme qualcosa di JS manualmente; e imparare delle basi che poi aiutano anche a seguire/adattare script più complessi ripresi tal-quali dal web.

Processa questo Codice di poche righe: copi-incolli sul Blocco Note di Windows (o altro Editor di Testo) e da File fai Salva-con-nome... nomechevuoi.html
Nel contempo, compila l' Array inserendo l' indirizzo di qualche file d' immagine che puoi avere sul computer, o da Internet, tra gli apici "" in questo modo:

  photos[0] = "percorso/fotonumero.jpg";

magari aggiungendone di più, cioè aggiungendo altri articoli dell' Array (items of Array).

codice:

<html>
<head><title>URL from Array to SRC</title>

<script type="text/javascript">

var photos = new Array();
 photos[0] = "";
 photos[1] = "";
 photos[2] = "";

</script>

</head>
<body bgcolor="#900000" text="#E3E3E3" onLoad=';'>



<div align="center">

 <input value="assegna URL" type="button" onClick='document.display.src=photos[2];'>
 


 [img][/img]

</div>


</body>
</html>

Abbiamo un Tag che ci farà da visualizzatore: <img name="display" src="">
che inizialmente non mostrerà niente, in quanto l' Attributo SRC è privo di Valore.
Ma è stato corredato di un NAME="display"
che consente ad una istruzione JavaScript, di individuarlo nel Documento, prendere in considerazione il suo Attributo SRC ed infine di assegnrlgli un Valore.
Questa l' istruzione, che viene attivata da un pulsante:

document.display.src=photos[2];

Il Valore che assegna a SRC non è un URL direttamente, un URL scritto "in parola", ma è un riferimento ad un articolo dell' Array photos[2]
Con questo termine e sostituendone il numero tra [], possiamo accedere ai diversi articoli dell' Array.

Perché questa capriola, perché non maneggiare gli URL direttamente?
Perché in quest' altro modo, tutto quello che deve cambiare per sfogliare le diverse foto, è un numeretto.
Un numero, lo possiamo incrementare o decrementare con gli operatori numerici JavaScript.
Sostituiamo la nostra istruzione al pulsante con:

onClick='document.display.src=photos[x]; x=x+1;'

dove abbiamo sostituito il numero "in chiaro" con una x e dopo facciamo eseguire una seconda istruzione x=x+1
La x è una variabile ovverossia una "cosa che si può tradurre in "qualcosa" (un' altra capriola ...).
Nello SCRIPT allora, dichiariamo che questa variabile equivale a zero, scrivendo:

var x = 0;

lo possiamo fare o prima o dopo l' Array.
Al primo click sul pulsante quindi, sarà photos[0] ad essere prelevato ed inviato al SRC di IMG NAME="display"
anche però ri-dichiarando che da ora la x varrà ... il suo attuale valore, più uno.
Al secondo click, ci troveremo che x=0+1 cioè x=1 e visualizzeremo la foto data da photos[1] e così via.
Abbiamo già realizzato un pulsante per sfogliare in avanti; che però allo stato attuale, continua a far crescere il valore di x anche oltre la disponibilità dell' Array.

**scudobravo** · 04-03-2009, 11:23

Ciao sei mitico, ho capito e imparato, ma voglio andare avanti per vedere di ottenere un miglior risultato. Dunque, sperimentando ho provato ad aggiungere un bottone prev, con valore x-1, per vedere se tornava indietro, ma non é proprio così perché é come se perdesse il conto, ovvero non sapesse più a che numero é e quindi da undefined e non restituisce nessuna foto. Poi vorrei far sparire il bottone prev alla prima foto e next all'ultima foto, ti riesce?

codice:

<script type="text/javascript">
var x = 0;

var photos = new Array();
 photos[0] = 'public/people/1.jpg';
 photos[1] = 'public/people/2.jpg';
 photos[2] = 'public/people/3.jpg';

</script>
</head>

<body>

<div align="center">
 <input value="prev" type="button" onClick='document.display.src=photos[x]; x=x-1;'>
 <input value="next" type="button" onClick='document.display.src=photos[x]; x=x+1;'>
 


 [img]public/people/0.jpg[/img]

</div>

**Straystudios** · 04-03-2009, 14:34

Anche il tuo pulsante Prev funziona, per come può funzionare; cioè a scopo dimostrativo.
Entrambi lasciano la x eccedente quando termina l' istruzione, per cui occorrono DUE click con l' altro pulsante per riguadagnare la posizione precedente; con un click "a vuoto" quando si è arrivati all' ultima foto. La x assume anche valori negativi.

È chiaro che dovremo comunque fare in modo di non eccedere la lunghezza dell' Array ne' sopra ne' sotto, coi valori di x

Puoi tenere sott' occhio cosa succede "sul campo" inserendo degli alert() nel corso dell' esecuzione JS; cosa che probabilmante hai già fatto:

onClick='document.display.src=photos[x]; alert(x); alert(photos[x]); x=x-1; alert(x);'

IF Statement
JavaScript ci consente di condizionare un' esecuzione; condizionarla al verificarsi o meno di una determinata situazione/condizione, appunto.

Noto che hai già capito di mettere l' immagine di partenza nell' HTML ordinario; ok, allora le nuove istruzioni possono essere queste, con gli operatori x=-1; e x=+1; all' inizio, questa volta:

onClick='x=x-1; if(x==-1){x=0}; document.display.src=photos[x];'
onClick='x=x+1; if(x== 3){x=2}; document.display.src=photos[x];'

Si infrappone un dichiarazione/asserzione if (if vuol dire appunto se, ipotetico) che prima di lasciare acquisire la x alla prossima istruzione, la controlla.
Se riscontra che, dopo l' operatore x=-1; questa assumerebbe valore -1, cioè la photos[0] l' abbiamo già raggiunta, e non vogliamo "andar sotto", allora { forza la x a mantenere valore 0 zero };

Analoga logica, per il pulsante Next

Con questi statement, i pulsanti si fermano a "fine corsa".
Ma possiamo anche dargli un' istruzione diversa da eseguire, nel caso l' ipotesi risulti vera (true).

Con: if(x== 3){x=0};   al pulsante Next, torneremo sul primo articolo dell' Array, invece di andare a cercare un photos[3] che non esiste.
Con: if(x==-1){x=2};   al pulsante Prev, ci riposizioniamo sull' ultima invece che andare sotto-zero.

Con questi altri statement otteniamo una slide-show rotatoria.

  if ( ipotesi da verificare ) { istruzione da eseguire se l' ipotesi è stata riscontrata };

Le parentesi graffe si ottengono dalla tastiera con   AltGr Maiusolo [
  [   o   ] con   AltGr+[   o   AltGr+]
o te le copi da qua

Come istruzione tra le graffe, potremmo anche dare quella per far scomparire un pulsante:
this.style.display="none"; che poi però bisogna in qualche modo far riapparire ...
Ma per oggi hai già da fare assai ...

**Straystudios** · 04-03-2009, 19:55

=     assegnazione
==  comparazione

È importante, quando usiamo l' uguale nell' ipotesi dell' if-statement lo dobbiamo mettere doppio, e verrà eseguita la comparazione per verificare se è il primo uguale al secondo termine.
Se invece scriviamo if(x=-1){x=0} ci ritroveremo con x=-1 ad ogni click; le parentesi tonde () benché sanciscano un' ipotesi, non prevengono l' errore: = rende uguale.

Un altro modo di compilare un Array.

var photos = new Array('public/people/1.jpg', 'public/people/2.jpg', 'public/people/3.jpg');

Si potrà accedere agli URL ancora con   photos[0] photos[1] photos[2]
ed essendo ammesso andare a capo, si può anche scrivere così:

var photos = new Array(
            'public/people/1.jpg',
            'public/people/2.jpg',
            'public/people/3.jpg',
            'public/people/4.jpg',
            'public/people/5.jpg'   //senza virgola perché l' ultimo.
            );

quantunque io preferisca la forma precedente.
In entrambe le forme, si possono adoperare apici singoli ' o doppi " .

array.length - Lunghezza Array.
Se aggiungiamo altre foto (o ne togliamo) dall' Array, dovremmo anche andare ad adeguare i numeretti negli if-statement.
Quest' ultimo è un Array di 5 articoli (5 items) accessibili alle posizioni da [0] a [4]
Per fissare il "fine corsa" ai pulsanti, richiederebbe:

Next   onClick='x=x+1; if(x== 5){x=4}; document.display.src=photos[x];'
Prev   onClick='x=x-1; if(x==-1){x=0}; document.display.src=photos[x];'

Il Prev rimane invariato; sono i numeretti nel Next che vanno tenuti aggiornati.
Possiamo fare in modo che ciò avvenga automaticamente, codificando:

Next   onClick='x=x+1; if(x== photos.length){x=photos.length-1}; document.display.src=photos[x];'

photos.length ci ritorna di quanti articoli è composto l' Array photos con un numero che è detto appunto, lunghezza dell' Array photos e si adegua alla compilazione.
Puoi vedere in azione questa proprietà JS anche mettendo questo pulsante da qualche parte nel BODY:

<input value="Quanti articoli in   photos" type="button" onClick='alert(photos.length);'>

**Straystudios** · 06-03-2009, 02:59

Originariamente inviato da scudobravo
... Poi vorrei far sparire il bottone prev alla prima foto e next all'ultima foto, ti riesce?

Ora ti posto un esempio che interviene anche su quei pulsanti; li disabilita, non li nasconde, ma con una semplice modifica può fare anche questo. Intanto vedi com' è il disabled.

Ho un po' modificato la nomenclatura, delle variabili, del Tag IMG che ci fa da visualizzatore, ora si chiama img name="viewer" ed inoltre ho assegnato un ID   id="prev" id="next" ai pulsanti perché ora anch' essi sono oggetto di esecuzioni JS; e JS deve poterli individuare, con getElementById("prev") (ottieniElementoTramiteId).

Le istruzioni JS cominciano a crescere e non le lasciamo più sul pulsante, si riuniscono in una funzione e al pulsante, al gestore d' evento ONCLICK si lascia solo richiamare quella funzione:

function unNome(){
  // istruzioni JavaScript;
 }

onClick='unNome();'

codice:

<html>
<head><title>Gallery JS Browser</title>

<script type="text/javascript">

var pictures = new Array();
 pictures[0] = "http://www.cameraworkphotographers.com/008ITALIA.jpg";
 pictures[1] = "http://www.cameraworkphotographers.com/004ITALIA.jpg";
 pictures[2] = "http://www.cameraworkphotographers.com/007ITALIA.jpg";
 pictures[3] = "http://www.cameraworkphotographers.com/005ITALIA.jpg";
 pictures[4] = "http://www.cameraworkphotographers.com/006ITALIA.jpg";
 pictures[5] = "http://www.cameraworkphotographers.com/003ITALIA.jpg";

 
var pic = 0; 

function back(){
 document.getElementById("next").disabled = false;
 pic = pic-1; 
 document.viewer.src = pictures[pic]; 
  
   if(pic==0){document.getElementById("prev").disabled = true;};

 document.getElementById("numb").value = pic+1;
 }


function forth(){
 document.getElementById("prev").disabled = false;
 pic = pic+1; 
 document.viewer.src = pictures[pic];
 
   if(pic==pictures.length-1){document.getElementById("next").disabled = true;};
 
 document.getElementById("numb").value = pic+1;
 }

</script>


<style type="text/css">
.push {
 background-color: #900000;
 color: white;
 }
</style>

</head>
<body bgcolor="#900000" text="#E3E3E3">



<div align="center">

 <table width="520"><tr>

  <td>
    <input value="Prev" type="button" class="push" id="prev" onClick='back();' disabled > 
    <input value="Next" type="button" class="push" id="next" onClick='forth();'> 
    <input value="1"    type="text"   class="push" id="numb" size="2"          readonly 
                                                style="border: 0px; text-align: right;" > / 6
    <hr>
  </td>
 </tr><tr>
  <td align="center">
    

  </td></tr>
 </table>

</div>


</body>
</html>

I pulsanti li puoi far sparire con l' istruzione (facciamo il caso del Prev):

document.getElementById("prev").style.display = "none";

nell' if-statement; e come prima istruzione nell' altra function :

document.getElementById("prev").style.display = ""; //che toglie il none se c'è.

ricordati che allora, anche nell' HTML il bottone Prev dovrà presentarsi con style="display: none;" al posto di disabled .

**pipinoilbreve** · 03-09-2011, 18:35

Qualcuno saprebbe dirmi come sostituire "previous" e "Next" con delle immagini rimuovendo il testo?

Grazie, filippo.

Discussione: jQuery easy slider

Strumenti discussione

Ricerca discussione

Visualizza

jQuery easy slider

Come si compila un Array. / Assegnazione di un Valore ad un Attributo.

IF Statement

Un esempio completo.

Permessi di invio