Slideshow a scorrimento automatico v2.0
Elegante galleria di testo e/o immagini con effetto a scorrimento automatico
[ANTEPRIMA]Funzionalità
Potrete realizzare una elegante galleria di testo e/o immagini con effetto a scorrimento, ottenuto cliccando gli appositi label presenti alla base della galleria stessa; In più è stata inserita anche un interazione con l'
FFUpload che all'upload delle immagini ti permetta di generare una slideshow automaticamente.
Installazione Script
L'installazione dello script è possibile attraverso il
pannello EasyScript, tramite
questo link. Per aggiungere lo script al proprio forum bisogna cliccare sul pulsante
Installa presente sotto l'anteprima dello script: "Slideshow a scorrimento automatico"
Configurazione Auto.
Per l'installazione potete usufruire del comodo
GENERATORE, che vi fornirà tutti i codici necessari per far funzionare correttamente lo script, automaticamente il generatore inserirà la modalità scorrimento automatico, per disattivarla basta premere l'icona degli ingranaggi (
) e deselezionare la seguente opzione: "Attiva scorrimento automatico".
Configurazione Man.
Per tutti coloro che non volessero usufruire del generatore, inserisco sotto spoiler i codici e le procedure da seguire per modificare lo slideshow e aggiungere nuovi pannelli:
In
Amministrazione->Grafica->Colori e Stili inserite:
CODICE
/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
.slideshow {width: 580px; padding: 10px; margin: 10px auto; text-align: center}
.slideshow .mask {width: 100%; overflow:hidden}
.slideshow .slides {background: #F7F7F7; padding: 10px; border: 2px solid #EDEDED; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 0 rgba(0, 0, 0, .1)}
.slideshow .slide_content {position: relative; width: 500%; -webkit-transition: margin 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: margin 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: margin 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: margin 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: margin 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
.slideshow .pannello {width: 20%; float: left; font-family: arial; font-size: 12px; color: #646464; text-shadow: 0 1px 1px rgba(255, 255, 255, .7)}
/*FIX DISCUSSIONI*/
.color .slideshow > br, .color .slideshow > * > br, .color .slideshow > * > *>br, .color .slideshow > * > *>*>br {display:none}
/*PERSONALIZZAZIONE PULSANTI*/
.slideshow .active {margin-top: 5px}
.slideshow .active label {display: inline-block; width: 21px; height: 21px; border-radius: 1em; background: #F7F7F7; border: 2px solid #EDEDED; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1); margin: 5px; cursor: pointer}
.slideshow .active label:hover {background: #FFF}
.slideshow .active label.checked {background: #D2E9F1;}
Dove volete che compaia la slideshow inserite:
CODICE
<div class="slideshow new_version"> <!-- Radio --> <div class="slides"> <div class="mask"> <div class="slide_content"> <div class="pannello p1"> <!-- Pannello 1 --> CONTENUTO PANNELLO 1 </div> <div class="pannello p2"> <!-- Pannello 2 --> CONTENUTO PANNELLO 2 </div> <div class="pannello p3"> <!-- Pannello 3 --> CONTENUTO PANNELLO 3 </div> <div class="pannello p4"> <!-- Pannello 4 --> CONTENUTO PANNELLO 4 </div> </div></div></div> <div class="active get_panel"><!--Label--> <label class="for_pan1"></label> <label class="for_pan2"></label> <label class="for_pan3"></label> <label class="for_pan4"></label> </div> </div>
In caso vogliate inserire la slideshow in un post, dovrete
rimuovere i commenti HTML (<!-- Contenuto -->
;
Come aggiungere ulteriori pannelli In primo luogo sarà necessario agire sul codice HTML. Aggiungete Aggiungiamo poi, dopo i DIV dei pannelli, questo ulteriore blocco:
CODICE
<div class="pannello p4"> <!-- Pannello 4 --> CONTENUTO PANNELLO 4 </div>
avendo cura, anche qui, di rinominare Pannello 4 in
Pannello 5, e "pannello p4" in
"pannello p5". Infine, aggiungete
CODICE
<label class="for_pan4"></label>
dopo i LABEL, rinominando anche qui "for_pan4" in
"for_pan5". Se avete eseguito tutto correttamente, il vostro codice HTML sarà:
CODICE
<div class="slideshow new_version"> <!-- Radio --> <div class="slides"> <div class="mask"> <div class="slide_content"> <div class="pannello p1"> <!-- Pannello 1 --> CONTENUTO PANNELLO 1 </div> <div class="pannello p2"> <!-- Pannello 2 --> CONTENUTO PANNELLO 2 </div> <div class="pannello p3"> <!-- Pannello 3 --> CONTENUTO PANNELLO 3 </div> <div class="pannello p4"> <!-- Pannello 4 --> CONTENUTO PANNELLO 4 </div> <div class="pannello p5"> <!-- Pannello 5 --> CONTENUTO PANNELLO 5 </div> </div></div></div> <div class="active getlabelpanel"><!--Label--> <label class="for_pan1"></label> <label class="for_pan2"></label> <label class="for_pan3"></label> <label class="for_pan4"></label> <label class="for_pan5"></label> </div> </div>
In caso si voglia inserire la modalità automatica, vi basterà inserire il seguente input subito dopo l'apertura della slideshow:
CODICE
<input type="hidden" class="automatic_s" value="4">
dove all'interno di value="", dovranno essere inseriti i secondi (in questo caso
4). Esempio di come dovrebbe essere inserito il codice: [SPOILER]
CODICE
<div class="slideshow new_version"> <input type="hidden" class="automatic_s" value="4"> <!-- Radio --> <div class="slides"> <div class="mask"> <div class="slide_content"> <div class="pannello p1"> <!-- Pannello 1 --> CONTENUTO PANNELLO 1 </div> <div class="pannello p2"> <!-- Pannello 2 --> CONTENUTO PANNELLO 2 </div> <div class="pannello p3"> <!-- Pannello 3 --> CONTENUTO PANNELLO 3 </div> <div class="pannello p4"> <!-- Pannello 4 --> CONTENUTO PANNELLO 4 </div> </div></div></div> <div class="active get_panel"><!--Label--> <label class="for_pan1"></label> <label class="for_pan2"></label> <label class="for_pan3"></label> <label class="for_pan4"></label> </div> </div>
Personalizzazioni CSS
.slideshow {width: 580px; padding: 10px; margin: 10px auto}
Consente di personalizzare lo stile della galleria.
.slideshow .slides {background: #EEE; padding: 10px; border: 3px solid #CCC; border-radius: 5px}
Consente di personalizzare lo stile del riquadro che contiene i vari pannelli.
.slideshow .active label {display: inline-block; width: 21px; height: 21px; border-radius: 1em; background: #F7F7F7; border: 2px solid #EDEDED; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1); margin: 5px; cursor: pointer}
.slideshow .active label:hover {background: #FFF}
.slideshow .active label.checked {background: #D2E9F1}
Consente di personalizzare lo stile dei label (i pallini alla base della galleria).
background: #5690AD identifica il colore del pallino corrispondente al pannello attualmente visualizzato.
Updates
UPDATE 04.02.2018 Il codice è stato aggiornato: Abbiamo reso la slideshow compatibile con la FFMobile, In più abbiamo permesso l'inserimento di più slideshow (anche nelle discussioni), con facilità e senza sforzi; Qui trovate anche il nuovo GENERATOREUPDATE 27.03.2013 E' stato realizzato un GENERATORE per semplificare l'aggiunta di nuovi pannelliCredits
Il ForumFree Magazine
non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum per questo script. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (
è fatto invece severo divieto di rimuovere i crediti presenti nel codice):
HTML
<a href="http://ffmagazine.forumfree.it/?t=65226584">Slideshow a scorrimento automatico</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> e <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum
lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:
HTML
<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Slideshow a scorrimento automatico" href="http://ffmagazine.forumfree.it/?t=65226584"><b>Slideshow a scorrimento automatico</b></a> Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> e <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>. Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>
.
