Splendide gallerie fotografiche in javascript

Vi sarà spesso capitato di dover inserire una galleria di immagini in un sito web. E quale soluzione migliore e più veloce di una galleria realizzata in javascript? E se oltre ad essere semplice e veloce, fosse anche graficamente molto accattivante?

Vi segnalo di seguito alcune delle migliori gallerie di immagini in javascript attualmente disponibili:

1. GALLERIA (http://galleria.aino.se/)
   Galleria è una galleria di immagini che si appoggia a jQuery. Aspira a semplificare il processo di creazione di gallerie di immagini professionali per il web e dispositivi mobili. E' gratuita senza restrizioni, permette il ridimensionamento e la creazione di miniature "al volo", è integrabile con Flickr e Picasa, prevede diversi temi grafici.
   Veramente bella ed elegante, con molte funzioni (lista miniature, autoplay, zoom, ecc).
2. (E)2 PHOTO GALLERY (http://www.e2interactive.com/e2_photo_gallery/)
   (E)2 Photo gallery è una galleria opensource realizzata con Mootools. La galleria è realizzata in modo da pescare automaticamente le immagini da una cartella indicata, il tutto per semplificare al massimo l'installazione e la gestione.
   Prevede 4 design, la visualizzazione delle miniature, l'individuazione automatica delle foto, un sistema di upload, la lettura dei Photo Meta Data, e molto altro.
3. MINISHOWCASE (http://minishowcase.net/)
   Minishowcase è un piccola e semplice galleria online in php e javascript, che consente di visualizzare online le proprie immagini in modo semplice, senza database o conoscenza di codice, nel giro di pochi minuti.
4. AJAX IMAGE GALLERY POWERED BY SLIDEFLOW (http://mediaeventservices.com/en/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/)
   La galleria si compone di uno scroller di immagini con effetto Cover Flow, e zoom dell'immagine selezionata.
5. IMAGO (http://imago.codeboje.de/)
   Questa galleria vuole essere un clone di SimpleViewer, però senza l'uso di Flash. Si basa su Mootools.
6. MOOFLOW (http://www.outcut.de/MooFlow/)
   Un'altra galleria di immagini basata su Mootools, che richiama fortemente lo slider di iTunes o il cosiddetto Cover Flow. E' dotata di autoresize automatico, autoplay, riflessi realizzati in javascript, e molto altro ancora.
7. SLIDER GALLERY (http://jqueryfordesigners.com/slider-gallery/)
   Tutorial per realizzare una galleria simile allo showcase di prodotti usato nel sito Apple.
8. COULOIR JS SLIDESHOW (http://couloir.org/js_slideshow/)
   Questa galleria di foto è una dimostrazione di come si possa ottenere un comportamento simile a Flash con l'uso di Javascript, HTML e CSS. Il codice viene offerto "as-is", senza supporto tecnico.
9. JONDESIGN'S SMOOTH GALLERY (http://smoothgallery.jondesign.net/)
   Ancora una galleria basata su Mootools, piuttosto diffusa. Leggera ed elegante.
10. ZENPHOTO (http://www.zenphoto.org/)
    Zen Photo è un sistema CMS per la gestione di immagini, audio e video, con backend per l'amministrazione completa. Il tema è completamente personalizzabile, con la possibilità di installare plugin aggiuntivi e molto altro.
11. CSS PHOTO SHUFFLER (http://iamacamera.org/sandbox/photoshuffler/)
    Si tratta di un sostituto Javascript + CSS di un classico slideshow realizzato in Flash.
    
    

Leggi tutto...

Ajax: raccolte di soluzioni, applicazioni e tutorial

Vengono impropriamente chiamati Ajax tutti quei plugin che utilizzano librerie famose come jQuery, Mootools, ecc.
In verità solo una piccola parte di questi plugin sfruttano veramente la tecnologia Ajax, Asynchronous JavaScript and XML, ovvero uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.

Le raccolte che vi propongo quindi sono veramente Ajax solo in parte, per cui passatemi l'uso improprio del termine nel titolo di questo post ;)

Tutorial: http://tutorialblog.org/100-ajax-tutorials-and-resources/
Applicazioni: http://www.designvitality.com/blog/2007/10/43-exceptionally-useful-ajax-applications/
Soluzioni professionali: http://coding.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/

Leggi tutto...

Milkbox, un clone di lightbox tutto italiano

Spesso quando uso alcuni script gratuiti come appunto Lightbox e vari cloni, provo una profonda ammirazione per il programmatore artefice di tanta bellezza, e me lo immagino come un super genio chiuso nel suo studio da mattina a sera, in un posto tanto lontano e impossibile da raggiungere... E invece stavolta il genio lo conosco di persona, è un amico ed un ex collega di lavoro!

Luca Reghellin ha realizzato e messo a disposizione di tutti questo pregevolissimo clone di Lightbox, che lavora (credo sia l'unico) con la libreria Mootools 1.2
Milkbox ha numerose features interessanti, tra cui il supporto a swf (quindi non solo immagini), la possibilità di settare un autoplay per la navigazione tra immagini, grafica personalizzabile via css, e molto altro.

Sul sito ufficiale troverete non solo tutti i file disponibili per il download, incluse le demo, ma anche una guida pratica su come installare lo script e come personalizzare / utilizzare le diverse caratteristiche.
Un caloroso ringraziamento al buon Luca che ha permesso tutto ciò.

VAI AL SITO UFFICIALE

Leggi tutto...

Multibox

Tra tutti i vari cloni della famosissima Lightbox, vi voglio segnalare oggi "Multibox".
Personalmente non la conoscevo, ma sono capitata casualmente sul sito di un mio illustre collega, Leigh Taylor, e ho notato che faceva uso di questo bellissimo effetto per il portfolio.

La classe è veramente notevole, non ho ancora avuto modo di testarla, ma gli esempi del sito ufficiale lasciano ben sperare.

Link: https://github.com/samuelbirch/MultiBox

Leggi tutto...

Calendar: un calendario con Mootools

Vi segnalo nuovamente il sito della Electric Prism, in particolare della sezione del suo direttore creativo, Aeron Glemann, per un'altra fantastica classe javascript per Mootools, "Calendar".

Si tratta del classico "date-picker", ovvero di un calendario associato ad un form, dal quale si può selezionare la data desiderata (utile ad esempio in caso di prenotazioni alberghiere, voli, o qualsiasi altra occasione in cui sia necessario inserire una data), ma con in aggiunta la dinamicità di Ajax, che lo rende simpatico e "stiloso"!

A questo link potete vedere tre demo e scaricare tutti i file sorgente necessari.

L'installazione è molto semplice, vi rimando al sito ufficiale per il manuale completo!

Leggi tutto...

Slideshow con Mootools

Immagino che molti di voi conoscano quel famosissimo screensaver del Mac Os X, dove le immagini si spostano e si zoomano nello schermo con un effetto dissolvenza.
Da oggi potete ricreare questo accattivante effetto anche nei vostri siti web, grazie a "Slideshow".

"Slideshow" è una classe javascript che permette di "animare" la presentazione di immagini nel vostro sito, e si basa sul framework Mootools.

A questo link potete vedere una demo e scaricare la classe e i moduli di Mootools necessari.


COME UTILIZZARLA

Per usare questa classe è importante conoscere un minimo di HTML e di Javascript.
Dopo aver scaricato i file mootools.js e slideshow.js, è importante creare un collegamento a questi file nella head della nostra pagina html, in questo modo:

<head>
...
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>



A questo punto dobbiamo inserire la prima delle immagini che vogliamo far scorrere nello slideshow all'interno di un div, che per comodità chiamaremo "my_slideshow":

<div id="my_slideshow" class="slideshow">
<img src="images/1.jpg" alt="A picture" width="400" height="300" />
</div>



Ora dobbiamo inizializzare lo script. Consiglio di farlo sempre nella head del sito, di seguito ai link ai due file inseriti poco fa:

<head>
...
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">
window.onload = function() { myShow = new Slideshow('my_slideshow', {hu: '../images/', images: ['apple.jpg','1.png','aaa.gif'], height: 300, width: 400, type: 'combo', navigation: 'arrows+'}); }
</script>
</head>

Come vedere, la funzione richiama diverse proprietà:
- 'my_slideshow' : l'id del div nel quale abbiamo inserito la prima immagine;
- hu: '../images/' : il percorso relativo delle immagini da caricare;
- images: [...] : un array contenente tutte le immagini che vogliamo mostrare;
- height : l'altezza delle immagini;
- width: la larghezza delle immagini;
- type: il tipo di slideshow (è possibile scegliere tra fade, pan, zoom, combo, push o wipe);
- navigation: il tipo di navigazione tra le immagini (è possibile scegliere tra arrows, arrows+ o thumbnails);

Abbiamo finito, buon divertimento!

Leggi tutto...