Trovare una libreria per jQuery che permetta di visualizzare le foto e renderle fruibili anche senza javascript non è poi così difficile, le cose si complicano leggermente se vogliamo inserirle in Blogger.
Ma niente paura ecco i passi (semplici) da fare per far funzionare tutto. Bisogna comunque armarsi di pazienza e soprattutto tranquillità mentre facciamo le modifiche.
Naturalmente sono a vostra completa disposizione se avrete problemi nella configurazione, sperando di esserne all'altezza. Potete trovare una dimostrazione pratica in questo mio post; è interessante soprattutto perché anche senza javascript abilitato sarà comunque possibile aprire le immagine grandi singolarmente.
Prima di iniziare fate una copia del blog, del template, delle parti html e javascript custom, articoli e commenti. In pratica tutto il blog in modo da poterlo completamente ripristinare in caso di problemi, il tutto per dire cavoli vostri eheh. Ok senza indugi se il risultato vi piace, iniziamo:
1) Preparazione jQuery: ipotizzo che sul vostro blog non avete già fatto uso di jQuery, nel caso sia già caricata con le pagine del sito saltate questo punto. Esistono due modi per caricare la libreria jQuery è dipende dall'uso che ne fate. jQuery infatti contiene molte funzionalità, ma la libreria pesa un poco e sicuramente blogger non crea codice così leggero da trascurare questo aspetto. Se volete iniziare a includerlo solo in alcuni post / articoli allora dovete scrivere il vostro articolo normalmente è salvarlo. Ok, ora editatelo bene (meglio accedere ai propri post da draft.blogger.com) dopo qualche riga del vostro articolo dovrete metter questo codice (naturalmente passate alla modalità 'Modifica HTML'):
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
che caricherà la libreria jQuery minimizzata (tanto per risparmiare il possibile).2) Preparazione libreria Slideshow: Se ne avete già una bene, altrimenti potete usare quella che trovate QUI, creata da Leandro Vieira Pinho sicuramente valida e fruibile per i miei scopi. Sul sito potete trovare qualche esempio oltre all'ultima versione scaricabile, ovviamente.
Anche in questo caso accedete al vostro post e dopo lo script di jQuery aggiunto prima, metteteci questa riga (sempre in modalità HTML):
<script type='text/javascript' src='http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js'></script>
3) Inserire le immagini: Potete creare una tabella, una lista oppure metterli in un div come volete. L'importante è associare come id (della table, del div o ul) #gallery e inserire delle anchor dentro questo elemento html. Questo codice purtroppo lo dovete mettere sempre modificando il post tramite 'Modifica HTML' e fra l'altro dovete assicurarvi che fra le Opzioni post (in basso) come Impostazioni di composizione sia selezionato Interpreta HTML digitato.
Un esempio HTML potrebbe essere questo:
<div id="gallery">
<table border="0" cellspacing="5">
<tr>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego22.jpg" title="lego22"> <img src="http://sites.google.com/site/ondareblog/lego/lego22t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego26.jpg" title="lego26"> <img src="http://sites.google.com/site/ondareblog/lego/lego26t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego28.jpg" title="lego28"> <img src="http://sites.google.com/site/ondareblog/lego/lego28t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego01.jpg" title="lego01"> <img src="http://sites.google.com/site/ondareblog/lego/lego01t.jpg" alt="" /></a></td>
</tr>
</table>
</div>
Oppure se non volete usare le tabelle, questo:
<div id="gallery">
<ul>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego22.jpg" title="lego22"> <img src="http://sites.google.com/site/ondareblog/lego/lego22t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego26.jpg" title="lego26"> <img src="http://sites.google.com/site/ondareblog/lego/lego26t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego28.jpg" title="lego28"> <img src="http://sites.google.com/site/ondareblog/lego/lego28t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego01.jpg" title="lego01"> <img src="http://sites.google.com/site/ondareblog/lego/lego01t.jpg" alt="" /></a></li>
</ul>
</div>
Analizzando il codice (in entrambi i casi) bisogna fare particolare attenzione al tag A dove href è l'immagine grande da visualizzare nello slideshow, title è l'etichetta che verrà utilizzata come didascalia e l'elemento img punterà (tramite src) all'immagine da usare come anteprima, quindi una piccola immagine da caricare (consiglio di dimensioni molto ridotte giusto per far capire il soggetto).Attenzione che se avete più gallerie nella stessa pagina allora dovete assicurarvi che i due id siano differenti.
4) Abilitare lightbox: Basta inserire questo codice dopo aver creato la lista di immagini da usare nella nostra (quasi pronta) galleria:
<script type="text/javascript"><!--
$(function() { $('#gallery a').lightBox({
imageLoading:'http://iltuosito/lightbox-ico-loading.gif',
imageBtnPrev:'http://iltuosito/lightbox-btn-prev.gif',
imageBtnNext:'http://iltuosito/lightbox-btn-next.gif',
imageBtnClose:'http://iltuosito/lightbox-btn-close.gif',
imageBlank:'http://iltuosito/lightboxblank.gif'
}); });
//--></script>
Naturalmente dovete sostituire i percorsi con le vostre immagini, che potete ovviamente personalizzare come volete. Salvare l'articolo e uscire.Le immagini che utilizzo io sono queste:
- lightbox-ico-loading.gif:
- lightbox-btn-prev.gif:
- lightbox-btn-next.gif:
- lightbox-btn-close.gif:
5) Inserire lo stylesheet del lightbox: potete benissimo personalizzarlo o rifarlo da capo quello che ho usato io è questo:
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em;
overflow: auto; width: 100%; padding: 0 10px 0; }
#lightbox-container-image-data { padding: 0 10px; color: #666; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; }
#lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }
#gallery { background-color: #fff; padding: 10px; width: 520px; }
#gallery table { align: center; }
#gallery tr, td { align: center; }
#gallery img { border: 5px solid #c0c0c0; border-width: 5px 5px 20px; }
#gallery a:hover img { border: 5px solid #FFF8B2; border-width: 5px 5px 20px; color: #FFF8B2; }
#gallery a:hover { color: #FFF8B2; }
Da inserire ovviamente in Blogger > Layout > Modifica HTML, una volta qui spuntate la voce "Espandi i modelli widget" e copiate il contenuto in un editor di testo (esempio notepad).Per chi volesse invece una struttura tableless è possibile sfruttare gli elementi ul e li, la modifica risulta molto veloce. Ad esempio al posto delle righe #gallery, #gallery table e #gallery tr, td potete scrivere qualcosa del tipo:
#gallery { background-color: #22201d; padding: 5px ; width: 98%; clear:both; margin:0 auto;}
#gallery ul{ margin:0 auto; padding:0; clear:both;}
#gallery li { display:inline; padding:5px;margin:0 auto;border:0; }
Ovviamente, anche il codice html della gallery cambierà in particolare fare riferimento al punto 3) Inserire le immagini per vedere le differenze html.Adesso non vi resta che cercare questo elemento che solitamente è presente e contiene il codice CSS che utilizza il blogger:
<b:skin><![CDATA[/*
....
]]></b:skin>
Dove ci sono i puntini ovvimanete avrete il codice e proprio lì dentro facendo attenzione a non metterlo a casaccio copierete le righe CSS precedenti.
Finito, finalmente avete abilitato la galleria per il vostro articolo. Questi passi (tranne il 5) sono da ripetere tutte le volte che vorrete mettere una galleria in un vostro articolo, esiste la possibilità di evitarsi i punti 1 e 2 ma in questo caso il codice contenuto nel tag script in entrambi i casi va inserito subito dopo l'elemento skin che avete modificato per metterci il codice CSS. In quel caso sarà sempre disponibile e non vi resterà che compiere il passo 3 e 4.Ciao e buona galleria.
Collegamenti esterni: jQuery | jQuery lightBox | Esempio su ondare