Magrathea

Nello sviluppo di Muse Flickr Gallery ho deciso di utilizzare Smooth Gallery per visualizzare le immagine in maniera avvicente per l’utente.

Dovo aver vagliato diversi software, sia in flash che in ajax, la scelta è ricaduta su questo applicativo perchè:

• Non necessita di un lettore proprietario (flash player) per poter essere vista dall’utente
• E’ cross browser, infatti non ci sono problemi di visualizzazione con ie, firefox, safari (testati)
• Si basa su mootools ed è di piccole dimensioni
• Se l’utente ha disabilitato il javascript puo’ benissimo vedere la galleria delle immagini
• Metodo standard per l’inclusione delle immagini (nessun file xml o array javascript)

Utilizzare Smooth Gallery è davvero semplice, includiamo i file necessari:

<script src="/SmoothGallery/scripts/mootools.v1.11.js"
          type="text/javascript"></script>
<script src="/SmoothGallery/scripts/jd.gallery.js"
          type="text/javascript"></script>
<link rel="stylesheet"
       href="/SmoothGallery/css/jd.gallery.css"
       type="text/css" media="screen" />

prepriamo il codice javascript:

<script type="text/javascript">
function startSmoothGallery() {
	var Gallery = new gallery($('Gallery'), {
		timed: false,
		useThumbGenerator: false,
		thumbHeight: 75,
		thumbWidth: 75,
		showCarousel: true,
		showInfopane: true,
		embedLinks: true
		});
	}
window.addEvent('domready', startSmoothGallery);
</script>

si tratta di utilizzare la funzione gallery(), passandole due parametri: il primo riguarda il nome del div che contiene le immagini mentre il secondo si tratta dell’array di configurazione dell’applicazione. La galleria è personalizzabile in diversi aspetti e le opzioni più’ importanti sono:

• timed: slideshow automatico
• useThumbGenerator: vi è la possibilità di associare un generatore di miniature se non sono state create ad hoc attraverso un altro applicaticativo
• showCarousel: visualizza la lista delle miniature in modo che l’utente possa scegliere in modo autonomo le immagini
• showInfopane: mostra le informazioni relative alla foto (titolo e descrizione)

Infine bisogna aggiungere la lista delle immagini:

<div id="Gallery" >
<div class="imageElement">
<h3>(C)apirsi</h3>
<p></p>
<a href="/photos/calca/762119721/"
     title="open image" class="open"></a>
<img src="capirsi.jpg" class="full" />
<img src="capirsi_thumb.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Appoggiarsi</h3>
<p></p>
<a href="/photos/calca/763169947/"
    title="open image" class="open"></a>
<img src="appoggiarsi.jpg" class="full" />
<img src="appoggiarsi_thumb.jpg" class="thumbnail" />
</div>

non si tratta altro di una lista di div con classi specifiche in modo da permettere al Smooth Gallery di creare la galleria dinamica con solo le immagini appropriate.