Supporto volontario e collaborativo per Joomla!® in italiano

DJ-ImageSlider per gallerie immagini di effetto

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 

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/.

Qui trovate la traduzione in italiano del componente.





 

Per seguire l'esempio scaricate i file DJ-ImageSlider ComponentDJ-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.

Immagine2Immagine3

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.

Immagine7Immagine8Immagine9

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.

Immagine12

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.

Immagine18Nel 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!).

Immagine19

 

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.







Immagine22Questa 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.

L'unico problema che ho riscontrato con il modulo è quando provo a caricarlo negli articoli tramite il comando nativo Loadposition. Per ovviare a questo si può usare un plugin tipo Modules Anywhere.

Immagine23



CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Manuel
Nome: Manuel
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Calendario articoli

Dicembre 2016
Lun Mar Mer Gio Ven Sab Dom
28 29 30 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1

Ultima versione di Joomla!®

downloadVer. 3.6.4 Stabile Italiana
Data di rilascio:25 Ottobre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: