Supporto volontario e collaborativo per Joomla!® in italiano

Una slideshow veramente.... incantevole!

logo
ENHANCED...avanzata, così ha deciso di chiamarla il suo creatore. Ma io, giocando un poco con le parole, la chiamerei ENCHANTED... incantata. Vedrete che non mi darete torto. Veramente incantevole la visione delle immagini in questa slideshow. Facilissima da configurare e precisa nell'esecuzione. Vediamola....



Si tratta di un modulo che , come dicevo, è 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 Enhanced Image Slider


i parametri del modulo
Che sia una estensione avanzata lo vediamo subito appena apriamo il modulo per configurarlo.

Ci appare subito un saluto di benvenuto nella nostra schermata di configurazione.

Ci sono un primo gruopo 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

Articolo scritto da tonicopi - Joomla Css Zen Garden


Una slideshow veramente.... incantevole!

ENHANCED...avanzata,così ha deciso di chiamarla il suo creatore.Ma

io, giocando un poco con le parole, la chiamerei ENCHANTED...

incantata. Vedrete che non mi darete torto. Veramente incantevole

la visone delle immagini in questa slideshow. Facilissima da

configurare e precisa nell'esecuzione. Vediamola....


Si tratta di un modulo che , come dicevo, è 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.
http://www.lernvid.com/downloads/joomla-module/355-lv-enhanced-imag

e-slider.html

E si carica....

Dico subito quello che fa così vedi se è il caso di continuare

nella lettura del'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.

Che sia una estensione avanzata lo vediamo subito appena apriamo il

modulo per configurarlo.

Ci appare subito un saluto di benvenuto nella nostra schermata di

configurazione.

Ci sono un primo grupopo di parametri che riguardano la

configurazione del contenitore dove appriranno le nostre immagini.

In WIDTH of slider (pixel) inseriremo la larghezza della slideshow:

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 slider,

qualora vogliamo farle apparire in misura ridotta. Oppure

inseriremo le effettive dimensioni delle nostre immagini se le

pubblicheremo in dimensioni reali senza ingrandimento al clic.

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 immagine inserite.

Decideremo poi se far apparire o meno i pulsanti Next button, Prev

button e Number buttons.

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


Vediamo adesso in Images come gestire le immagini.

In IMAGE-FOLDER to slide inseriremo la strinca con la path della

cartella dove inseriremo le nostre. Mettiamo che noi caricheremo le

immagini in una cartella dentro la cartella images/stories che

chiamiamo slides,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. Possiamo anche andarci a prendere le

immagini in un altro dominio tipo:

http://www.altrodominio.it/images/

Sempre ricordandoci di aggiungere lo slash finale. Ma questo metodo

non sono riuscito ad applicarlo.

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.

Nella sezione Colors andiamo ad impostare tutte le regole del css

che riguardanoi appuntoi colori. Non occorre neppure conoscere il

codice esadecimale perchè per ciascuna opzione ci apparira un

color-picker che ci aiuterà nella scelta. Potremo così

personalizzare molto bene e molto comodamente tutti icolori della

nostra slideshow.

Infine potremo decedere in Other se usare la compressione degli

script lasciando su Si Use Javascript Compression. Impostazione

consigliata perchè velocizza il funzionamento della slideshow

Possimao decidere di centrare le immagini in CENTER the slider?  

anche se io consiglio di inserire immagini tutte della stessa

dimensione o almeno 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!












CommentaCommenta questo articolo sul forum