|
Si tratta proprio di una galleria fotografica molto carina e assolutamente semplice da configurare. Vediamola....
Si tratta di un modulo che è stato chiamato Enhanced Image Slider dal suo sviluppatore. Che si tratti di una slide show avanzata è fuori discussione e ve ne accorgerete subito al primo impatto. Si scarica da qui.
Una volta scaricato come al solito lo installiamo cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.
Dico subito quello che fa, così vedi se è il caso di continuare nella lettura dell'articolo. Questo modulo è un visualizzatore avanzato di immagini come diapositive che, se cliccate, si ingrandiranno con un piacevole effetto lightbox. Niente associazione ad altri link che aprano nuove pagine dunque. Ma per quanto riguarda la facilità di realizzare una slideshow di qualsiasi dimensione, veramente gradevole e precisa, questo modulo è imbattibile. Aggiungiamoci che è compatibile con tutti i principali browser e che non ho notato conflitti con altre estensioni presenti nel sito, pur utilizzando JQuery.
Configurare il modulo
Che sia una estensione avanzata lo vediamo subito appena apriamo il modulo per configurarlo.
Ci appare per primo un saluto di benvenuto nella nostra schermata di configurazione.
Ci sono un primo gruppo di parametri Slider setting che riguardano la configurazione del contenitore dove si apriranno le nostre immagini.
In WIDTH of slider (pixel) inseriremo la larghezza della slideshow mentre in HEIGHT of slider (pixel) inseriremo l'altezza.
E' opportuno, (occorre dirlo?) che manteniamo le proporzioni delle nostre foto in queste che saranno le dimensioni delle diapositive, qualora vogliamo farle apparire in misura ridotta. Oppure inseriremo le effettive dimensioni delle nostre immagini se le pubblicheremo in dimensioni reali, senza ingrandimento al click.
In FLOAT the slider potremo impostare il float che verrà attribuito al contenitore delle diapositive, senza bisogno di scomodarci a farlo nel css. Ecco che potremo per esempio assegnare un float left che ci consentirà di mostrare più slideshow nella stessa riga.
Decideremo poi se usare o meno gli elementi di navigazione nella slideshow impostando su Si o No use navigation.
In HEIGHT of navigation (pixel) stabiliremo l'altezza dello spazio dove appariranno i pulsantini per la navigazione. Cosa molto utile nel caso avessimo bisogno di più righe di pulsanti per via del numero di immagini inserite.
Decideremo poi se far apparire o meno i pulsanti Next button, Prev button e Number buttons.
Via con gli effetti speciali...
Nella sezione Effects decideremo con quale effetto avverrà la transizione della diapositiva scegliendo da un vasto menu a tendina nel box choose EFFECT. Non dico vasto tanto per dire. Gli effetti disponibili sono 28. Se lasciamo impostato su RANDOMIZE all effects ce li mostrerà tutti uno per uno.
In PAUSE in milliseconds scriveremo appunto in millisecondi il tempo di permanenza di una diapositiva mentre in DURATION of effect in milliseconds imposteremo il tempo di transizione della diapositiva. Secondo me sono ottimi i tempi che troviamo di default.
In PAUSE on mouseover decideremo se bloccare lo scorrimento delle diapositive al mouse over, cioè quando ci saremo sopra col puntatore de mouse.
In RANDOM slide images decideremo se far apparire le diapositive in ordine casuale. Se lasciamo su No le diapositive appariranno ad ogni aggiornamento della pagina in ordine alfabetico.
Gestire le immagini
Vediamo adesso in Images come gestire le immagini.
In IMAGE-FOLDER to slide inseriremo la stringa con la path della cartella dove inseriremo le nostre foto. Mettiamo che noi caricheremo le immagini in una cartella che chiamiamo slides dentro la cartella images/storie, via ftp o da gestione media di Joomla! è indifferente. Dovremo inserire la path dentro questo box in questo modo:
images/stories/slides/
stando solo attenti a NON mettere la / all'inizio ma DI METTERLA alla fine del percorso.
Se impostiamo su Si STRETCH images costringeremo le nostre foto ad adattarsi alle dimensioni della slideshow come abbiamo determinato sopra.
In Links andremo a stabilire se usare la possibilità di collegare l'immagine che appare nella slideshow alla vera immagine che abbiamo caricato impostando Si o No in Use ImageLINKS ?.
Subito sotto stabiliamo se far aprire l'immagine sulla stessa o in una nuova finestra in links opening mentre in Open links in modalbox decidiamo se vogliamo mostrarla in un lightbox.
Colori a scelta
Nella sezione Colors andiamo ad impostare tutte le regole del css che riguardano appunto i colori. Non occorre neppure conoscere il codice esadecimale perchè per ciascuna opzione ci apparirà un color-picker che ci aiuterà nella scelta. Potremo così personalizzare molto bene e molto comodamente tutti i colori della nostra slideshow.
Infine potremo decidere in Other se usare la compressione degli script lasciando su Si Use Javascript Compression. Impostazione consigliata perchè velocizza il funzionamento della slideshow
Possiamo decidere di centrare le immagini in CENTER the slider? anche se io consiglio di inserire immagini tutte della stessa dimensione o delle stesse proporzioni se maggiori della dimensione del contenitore dove inseriamo la slideshow.
C'è infine la possibilità di dare un numero esclusivo in Unique Module ID. Ricordiamoci di cambiare questo numero se duplichiamo il modulo e lo pubblichiamo in un'altra posizione nella stessa pagina.
Per ultimo c'è la possibilità di inserire un Suffisso classe CSS modulo a mezzo del quale possiamo personalizzare la grafica oppure renderla uguale a quella degli altri moduli del nostro sito.
Fatto questo non ci resta che salvare le impostazioni del modulo, pubblicarlo in una posizione del nostro template e andare nel front end a godersi lo spettacolo!
Vedi una demo della slideshow
|
