-
.
Finalmente è disponibile un codice di slideshow anche nelle discussioni! Vi sistemo qui la versione a galleria immagini, con una breve guida per la sua compilazione/modifica. SPOILER (clicca per visualizzare)CODICE<div class="slideshow new_version autostart">
<input type="hidden" class="automatic_s" value="10">
<div class="slides">
<div class="mask">
<div class="slide_content" style="width: 600%;">
<div class="pannello p1" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div>
</div>
<div class="pannello p2" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div>
</div>
<div class="pannello p3" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div>
</div>
<div class="pannello p4" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div>
</div>
<div class="pannello p5" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div></div></div></div></div>
<div class="active get_panel">
<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>
GUIDA
1. Lo slideshow scorre automaticamente tra i pannelli ad una velocità di 10 secondi per pannello. La velocità si può modificare dal codice che metto in basso, cambiando dove c'è scritto "10" con i secondi a scelta. Si può comunque scorrere tra i pannelli con i pulsanti quadrati che stanno in basso.CODICE<div class="slideshow new_version autostart">
<input type="hidden" class="automatic_s" value="10">
2. Ogni stringa di codice come quella che segue rappresenta un pannello dello slideshow. Sono stati impostati perché contengano soltanto un'immagine di sfondo e non il testo. Se desiderate che ci sia anche un testo, vanno modificati e mi rendo disponibile a farlo. L'immagine copre l'interezza del pannello ma non uscirà mai fuori e si adatterà automaticamente alle misure impostate. Ho già fatto in modo che sia centrata sia verticalmente che orizzontalmente.CODICE<div class="pannello p1" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div>
</div>
3. Per modificare l'immagine, che per ora è una qualsiasi, bisogna sostituire il link del codice che segue e che metto in grassetto.
"background:url(www.akamai.com/site/im-demo/percep...g?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"
4. I pannelli per ora sono 5, ma è possibile aumentarli e diminuirli. Per diminuirli di uno, basta cancellare le due stringhe di codice qui sotto:CODICE<div class="pannello p5" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div></div>CODICE<label class="for_pan5"></label>
Per aumentarli, invece, è necessario aggiungere un nuovo pannello con questo codice che segue, facendo attenzione a modificare il div class="pannello p5" con il numero del nuovo pannello, che sarà 6, 7, 8 etc.CODICE<div class="pannello p5" style="width: 16.6667%;"><div style="background:url(https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true); background-size:cover; background-position-x:center; background-position-y:center; width:600px; height:400px"></div></div>
La stringa di codice va inserita con attenzione dopo i due dell'ultimo pannello e prima del codice che segue:CODICE</div></div></div>
<div class="active get_panel">
Vanno inoltre aggiunti i pulsanti, se si inserisce un nuovo pannello. Il codice da inserire è il seguente, facendo attenzione a modificare il label class="for_pan5" con il numero del nuovo pannello, che sarà 6, 7, 8 etc.CODICE<label class="for_pan5"></label>
Questo codice va inserito prima dei due /div conclusivi dell'intero codice.
5. I colori dell'intero slideshow non sono modificabili, sono impostati automaticamente per adattarsi alla skin del forum..
