creare una galleria di immagini con Dropbox e SimpleViewer

Innanzi tutto, scarichiamo Dropbox (https://www.dropbox.com/downloading). Installiamo il programma e creiamo contestualmente il nostro account (procedura estremamente rapida). Al termine della procedura di installazione, l’icona dell’applicazione comparirà nell’icon tray.

Scarichiamo ed installiamo SimpleViewer (la versione free andrà benissimo: http://www.simpleviewer.net/products/). Nel caso in cui il file di installazione di SimpleViewer (con estensione .air) non sia associato ad alcun programma, dovremo scaricare anche Adobe Air (http://www.xnavigation.net/view/767/adobe/air/download.html).

A questo punto abbiamo tutti gli strumenti per partire. Per la creazione della galleria, utilizziamo SimpleViewer, un programma molto intuitivo e che rende facilmente customizzabile l’interfaccia della nostra galleria. Al termine della procedura, salviamo e nominiamo la galleria (nel nostro caso, galleriaesempio) come sottocartella  della directory PUBLIC di dropbox. Copiamo quindi il codice html che andrà successivamente modificato prima di essere embeddato nel post di blogger.

In sostanza le modifiche da apportare sono essenzialmente tre.

1. Cerchiamo, nella cartella galleria creata con simpleviewer,  il file simpleviewer.js; (il percorso dovrebbe essere all’incirca il seguente: C:\Users\....\Dropbox\public\galleriaesempio\svcore\js). Una volta individuato il file simpleviewer.js, con il tasto di dx selezioniamo: dropbox/copy public link e modifichiamo la stringa src="svcore/js/simpleviewer.js" sostituendovi l’indirizzo pubblico appena copiato: 

<script type="text/javascript" src="http://dl.dropbox.com/u/73512931/galleriaesempio/svcore/js/simpleviewer.js"></script>  

2. Al di sotto della stringa <script type="text/javascript"> aggiungiamo la seguente stringa (reperibile nella guida di simplviewer):  

var flashvars = {};
flashvars.baseURL="http://dl.dropbox.com/u/73512931/galleriaesempio/";

indicando come URL, l’indirizzo pubblico della nostra galleria di immagini. 

3. Aggiungiamo infine la voce flashvars al termine della stringa:  

simpleviewer.ready(function () {simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);

  

Esempio di codice generato da simpleviewer:

<!--START SIMPLEVIEWER EMBED.-->

<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>

<script type="text/javascript">

simpleviewer.ready(function () {

simpleviewer.load("sv-container", "100%", "100%", "333333", true);

});

</script>

<div id="sv-container"></div>

<!-- END SIMPLEVIEWER EMBED -->

Esempio di codice modificato:

<!--START SIMPLEVIEWER EMBED.-->

<script type="text/javascript" src="http://dl.dropbox.com/u/73512931/galleriaesempio/svcore/js/simpleviewer.js"></script>

<script type="text/javascript">

var flashvars = {};
flashvars.baseURL="http://dl.dropbox.com/u/73512931/galleriaesempio/";

simpleviewer.ready(function () {

simpleviewer.load("sv-container", "100%", "100%", "333333", true, flashvars);

});

</script>

<div id="sv-container"></div>

<!-- END SIMPLEVIEWER EMBED -->

[Testato su blogger]