Effetto ShadowBox per gallerie di foto e di video.

Instllazione dell'effetto ShadowBox

Ho presentato diversi effetti molto suggestivi come Lightbox, Lytebox, Expando, Facebox, Sfoglia Pagina e altri ancora ma credo che quello che vado a illustrare sia il migliore e il più completo. ShadowBox si basa sullo stesso concetto di Lightbox che permette all'utente di aprire delle finestre modali unitamente alla opacizzazione dello sfondo. Quello che ha in più rispetto a Lightbox è che è possibile anche utilizzarlo per i video di Youtube e Vimeo oltre che per pagine HTML come del resto accade anche per Lytebox.

E' anche possibile utilizzare l'effetto con delle mappe e creare un popup di benvenuto a chi arriva nel nostro blog. Queste due ultime funzioni le vedremo in un prossimo articolo per non appesantire troppo la trattazione. Si possono scaricare i file necessari all'installazione direttamente dal sito del creatore. Si mette la flag alle funzionalità che interessano e si seleziona la lingua con cui si vuole che operi l'effetto. Visto che è una operazione che ho già fatto e che ho già caricato le immagini degli strumenti di navigazione sul mio account Picasa, potete limitarvi a inserire gli script e i CSS nel template. Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

<!-- EFFETTO SHADOWBOX INIZIO -->
<link href='https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000000&quot;,
overlayOpacity: &quot;0.9&quot;,
});
</script>
<noscript><a href='http://goo.gl/q56FZ' target='_blank'><span style='font-size: x-small;'>Shadowbox Effect</span></a></noscript>
<!-- EFFETTO SHADOWBOX FINE - http://www.ideepercomputeredinternet.com -->

Salvate il modello. Prima di leggere come fare per inserire materialmente immagini e video con questo effetto andate a vedere la

• Demo dell'Effetto ShadowBox per gallerie di foto e video - 

Inserimento di una sola foto mediante Editor di Blogger o Windows Live Writer 

Se si usa l'editor di Blogger si può caricare la foto dall'hard-disk, successivamente si va su Modifica HTML e si aggiunge la stringa

 rel="shadowbox"

nella posizione mostrata da questo screenshot

Con Windows Live Writer si deve prima caricare l'immagine su Picasa quindi inserirla nell'articolo mediante Inserisci > Immagine > Dal web e incollandone l'URL. Successivamente si sceglie Collega a > Immagine di origine oppure Indirizzo web. In questo secondo caso si incolla l'URL dell'immagine su Picasa, quindi si inserisce shadowbox in Rel nell'ultimo campo

Tutto il resto del contenuto del post o della pagina statica si pubblica come al solito. Le immagini possono essere ridimensionate a piacere. Quando ci si cliccherà sopra si vedrà una finestra popup con la foto a dimensioni originali

 

Inserimento di immagini, video e pagine web mediante link per gallerie 

Non occorre postare una foto o un video per avere l'Effetto ShadowBox, è sufficiente inserire dei link nel post secondo questa sintassi dove come anchor text si può scegliere qualsiasi cosa

<a href="URL IMMAGINE" rel="shadowbox" title="NOME IMMAGINE">TESTO IMMAGINE</a>

dove si inserisce l'indirizzo della immagine caricata su Picasa o altro hosting

<a href="URL IMMAGINE 1" rel="shadowbox[nomegalleria]" title="Nome Immagine 1">Testo immagine 1</a>
<a href="URL IMMAGINE 2" rel="shadowbox[nomegalleria]" title="Nome Immagine 2">Testo immagine 2</a>
<a href="URL IMMAGINE 3" rel="shadowbox[nomegalleria]" title="Nome Immagine 3">Testo immagine 3</a>

serve per creare una galleria di immagini che possono essere in numero indefinito. In questo caso si deve inserire la stringa

rel="shadowbox[galleria1]"

dove si dovrà dare un nome alla galleria di foto. Si possono creare anche più gallerie in una stessa pagina dando ovviamente dei nomi distinti. Quando si cliccherà sopra a un link si vedranno gli strumenti di navigazione con il numero degli elementi della galleria

Per inserire un video di Youtube il codice da incollare in Modalità HTML è questo

<a href="http://www.youtube.com/v/T73frdYAgIE&amp;rel=0&amp;autoplay=1" rel="shadowbox;width=405;height=340;" title="Titolo video">Clicca qui per vedere il video</a>
dove si deve inserire l'ID del video al posto del codice in rosso. Si possono personalizzare anche le dimensioni. Il video inizierà a riprodursi nel momento in cui si clicca sul link. Questo accade per il parametro autoplay=1. L'ID dei video di Youtube possono desumersi dalla barra degli indirizzi del browser.Viene dopo v= e prima di &

 
Per inserire un video di Vimeo bisogna ricordarsi che gli URL dei video sono del tipo vimeo.com/XXXXXXXX. La parte finale rappresenta l'ID del video
<a rel="shadowbox;width=405;height=340;" title="Video Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=11712103&amp;autoplay=1">Nome video Vimeo</a>
dove si possono anche personalizzare le dimensioni.
Inserimento di pagine web e oggetti in flash
Per inserire una finestra con una pagina web
<a rel="shadowbox;width=800;height=600" title="Nome Pagina web" href="URL della pagina">Nome della pagina</a>
Per mettere l'effetto a un oggetto in flash in formato SWF
<a rel="shadowbox;width=600;height=400" title="Oggetto SWF" href="URL del file SWF">Nome Oggetto SWF</a>
Come inserire l'Effetto ShadowBox con l'ausilio di miniature

Abbiamo visto che si possono postare le immagini direttamente oppure si possono usare dei semplici collegamenti per generare l'effetto ShadowBox. Al posto del testo del link può essere messa una miniatura e questo sia con le immagini che con i video. Basta sostituire l'anchor text, che in tutti i codici è stato colorato di blu, con un codice che rappresenta l'immagine in miniatura in questo modo

<img style="width:120px; height:90px;" src="URL della immagine" />

dove si possono configurare le dimensioni ottimali. Ricordo che si può sempre ottenere l'URL della miniatura di un video di Youtube.

Considerazioni conclusive e regolazioni

Per modificare l'effetto si possono seguire le istruzioni del sito e scegliere tra le varie opzioni. E' consigliato solo ai lettori molto esperti. Nel codice iniziale ci sono dei dati in rosso

overlayColor: &quot;#000000&quot;,
overlayOpacity: &quot;0.9&quot;,

Il primo rappresenta il codice del colore dello sfondo mentre il secondo è la percentuale di opacità del background (0.1 è il minimo e 1.0 è il massimo). Questi parametri possono essere modificati a seconda dei colori del blog o del gusto personale.

Volendo si possono anche creare gallerie miste di immagini, video e oggetti in flash. Non sto a trattare l'argomento in modo esaustivo altrimenti faccio un romanzo. Mi limito a pubblicare su Google Documenti un codice di esempio di una galleria con tre immagini e un video con le relative miniature

• Codice di una galleria con effetto ShadowBox -

Nel caso abbiate un blog su Blogger con un dominio personalizzato cioè del tipo www.miodominio.com, può capitare che gli script che ho caricato su Google Sites con la modalità schedario non funzionino. Non si sa bene da cosa dipenda ma può essere che Google non voglia fare da deposito per CSS e Javascript poi utilizzati su siti non di sua proprietà. Per ovviare all'inconveniente basta scaricare i due file

https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css
https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js

caricarli sul vostro account DropBox, acquisirne l'hotlink e sostituirlo nel primo codice. Se ancora non siete iscritti a DropBox potete porre rimedio a questa grave manchevolezza compilando questo modulo di invito a DropBox.

Aggiornamento: L'effetto ShadowBox non funziona con IE. Me ne sono accorto solo ora perché non uso mai quel browser.