YOOeffects: lightbox, spotlight, reflection con Joomla

Prodotto da Yootheme.com, agenzia che si occupa di realizzare templates ed estensioni commerciali per il CMS Joomla!, disponibile nativamente sia per Joomla! 1.0.x che per Joomla! 1.5.x dando la possibilità di poter scegliere quale installare a seconda della versione di Joomla! presente sul nostro server.

Plugin gratuito da scaricare liberamente. E' sufficente effettuare il download dal sito ufficiale, installarlo dal backend di Joomla! ed apportare una configurazione minima prima di poterlo vedere in azione.

La feature Lightbox si basa su Shadowbox e supporta tutti i più diffusi formati multimediali web tra cui immagini, QuickTime, Windows Media Player, Flash, Flash video oltre alle pagine web esterne. Con questo Plug in è molto semplice aggiungere effetti al nostro sito Joomla!

Le caratterisitiche di Lightbox consentono di visualizzare pop-up sovrapposti alla pagina in cui ci si trova, evitando di passare ad una pagina esterna, potendo inserire qualsiasi tipo di contenuto multimediale al loro interno.

Configurare il Plug in è molto semplice: innazitutto va attivato, dopo averlo installato, dal pannello di amministrazione, come l'immagine di seguito riportata:

Yoo effect
Configurazione Plugin YOOeffect

Come possiamo notare, tutto quello che si deve fare è scegliere quale effetto deve essere visibile nella pagina. Prendiamo in esame l'effetto Lightbox e vediamo come fare per inserire il codice nella pagina:

<a title="Lightbox" rel="shadowbox[group];
width=xxx; height=xxx" href="/nome-immagine1.png">
<img title="Lightbox" src="/nome-immagine.png" alt="Lightbox" width="410" height="220" /></a>
<a title="Lightbox" rel="shadowbox[group]; width=xxx; height=xxx" href="/nome-immagine2.png"></a>

Questo è tutto quello che c'è da scrivere; ovviamente va individuato il giusto percorso alle immagini e le loro dimensioni corrette.

Un altro effetto che è possibile ottenere è lo Spotlight; viene creato uno smooth fade tra due immagini, al semplice passaggio del mouse. Il suo codice è il seguente:

<div class="spotlight" style="background: url('/nome-immagine.png'); width:XXX;
height:XXX;"></div>

L'ultimo effetto è il Reflection; grazie ad una libreria javascript possiamo ottenere una immagine riflessa, senza dover intervenire con programmi di grafica.

<div style="margin: auto; width:stessa larghezza dell'immagine;">
<img class="reflect" src="/nome-immagine.png" alt="Reflection" title="Reflection" width="xxx" height="xxx" />
</div>

Con questa breve panoramica abbiamo visto tre simpatici effetti da poter includere nelle nostre pagine.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati