[v10] Avvio automatico Galleria miniature

[lemonsong]

Prendendo spunto da una richiesta presente su Answers, abbiamo scritto un codicino jQuery per rendere automatico l'avvio dello slider della galleria miniature. Al click sull'oggetto galleria, l'animazione si ferma.

Abbiamo provato questi due tipi di galleria:

• galleria miniature orizzontali - http://lemonsong.altervista.org/test_slider_thumbs/
• galleria miniature verticali - http://stesil.altervista.org/evo10/slider-miniature/

1. Identificazione dell'id
    Occorre identificare l'id della cella che contiene la galleria.
    Per questo scopo possiamo utilizzare ad esempio "Ispeziona codice" richiamabile con il tasto destro del mouse dall'anteprima di WS:

[ Guests cannot view attachments ]

2. Codice in HEAD
    In proprietà della pagina, esperto, prima della chiusura del tag </HEAD>

<script>
var numero = '1';            // numero dell'oggetto galleria miniature orizzontale
var timeScroll = '1000'; // durata effetto transizione di ogni miniatura in millisecondi
var timePause = '3000'; // intervallo tra una transizione e l'altra in millisecondi
var timeBack = '2000';   // durata effetto transizione di ritorno alla prima miniatura in millisecondi
</script>

<script src="files/slider_thumbs.js"></script>

Il numero in rosso presente nello script è contenuto nell'id dell'Oggetto Galleria (vedi punto 1).
L'ultimo file js collegato, relativo alla Galleria miniature orizzontale, è scaricabile qui: http://lemonsong.altervista.org/test_slider_thumbs/files/slider_thumbs.js
Per una Galleria miniature verticale occore invece utilizzare questo script: http://stesil.altervista.org/evo10/slider-miniature/files/slider_thumbs_ver.js
Ovviamente cambiando l'ultima riga di codice:

Codice:

Only registered users can see contents. Please click here to Register or Login.

3. L'oggetto HTML
  Alleghiamo lo script precedentemente scaricato attraverso la scheda Esperto di un Oggetto HTML e Widgets presente nella pagina.


 
I test sono stati effettuati con la versione 10.1.10.54
Questo script si può applicare ad una sola galleria per pagina.

Grazie a stesil per l'aiuto!

[lemonsong]

Aggiornamento per dispositivi mobili

Se si vuole fermare l'animazione anche allo scorrimento su touchscreen, questo è lo script da inserire in HEAD:

2. Codice in HEAD
    In proprietà della pagina, esperto, prima della chiusura del tag </HEAD>

<script>
var numero = '1';            // numero dell'oggetto galleria miniature orizzontale
var timeScroll = '1000'; // durata effetto transizione di ogni miniatura in millisecondi
var timePause = '3000'; // intervallo tra una transizione e l'altra in millisecondi
var timeBack = '2000';   // durata effetto transizione di ritorno alla prima miniatura in millisecondi
</script>

<script src="files/jquery.mobile.custom.min.js"></script>
<script src="files/slider_thumbs_touch.js"></script>

I due files js da collegare, sono scaricabili qui:

http://lemonsong.altervista.org/test_slider_thumbs/files/jquery.mobile.custom.min.js
http://lemonsong.altervista.org/test_slider_thumbs/files/slider_thumbs_touch.js


Testato con iPhone/Safari e tablet/Android/Chrome