Effetto lightbox per blogger

Quasi sicuramente la maggior parte di voi conosce le piattaforme CMS come WordPress e Joomla.

Queste sono molto amate dal pubblico per il fatto che accettano l'uso dei Plug-in e soprattutto perchè vantano una grandissima community.

E' per questo motivo che molti tendono a considerarle meglio di Blogger. Tuttavia da persona che le ha provate tutte, avrei da esprimere un mio parere in merito.

Per quanto possa essere limitata, la piattaforma di Blogger è una delle migliori al mondo. Non solo per la sua semplicità d'uso, ma anche per l'ottimizzazione per i motori di ricerca e per la gestione dei contenuti.

Avendo provato le due piattaforme citate precedentemente ho riscontrato parecchi problemi di aggiornamento e soprattutto qualche pecca nello sviluppo.

Con questo non intendo in alcun modo criticarle, ma voglio precisare una volta per tutte che Blogger non è in alcun modo inferiore alle altre.

Dopo questa piccola premessa passo finalmente a ciò che è lo scopo di questo articolo.

Siccome tutte le piattaforme possiedono innumerevoli plug-in, tenterò in questi giorni di rendere disponibile parte di questi anche in Blogger. Così finalmente anche voi potrete usufruire di tutte quelle "chicche" di cui si vantano gli altri.

Avendo parlato di effetti sul cursore, articoli correlati, articoli recenti ecc... oggi vi presento uno degli effetti sulle immagini più usati in rete. Si tratta di lightbox e non ha certamente bisogno di presentazioni.

Eccone un chiaro esempio: vi basterà cliccare sull'immagine per capire di cosa sto parlando.



Inserire quest'effetto non è affatto complicato. Vi bastera seguire questi semplici passaggi.


Per prima cosa dovrete aggiungere questa porzione di codice tra i tag <head></head> del vostro blog (Layout/Modifica HTML):


<script src='http://masseyhome.googlepages.com/prototype.js' type='text/javascript'></script><script src='http://masseyhome.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='http://masseyhome.googlepages.com/lightbox.js' type='text/javascript'></script>
<link href='http://masseyhome.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>


In questo modo avrete attivato l'effetto lightbox in tutte le pagine. Adesso non vi resterà altro che richiamare tale effetto.

Ogni qualvolta vorrete applicarlo alla vostra immagine doverte agire sul codice di questa. Infatti dopo la parte "<a" dovrete anche aggiungere rel="lightbox". Esempio:

Se il codice iniziale della vostra immagine è:


<a href="http://3.bp.blogspot.com/_F2w2x4XKC74/ST_zkownisI/AAAAAAAAAMk/jJyk7ce_cjw/s1600-h/fiore.jpg">
<img src="http://3.bp.blogspot.com/_F2w2x4XKC74/ST_zkownisI/AAAAAAAAAMk/jJyk7ce_cjw/s1600/fiore.jpg" width="448" height="336" /></a>



dovrete trasformarlo in modo che risulti simile a questo:



<a rel="lightbox" href="http://3.bp.blogspot.com/_F2w2x4XKC74/ST_zkownisI/AAAAAAAAAMk/jJyk7ce_cjw/s1600/fiore.jpg">
<img src="http://3.bp.blogspot.com/_F2w2x4XKC74/ST_zkownisI/AAAAAAAAAMk/jJyk7ce_cjw/s1600/fiore.jpg" width="448" height="336" /></a>


Per chiarirvi maggiormente le idee vi propongo anche un'immagine:


Una volta apportate tali modifiche vi basterà salvare l'articolo.

Spero di esser stato abbastanza chiaro nella spiegazione. Per qualsiasi altra delucidazione non esistate a lasciare commenti! :)

12 commenti:

Alessandro ha detto...

non ho capito bene, praticamente, questo plug-in non permette la visualizzazione dell'immagine, ma la fa solo scaricare??

Kamy22 ha detto...

No, appena clicchi sull'immagine, invece della solita apertura visualizzerai l'immagine centrata con un effetto molto carino...

Helga ha detto...

Ciao baby; a parte il fatto che secondo me dovresti rimarcare che bisogna togliere le parti blu come indichi nell'ultima immagine (pensavo fosse solo un'immagine di riepilogo, per cui non l'ho presa subito in considerazione, mentre è un passaggio essenziale del tutorial, o sbaglio?), la mia immagine si carica e non si apre mai... ho copiato il comando in head e nel codice dell'img ho scritto come segue in immagine:
http://img67.imageshack.us/img67/246/screenshot001cm7.png
bye. Helga

vicio ha detto...

we grz tnt per i tuoi consigli vng spesso nel tuo blog per usare l' image hosting o per leggere le novita' ma adesso e' spuntata una cosa mitica!quando apro il tuo blog si vd una cosa per caricare qst cosa e' trp bella e sarei curioso di scoprire se esiste un post dv parli di questo
grz mille

Kamy22 ha detto...

@ Helga: Ciao il tuo problema è dato da fatto che non hai levato la parte "-h" al link dell'immagine. Osserva bene l'immagine che ho proposto e capirai subito! ;)

Kamy22 ha detto...

@ vicio: Per qunto riguarda la tua richiesta non devi farti alcun problema. Sto già preparando un articolo in merito. Ciao

Simone ha detto...

Ciao! Complimenti per il blog! :) diventa sempre più bello e interessante! Volevo chiederti se era possibile fare una sezione nel blog con password...praticamente per vedere alcuni argomenti devi registrarti...grazie in anticipo! :) (scusa se non sono in tema con il post!)
Ciao

Kamy22 ha detto...

@ Simone: Ciao capisco la tua richiesta... beh qualkosa si potrebbe fare usando gli script ma rischieresti di bloccare tutto il blog con la password. Per questo te lo sconsiglio vivamente!

Guido ha detto...

Dove aver inserito il tutto,non mi funziona,poichè appena clicchi sulla foto la fa solo scaricare!!!Come mai??

Kamy22 ha detto...

Che browser usi?? Se explorer 6 lo devi aggiornare assolutamente!

Ottantotto ha detto...

Kamil non funziona ;)

Kamy22 ha detto...

Non ti preoccupare... attualmente non funzione perchè è stata superata la banda mensile... attendi qualke giorno e tutto tornerà alla normalità!

Posta un commento

Related Posts with Thumbnails