Come creare un tooltip con Joomla! |
 |
 |
|||
|
Autore :
Davide Mascetti » Questo articolo è stato letto: 7320 volte » |
|||||
Dopo varie richieste sul forum su come creare un tooltip con Joomla, ho pensato che potesse essere interessante ed utile scrivere un articolo su come implementarlo nel nostro amato cms.
Per chi si intende di javascript, mootools e jquery potrebbe essere una sciocchezza da realizzare, ma per chi non ha queste basi, fortunatamente ci sono dei plugin utili che ci danno una mano a realizzare ciò che abbiamo in mente, quello che alcuni chiamano l’effetto “booking.com”:
Visualizzare l’immagine ingrandita al passaggio del mouse senza effettuare alcun click Di recente ne ho provati un paio, Tooltips e SIGE gallery, due plugin molto interessanti e completi, andiamo a vedere come configurarli.
Partiamo con Tooltips, un plugin gratuito che soddisfa a pieno le nostre esigenze realizzato dell’olandese Peter van Westen, aka NoNumber.nl.
Tooltips
Lo installiamo come una qualsiasi altra estensione e andiamo in gestione plugin, lo attiviamo e gli diamo qualche impostazione base.
Date queste impostazioni, non ci resta che preparare le due immagini, una in miniatura ed una in versione “grande” (della grandezza che preferiamo e che più si adatta al nostro sito) ed implementare il plugin.
Ecco il codice da inserire all’interno dell’articolo: {tip <img src="/mia-immagine-grande.jpg" alt="mia immagine grande" width="300" height="200" />}
Possiamo vedere una demo sul sito di questo hotel Verona passando con il mouse sopra le miniature a sinistra. Se invece preferissimo fare un hover del testo? Ancora più semplice!E’ sufficiente implementare questo codice: {tip Ciao...::Questo è l'effetto HOVER!}Inserire qui il testo dell'articolo{/tip}
Se invece vogliamo complicarci la vita e le immagini sono più di una e vogliamo creare una galleria, a questo punto conviene utilizzare un altro plugin, SIGE.
SIGE
Lo installiamo, andiamo in gestione plugin e lo andiamo ad impostare.
Qui troviamo tantissime impostazioni da personalizzare come meglio crediamo, ma quella che più ci interessa è quella della miniatura, infatti, SIGE al contrario di Tooltip, crea una miniatura in automatico.
Decidiamo le dimensioni, la qualità e se vogliamo mantenere le proporzioni ed il gioco è fatto. Carichiamo le immagini in una cartella (ogni galleria in una cartella).
Immaginiamo di avere 3 gallerie, creiamo una struttura ordinata: images/gallerie/la-prima/ images/gallerie/la-seconda/ images/gallerie/la-terza/
Caricate le immagini nella giusta cartella, non ci resta che andare a richiamare la galleria all’interno dell’articolo.
Se volessimo richiamare la semplice galleria, il codice da inserire sarà il seguente: {gallery}gallerie/la-prima{/gallery}
Se invece volessimo ricreare l’effetto Tooltip, il codice da inserire sarà il seguente: {gallery}gallerie/la-prima,css_image=1,css_image_half=1{/gallery}
Possiamo trovare una demo nella pagina camere dell’ Hotel Locanda Ippopotamo.
Non mi resta che augurarvi un buon lavoro! ;)
Davide Mascetti dmstudioweb - Siti Web Verona  Commenta questo articolo sul forum Oppure commenta e condividi questo articolo sulla nuova pagina ufficiale di Joomla.it su Google+
Articoli più recenti:
|
Oltre ad essere una semplice galleria, questo plugin offre tantissime opzioni molto interessanti.
