Vai ai contenuti
Creare una slideshow con immagini in dissolvenza

Creare una slideshow con immagini in dissolvenza


Per gli amanti del codice di programmazione, ecco come poter realizzare un passaggio di immaginin in dissolvenza all'interno del proprio sito EZweb. Il codice ci permette di inserire alcune immagini file manager edi richiamarle attraverso il javascript per visualizzarle in dissolvenza nelle colonne, nel corpo pagina o nel piede di pagina. Ecco come procedere:

 

1. Carichiamo le immagini nel file manager

Nel nostro esempio utilizziamo 3 immagini tipo, come quelle che vediamo riportate di seguito. Utilizziamo immagini della stessa dimensione, per cui prima di procedere elaboriamone le misure con un qualunque programma di grafica in nostra dotazione. Una volta pronte le immagini, accediamo al nostro Pannello di Amministrazione, alla finestra corrispondente alla Pagina, News, Articolo, Scheda nella quale desideriamo caricare la slideshow.



test  test  test

Immagini di esempio da inserire nella slideshow



Apriamo l'Editor nel box dei contenuti attraverso il pulsante INSERISCI IMMAGINE e carichiamole in una cartella che nomineremo ad esempio "Slide".


2. In seriamo il codice javascript

Una volta inserite le nostre immagini nel file manager accediamo all'editor del codice, cliccando sulla funzione "HTML" dell'Editor di contenuti. All'interno della finestra HTML copiamo il seguente codice:


<script type="text/javascript">
$(function(){
    $('#show1 img:gt(0)').hide();
    setInterval(function(){$('#show1 :first-child').fadeOut().next('img').fadeIn().end().appendTo('#show1');}, 3000);
});
</script>

<div id="show1"  class="fadein" style="height: 156px; width: 201px;">
  <img src="/files/immagini/slide/immagine1.jpg" />
  <img src="/files/immagini/slide/immagine2.jpg" />
  <img src="/files/immagini/slide/immagine3.jpg" />
</div>

<div class="clear">&nbsp;</div>


Una volta inserite queste stringhe possiamo editarne i parametri in questo modo:

  • Il codice numerico in quarta riga corrisponde all'intervallo di tempo in millisecondi tra una slide e l'altra (3000=3secondi);
  • "show1" in ottava riga indica il nome generico che associamo alla slideshow, possiamo anche rinominarlo ma in tal caso il termine #show1 va rinominato anche nel codice soprastante, all'interno dello script;
  • I valori in pixel esprimono la dimensione della slideshow, quindi la dimensione delle singole immagini che ne fanno parte (nell'esempio abbiamo 156px di altezza e 201px di larghezza);
  • l'ottava, la nona e la decima riga rappresentano il numero di slide presenti nella slideshow, nel nostro caso 3 slide. Possiamo inserire in ciascuna riga i nomi delle immagini che compongono la slideshow, una per ciascuna riga. In caso di necessità possiamo aggiungere una o più righe per aumentare il numero di slide, tenendo presente che un eccesso di immagini comporta un'inevitabie appesantimento della pagina sulla quale la slideshow viene inserita.


3. Salviamo il nostro progetto

Una volta effettuata la configurazione dei parametri dello script sopradescritti, chiudiamo la finestra "HTML" cliccando sul pulsante "Aggiorna" e torniamo quindi nella finestra dell'Editor. Naturalmente nella Finestra non visualizzeremo l'animazione ma semplicemente l'elenco delle immagini inserite, a cascata. A questo punto salviamo la pagina.



3. Verifichiamo la slideshow

La nostra slideshow a questo punto è pronta, non dobbiamo far altro che accedere al nostro sito web e verificare il suo corretto funzionamento. Qui a destra, un esempio di quello che dovremmo visualizzare nel caso avessimo inserito e configurato tutto correttamente.

 

Essendo una procedura al di fuori delle normali funzioni dell'Editor di contenuti è molto probabile, anche in funzione del brawser di navigazione che utilizziamo, che la visualizzazione dei medesimi nella finestra del Pannello non corrisponda esattamente a quello che in realtà vedremo nel sito web. Pertanto, nel realizzare una slideshow utilizziamo sempre pagine nascoste provvisorie, in modo da verificarne passo passo il corretto funzionamento sul sito, ed infine pubblichiamole nel menu principale e lavori terminati.

 

 

 

Anteprima della slideshow


EZweb è un prodotto NEAMEDIA snc - Agenzia di Comunicazione Integrata
Piazza Filippo Masci 4 - 66023 Francavilla al Mare (Chieti, Abruzzo) • Tel.: +39 085 4917052 • Fax: +39 085 4917052 • P.I/C.F 02046780694 • info@ezweb.it

 EZweb

Copyright © NEAMEDIA 2003-2018 • Sono vietati l'utilizzo e la riproduzione integrale o parziale dei contenuti grafici e testuali presenti su questo sito.

Realizzato con CMS EZweb, byNEAMEDIA snc