DJ-ImageSlider per gallerie immagini di effetto

In questo articolo viene descritto come utilizzare il componente e modulo DJ-ImageSlider per realizzare semplici slideshow o più comlete gallerie di immagini con descrizioni e titoli. Diciamo subito infatti che questa ottima estensione permette di fare diverse cose a seconda delle esigenze. Inoltre da sottolineare che è completamente compatibile con tutti i browser compresi iPhone e iPad proprio perchè sfrutta HTML5 al posto di flash. Andiamo per ordine e comincia dal download che potete eseguire dal sito dello sviluppatore: http://www.design-joomla.eu/downloads/dj-imageslider.html. L'articolo si basa sull'utilizzo di Joomla 1.5.x ma l'estensione è disponibile anche per Joomla 1.6.x. La demo dell'estensione è visibile all'indirizzo http://dj-extensions.com/demo/dj-image-slider/.

Per seguire l'esempio scaricate i file DJ-ImageSlider Component e DJ-ImageSlider module. Una volta installato il componente, installate anche il modulo. Il modulo serve a visualizzare le gallerie che vengono definite mediante il componente e vedremo di seguito come. Entriamo quindi nelle impostazioni del componente. Vediamo che il componente ha 2 parti, Slides e Categories.

Prima definiamo 2 categorie, ad esempio "Categoria 1" e "Categoria 2". All'interno di ogni categoria possiamo definire diverse "Slide". Ogni slide non è altro che un link a qualcosa caratterizzato da un titolo, una descrizione ed un immagine. Creiamo subito una nuova slide che chiamiamo "Slide 1 di categoria 1" e nelle impostazioni vediamo nella parte sinistra la possibilità di inserire una immagine (nell'esempio il koala). Semplicemente si clicca sul tasto "immagine" e si seleziona il file.

Nella parte destra si seleziona il tipo di collegamento a cui deve puntare la slide: un item del menu del nostro sito, un URL esterno, etc.. A seconda della seleziona il campo sotto varia per poter fare la scelta successiva.

Per esempio se volessimo realizzare delle gallerie di immagini di eventi con date diverse, potremmo creare tante pagine nel sito dove vengono visulizzate le foto quanti sono gli eventi. Poi dovremmo creare le vaire slide che linkano alle diverse gallerie. Subito sotto sempre nella
parte destra si può aggiungere la descrizione della slide o galleria.

Per continuare con l'esempio creiamo altre slide simili alla prima dove inseriremo altre foto, descrizioni e diversi link. Vediamo ora come visualizzare il tutto traimte il relativo Modulo. Nella pagina moduli dovreste ave DJ Image Slider. Entrando nelle impostazioni troviamo a sinistra le solite scelte sul titolo, se visualizzare il modulo e la posizione.

A destra troviamo le impostazioni più importanti a partire dal primo campo "Slider Source". Con questo campo decidiamo se usare le informazioni provenienti dal componente oppure se vogliamo semplicemente visualizzare delle immagini contenute nella cartella indicata nel campo sotto "Image Folder". Iniziamo con il vedere l'uso del modulo alimentato dal relativo componente e quindi selezioniamo "Componente". Con "Slider Type" impostiamo se far scorrere le immagini in orizzontale, verticale e se semplicemnte le foto devono essere sostituite con una semplice transizione in dissolvenza. Il campo "Mootools" lasciamolo in auto e il campo "Link Image" in questo caso non serve perchè il comportamento del click sulla foto lo abbiamo già deciso quando abbiamo creato le slide dentro le categorie del componente (Articolo, menu item, URL, etc...). I campi del gruppo "FOLDER AS A SOURCE SETTING" le saltiamo perchè abbiamo scelto di usare il componente ed arriviamo quindi a selezionare quali gallerie (slides) visualizzare scegliendo la categoria di appartenenza. Possiamo decidere se vedere il titolo, la descrizione, il tasto "leggi tutto", se rendere attivo il link del titolo e della descrizione. Un campo importante per fini estetici è "Description limit" con il quale possiamo limitare il numero di caratteri visibili della descrizione in modo da evitare che occupi tutto lo spazio disponibile.

Nel gruppo di impostazioni "BASIC SLIDER SETTING" impostiamo tutte le prefrenze riguardo la vera e propria visualizzazione di immagini.

Tramite "slide width" impostiamo la larghezza della singola immagine, quindi se nel campo "Visible Images" c'è il valore 3, la larghezza totale del modulo sarà 280px per 3 = 840 px più il margine tra le foto impostabile nel campo "Space Between images". Possiamo inoltre limitare il numero di immagini/slides da caricare e la modalità di ordinamento. Infine campo fondamentale è "Slide effect" con il quale si cambia la curva di transizione temporale. Questa campo torna molto utile quando in unica pagina avete più moduli DJ slider che se impostati tutti con la stessa curva tempistica provocano un antiestetico effetto di sincronizzazione tra le foto che scorrono (provare per credere!).

Vediamo ora come usare DS Image Slider semplicemente tramite il modulo (possiamo anche non installare il componente). Creiamo una copia del modulo appena usato ed entraimo nelle impostazioni.

Questa volta nel campo "Slider Source" selezioniamo Folder e come effetto di scorrimento "Vertical". A questo punto dobbiamo solo indicare la cartella contenente le immagini che il modulo deve visualizzare (nell'esempio ho usato "dj_example"). Il campo link ha senso solo se abbiamo scelto nel campo "link image" il valore "Hyperlink". In questo caso ho scelto "Open image in modal" che comporta l'apertura a schermo intero della foto quando si clicca sopra l'immagine in stile Facebook. Si può anche mettere "Don't link" per disattivare del tutto la possibilità di click.

Il risultato è quello indicato sotto.

Commenta questo articolo sul forum