|
Navigation
|
MadBoxr (plugin per MODx)Ho scritto un plugin per MODx, il CMS che uso per questo sito. Principalmente, usando uno script molto conosciuto (Lightbox, o meglio, un paio di sue varianti), mostra le immagini a grandezza naturale, cliccando sulle miniature. L'animazione che ne risulta è molto famosa, il suo nome è "fancy pants" (che non so bene come tradurre in italiano). Cliccate su una delle immagini qui sotto per vederla. Utilizzare MadBoxr su un sito che utilizza MODx è molto semplice. Tutto è gestibile dal Rich Editor TinyMCE. Bisogna creare un link intorno al testo o all'immagine che si vuole lanci lo script che mostra il box. In questo link, nel campo "Link URL" si deve inserire una stringa formata da #madboxr eventualmente seguito da ? e una serie di parametri. I parametri attualmente accettati sono i seguenti
Una tipica stringa che può essere usata nel campo "Link URL" è la seguente: #madboxr?w=640&h=480&url=http://www.google.com Notate gli = per indicare il valore di ogni parametro e gli & per suddividere più coppie parametro/valore. Script utilizzatiLightbox è il primo script the ha implementato la caratteristica mostrata in questa pagina, è stato scritto da Lokesh Dhakar e usa le librerie prototype e script.aculo.us. Poiché MODx, invece, usa il framework mootools, il mio plugin MadBoxr usa Slimbox, un clone di Lightbox scritto da Christophe Beyls che usa mootools invece che prototype e script.aculo.us. E' anche possibile usare una versione estesa di Slimbox, scritta da Yukio Arita: questa versione estesa permette di avere contenuto html in iframe, in aggiunta alle immagini, mentre lo Slimbox originale può visualizzare soltanto immagini. Poiché la versione estesa di Slimbox sembra essere un po' più lenta, nella scheda "configuration" del plugin in MODx c'è la possibilità di scegliere uno dei due script. Se volete usarlo soltanto per le immagini, scegliete "slimbox", altrimenti scegliete "slimbox_ex". La versione estesa è quella di default se seguite le istruzioni in fondo a questa pagina. LicenzaQuesto plugin è rilasciato sotto la licenza GPLv3.
Esempio 1: immagini (indicando entrambi gli URL)
L'immagine, in questo caso, è presa da questo sito web. Inserendo l'immagine, indichiamo nel campo "Image URL", l'indirizzo della miniatura e eventualmente riempiamo anche i campi "Width", "Height" e "Title". All'immagine in miniatura alleghiamo un link, nel cui campo "Link URL" indichiamo #madboxr, seguito dalle sue eventuali opzioni, in particolare l'opzione url, che indica dove andare a prendere l'immagine ingrandita. Il link e l'immagine si presentano dunque in questo modo: <a href="In questo caso specifico ho usato per le due immagini (quella miniaturizzata e quella ingrandita) la stessa immagine. In generale si dovrebbe usare un'immagine opportunamente rimpicciolita. Esempio 2: immagini da Flickr
Se l'immagine è presa da Flickr, è possibile evitare di indicare ogni volta entrambi gli indirizzi (quello della miniatura e quello dell'immagine ingrandita). Per far questo, intanto bisogna collegare un'immagine presente su Flickr. Andate alla vostra pagina di Flickr e scegliete l'immagine che volete inserire. Cliccate sull'icona con la lente di ingrandimento ("tutte le dimensioni") e scegliete la dimensione del thumbnail. In fondo alla pagina di Flickr c'è l'indirizzo per utilizzare questa immagine su un altra pagina. A questo punto potete inserire un'immagine sulla pagina del vostro sito, indicando come URL quello appena copiato da Flickr. Quando andate a fare il link sull'immagine, è sufficiente indicare #madboxr?flickr=, eventualmente seguito da altre opzioni. Il plugin automaticamente genererà l'opportuno URL da mettere sul link. Ecco come appare dunque il blocco link + immagine: <a href="#madboxr?flickr=&w=640&height=480"> Su Flickr sono presenti anche altri formati di immagine oltre a quello utilizzato in questo caso (500x375), per utilizzare un altro formato per l'immagine ingrandita, è bene tenere presente che Flickr aggiunge al nome dell'immagine una lettera per indicarne la dimensione. Ad esempio se l'indirizzo finisce per _t, si tratta di un thumbnail (100x75). E' dunque sufficiente utilizzare la lettera con cui termina l'indirizzo dell'immagine alla dimensione desiderata, e indicarlo come parametro, ad esempio: #madboxr?flickr=m&w=640&height=480. Esempio 3: contenuto di una pagina (iframe)Infine, utilizzando slimbox_ex, è possibile anche visualizzare contenuti diversi dalle immagini, nel box. Per far questo, è sufficiente creare un link il cui indirizzo sarà, come sempre, #madboxr e conterrà come opzione "url", l'indirizzo della pagina che si vuole visualizzare nel box. Clicca qui per vedere il contenuto di Google dentro uno Slimbox. Il link si presenta in questo modo: <a href="#madboxr?url=http://www.google.com">Clicca qui</a> Installazione del plugin in MODxEcco le istruzioni per installare questo plugin in MODx:
Per aggiornare mootools nel vostro sito MODx:
Write a comment
ufagruus
Posts: 3 
Reply #2 on : Tue May 13, 2008, 03:04:10
ejyqhffmm
Posts: 3
Reply #1 on : Tue February 19, 2008, 20:28:47 |
.
|
Posts: 3
Reply #3 on : Fri September 12, 2008, 15:13:41