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
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!
Commenta questo articolo sul forum 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!