Home JCEMediabox (ex Utilities)

Se ti piace quello che faccio e mi vuoi offrire una birra...

Cerca

Tophost
Questi ragazzi di tophost meritano di essere conosciuti ed aiutati: 10 giga di spazio web, perfetta compatibilità con Joomla! A 12 euro l'anno, iva compresa.
Parola di tonicopi

prova lightbox

Inserendo i link dentro un modulo di tipo html personalizzato e applicando lo stesso suffisso classe css modulo dei menu (nel caso del rhuk _menu) si ottiene un menu molto somigliante agli altri ma con l'apertura della nuova pagina in un lightbox

Utenti nel sito

 81 visitatori online

Login

far aprire un box da un menù laterale usando mediabox
PROVA LOGIN oppure
PROVA RICERCA
anche con un tasto rollover
clicca
 
JCE Utilities, ora JCE Mediabox - Inserire immagini con effetto lightbox
Valutazione attuale: / 158
ScarsoOttimo 
Scritto da tonicopi   
Sabato 28 Novembre 2009 22:17
Questo articolo è stato letto: 56645 volte

Questo plugin di JCE è davvero straordinario. Una volta che impariamo ad usarlo bene potremo rinunciare tranquillamente ad ogni altro plugin per inserire immagini qua e là nei nostri articoli con un gradevole effetto lightbox.

Si scarica dal sito del produttore l'ultima versione di JCE Mediabox (fino a poco fa si chiamava JCE Utilities).

Si presuppone che abbiate installato l'ultima versione dell'editor JCE che al momento in cui scriviamo è la 1.5.7 con il relativo plugin 1.5.6.

Installiamo quindi il plugin JCE Mediabox nel modo usuale e poi andiamo ad abilitarlo da gestione plugin. Ci sono un bel pò di parametri configurabili ma per il momento lasciamo tutto come lo abbiamo trovato e limitiamoci solo a spuntare su SI l'attivazione del plugin.

Andiamo adesso ad inserire una immagine nel nostro articolo. Mettiamo il cursore nel punto dove vogliamo inserire l' immagine e poi clicchiamo sulla classica iconcina di JCE e inseriamo l'immagine che abbiamo già in una delle cartelle di joomla oppure scegliendola con il tasto sfoglia nel nostro computer e caricandola al volo su una cartella di Joomla! Stabiliamo anche le dimensioni che vogliamo che abbia la thumbnails, l'icona che vedremo nell'articolo e che, una volta cliccata ci mostrerà l'immagine a dimensioni naturali con l'effetto lightbox. Ecco come si presenta l'mage manager di JCE con i settaggi per inserire l'immagine che vedete qui a sinistra. Fino a questo momento però l'immagine che abbiamo inserito ridimensionandola non è ancora un link . Per renderla Berlusca-Obamatale dobbiamo cliccarci sopra per evidenziarla e quindi cliccare questa volta sull'iconcina dei link. jce_utilities2Si aprirà un pannello come questo che vedete a destra e dovrete cliccare sull'icona dell'inserimento immagine in modo da scegliere quella che vorrete far aprire al clic, presumibilmente la stessa che prima abbiamo inserito come thumbnail. Una volta fatto questo ancora non abbiamo finito e dovremo cliccare sulla tab Advanced in modo da scegliere di far aprire l'immagine in un popup con effetto lightbox. jce_utilities3Bisogna dire che questo plugin lavora davvero in modo eccellente a dir poco. Infatti come avete visto, possiamo scegliere  noi l'immagine che farà da thumbnail e stabilirne la dimensione. Immagine che può foto di http://www.flickr.com/photos/spunter/anche essere diversa da quella che poi si aprirà al clic. Possiamo poi linkare immagini di qualsiasi dimensione, anche grandissime come quella che vi posto qui a destra. Ma il popup che si aprirà si adeguerà alle dimensioni del monitor dell''utente evitando fastidiosi scroll e lasciando all'utente stesso la scelta di ingrandire ulteriormente l'immagine usando il tasto destro del mouse. Possiamo inoltre linkare una immagine ad una parola invece che a una thumbnail, come avete visto, con la comodità di richiamare immagini contestuali all'argomento di cui stiamo scrivendo. Non solo possiamo anche richiamare un articolo presente nel nostro sito joomla, ecco qui un articolo su un mio template, o qualsiasi altra pagina web tipo una mappa. Ecco qui la mappa con la dislocazione delle amiche di tonicopi (sarei io!) nel mondo (pazientate qualche istante per il caricamento dei segnaposti, sono tante!).  Quindi davvero questo plugin ci consente di rendere con grande facilità molto interattivi i nostri articoli. Se stiamo parlando di un grande uomo di stato possiamo subito associare al volo la sua immagine alle parole GRANDE uomo di stato, tanto per fare subito un altro esempio....
Apri il video we are in the word for berlusconi

Potete linkare persino un video su youtube semplicemente copiando e incollando la URL che vedete nel browser.

O anche potete collegare il video a una immagine come potete vedere cliccando su Michael Jackson qui di fianco per ascoltare il mitico brano We are the word adattato in occasione della mancata presentazione della lista regionale del PDL collegata alla candidatura della Polverini ai primi di marzo del 2010 che ha subito spopolato la rete.

amiche lato B - Clicca per vedere il lato ASe avete avuto la pazienza e la bontà di arrivare fin qui in fondo allora meritate proprio un premio. Vi svelo un'ultima capacità di questo meraviglioso plugin. Una cosa che sanno davvero in pochi, tanto che non se ne trova traccia nemmeno nel sito ufficiale di JCE.  Aggiungendo l'attributo retro="true" all'immagine che usate per thumbnail vi restituirà al clic l'immagine ingrandita ma dal verso opposto. Cliccate nell'immagine qui a destra delle mie due amiche (che ringrazio per la disponibilità) per capire cosa intendo....

Se si vuole mettere una immagine in relazione ad un'altra nella stessa pagina, cambiando così il lightbox in una fotogallery, come le prime due immagini di questa demo:
- nel box titolo scrivete così: Titolo galleria::Titolo foto
- nel box advanced/relazione tra la pagina e l'obbiettivo scegliendo (add value) dal menù a tendina scrivete una parola univoca tipo  frittata (o altro che vi venga in mente  :)) e le due immagini  faranno parte della stessa gallery. Così potrete fare con tutte le immagini presenti nella pagina  :D

Si può utilizzare questo plugin anche per mostrare in modo simpatico il modulo di login come potete vedere qui a sinistra in basso. Ho usato un modulo di tipo html personalizzato per inserire il link al login con mediabox.

Inserendo i link dentro un modulo di tipo html personalizzato e applicando lo stesso suffisso classe css modulo dei menu (nel caso del rhuk _menu) si ottiene un menu molto somigliante agli altri ma con l'apertura della nuova pagina in un lightbox, come potete vedere nell'ultimo modulo a sinistra in basso.

Un link a una immagine da far aprire nel lightbox si può associare anche a una immagine rollover.

Infine diciamo che sono supportate anche le gif animate: provate a cliccare su questa qui sotto.

 

pitonassa

 

 

http://www.joomlacsszengarden.com/index.php?option=com_content&id=85&view=article#commentID307
Ultimo aggiornamento Venerdì 24 Giugno 2011 21:23
 
Mini tutorial sul Suffisso classe CSS modulo CLICCA QUI
Banner


Questo testo è stato formattato col codice html direttamente nel modulo banner

Questo testo invece no e allora prende la formattazione dalla classe del foglio di stile, come per quello sopra il banner...
Buona ispezione con firebug!