CSSREVOLT - blog personale di Filippo Buratti

ProtoSkim è un semplice plugin javascript che consente di implementare un effetto sfoglio (skim) su una galleria di immagini (simile per intenderci a  Mobile Me Gallery della Apple e a qGallery). In realtà lo script è inspirato da una interessante tecnica trovata su pixelcity.com. ProtoSkim utilizza Ajax e Json e richiede l'utilizzo del framework  Prototype (1.6.1).

Il markup HTML richiesto è veramente minimale: basta un div (referenziato con un attributo id) che fa da contenitore delle immagini con le stesse dimensioni: è poi necessario predisporre un file in formato Json contenenti i dati delle immagini per popolare l'effetto.

Utilizzo e Configurazione Javascript

Dopo aver incluso lo script e il framework Prototype nell'head del nostro documento, e aver predisposto la necessaria struttura HTML, è necessario istanziare lo script con una sistassi simile:

new protoSkim(container, {[options]});

Riguardo le opzioni disponibili, esse permettono ampie possibilità di personalizzazione nell'utilizzo:

• url: l'indirizzo del file json (default value 'json/data.json').
• parameters: può contenere parametri opzionali per Ajax request.
• randomize: abilità la visualizzazione random delle immagini (default false).
• limit: limita il numero delle immagini caricate dall'effetto (default 20).
• useResizer: abilita il thumb generator (default false).
• resizer: l'indirizzo dello script che genera le thumbnails (default 'timthumb.php').
• callback: (default null).

Configurazione sorgente JSON

Il file JSON da utilizzare può essere creato staticamente o con qualunque linguaggio dinamico attingendo dalle più diverse fonti: deve possere una struttura simile a questa:

[ 
	{ "title": "Apollo Mission", "href": "images/apollo.jpg", "thumbnail": "images/thumbs/apollo.jpg" },
	{ "title": "Bambi", "href": "images/bambi.jpg", "thumbnail": "images/thumbs/bambi.jpg" }, 
	{ "title": "Britney Spears", "href": "images/britney.jpg", "thumbnail": "images/thumbs/britney.jpg" },
	{ "title": "Call of Duty", "href": "images/callofduty.jpg", "thumbnail": "images/thumbs/callofduty.jpg" },	
	{ "title": "Ferrari Dream", "href": "images/ferrari.jpg", "thumbnail": "images/thumbs/ferrari.jpg" }
]

Le proprietà utilizzabili per l'array delle informazioni di ogni immagine sono tre:

• href (opzionale), può contenere una immagine, un file, o un indirizzo web.
• thumbnail, l'indirizzo della miniatura dell'immagine (parametro obbligatorio se è la proprietà href  è mancante e l'opzione useResize è disabilitata).
• title (opzionale), puo contenere informazioni utili per la caption ed attributi alt e title eventualmente utilizzati dallo script.

Download e documentazione

Pagina ufficiale di Protoskim con documentazione, esempi e free download dello script che ho rilasciato naturalmente con licenza opensource.