Integrare Lightbox con Blogger: rendete spettacolari le vostre foto!


image Lightbox è uno script che ha avuto molto successo in rete che permette di applicare particolari effetti di ingrandimento alle immagini di un sito. Un esempio vale più di mille parole, quindi visitate questa pagina e cliccate sulle varie foto per capire cosa è capace di fare Lightbox.

Dalla versione 2 (adesso Lightbox è giunto alla versione 2.04) è anche possibile creare slide di immagini.

Con questo articolo, riuscirete a integrare Lightbox con Blogger in pochi minuti, e una volta fatto potrete applicare l’effetto di ingrandimento alle varie immagini dei vostri post. Se avete un photoblog o siete artisti che pubblicano i propri lavori sul blog, o comunque volete stupire i visitatori con un effetto davvero d’impatto, Lightbox fa per voi!

Lightbox è leggero e non appesantirà in maniera significativa il caricamento del vostro blog.

Download e configurazione del pacchetto di Lightbox

Da questa pagina potrete scaricare il pacchetto di installazione di Lightbox. Nella pagina sono anche presenti le istruzioni (in lingua inglese) per la configurazione del pacchetto, che possiamo sintetizzare velocemente così:

  • pubblicazione in rete delle immagini usate dal pacchetto (dentro la cartella image) e del foglio
  • modifica dello script lightbox.js per cambiare l’indirizzo delle immagini utilizzate
  • aggancio degli script nella pagina HTML, come spiegato dall’autore

Per Blogger ho già fatto io l’operazione: basterà fare un copia e incolla.

Integrazione di Lightbox con Blogger

Dalla bacheca, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercare questa riga di codice:

</head>

Subito sopra, incollate questo codice:

<link href='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/>

<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.j' type='text/javascript'/>



E salvate il template. Lightbox è già integrato col vostro blog.



AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.



Pubblicare immagini dall’editor online di Blogger



Blogger ha di base un brutto meccanismo di gestione delle immagini che infastidisce l’integrazione con Lightbox e che sto cercando di risolvere (in rete non si trovano molte informazioni sul connubio Blogger + Lightbox, quindi non ho potuto confrontarmi con nessuno), e per poter applicare l’effetto d’ingrandimento alle immagini queste dovranno già trovarsi in rete. Il che significa che prima dovrete pubblicarle utilizzando un servizio come Imageshack o Skydrive, recuperarne l’indirizzo e inserirle nei post tramite l’URL:



image



Una volta caricata l’immagine, andate in Modifica HTML del post:



image



E all’inizio del codice che rappresenta l’immagine, aggiungete la parte che evidenzio in rosso:




<a rel="lightbox" onblur="try {parent…




Sicuramente un po’ macchinoso. Specialmente quando avrete più immagini e avrete già scritto il post, ci sarà molta confusione. Per fortuna, Windows Live Writer ci semplificherà, come al solito, la vita!



Ovviamente, potete ridimensionare l’immagine dentro il post, tanto ci penserà Lightbox a ingrandirle!



Pubblicare immagini con Windows Live Writer



Con Windows Live Writer la cosa si fa più semplice. Inserite l’immagine nel post cliccando nell’apposita icona nella toolbar:



image



Anche in questo caso dovrete selezionare “Da Web” e inserire l’indirizzo dell’immagine. Una volta inserita l’immagine, nelle opzioni a destra selezionate URL nella voce “Collega a” (per far apparire le opzioni dell’immagine, basta cliccarci sopra):



image



Inserite l’indirizzo dell’immagine e nella voce Rel la parola lightbox:



image



Attenti a non sbagliare, perchè altrimenti non funzionerà niente. In questa finestra potete anche inserire un titolo per l’immagine, che comparirà sopra l’immagine una volta ingrandita:



image



Scrivete il vostro post e pubblicatelo. Ecco come apparirà nel blog:



image



Sembra la vecchia solita immagine vero? Ma cliccateci sopra ed ecco la magia:



image





Anche in questo caso potete rimpicciolire l’immagine per occupare meno spazio nel post. Come ho scritto all’inizio dell’articolo, Lightbox permette anche di creare delle gallerie di immagini. A breve seguirà un altro post proprio su questo argomento. Nel frattempo, per qualsiasi difficoltà, lasciatemi un commento.



Per le immagini di esempio all’inizio del post, si ringrazia Paul van Roekel.


Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

50 commenti:

Tenebrae ha detto...

Ho il cervello mezzo annebbiato da una brutta influenza, e solo dopo aver pubblicato il post ho notato un errore nel titolo. Abbiate pazienza e prendetevela con mia moglie, mi ha contagiato lei :)

amrita ha detto...

bello avere qualcuno a cui dare la colpa....

Iole ha detto...

Io avevo già provato ad inserire Lightbox2 nel mio blog e funzionava correttamente sia su Chrome che su Firefox ma non su Internet Explorer. Anzi su quest'ultimo non riuscivo più ad aprire la pagina e visualizzavo un alert con scritto "Impossibile aprire la pagina http://...". Questo è accaduto anche ad un mio amico.
Sul sito di Lightbox2 però sono consigliati altri due script, li ho provati e ho deciso di inserire nel mio blog Lytebox, che in più offre la possibilità di creare degli slideshow.

Anonimo ha detto...

Ciao Orazio, Complimenti per il sito, volevo sapere da te un'informazione, dove posso hostare un file .js in modo che venga caricato da blogger? grazie in anticipo gianluca.
per contattarmi: admin@ilmigratore.com

Tenebrae ha detto...

@amrita: uno dei vantaggi dell'essere sposato!

@iole: ho provato gli esempi che ho fatto anche su internet explorer e non ci sono stati problemi, forse era un problema delle prime versioni? conosco lytebox, è un derivato da lightbox... altrettanto interessante è thickbox (anzi, pure più potente, ma io preferisco lightbox)

@anonimo: io consiglio sempre skydrive: non si hanno limiti di banda ed è gratuito

°°SkleromuciLL° ha detto...

ciao!!
Allora intanto volevo ringraziarti per questo bellissimo e chiarissimo blog senza il quale non avrei potuto aggiungere delle cose al mio blogghino...

Poi, questo non è il post giusto, ma non sapendo se ricevevi notifica dei post più vecchi ti scrivo qui... ho un piccolo dubbio sul "Blogumus, il label cloud animato in flash"... l'ho messo nel blog e funziona alla perfezione...!! ^^
la domanda è... se il procedimento per mettere tutte le etichette è tutto manuale, un'etichetta alla volta, questo comporta che per aggiungere alla lista ogni nuovo post con quella determinata etichetta dovremmo rilincarli tutti nuovamente, o si aggiungeranno automaticamente alla lista?!?

spero di essere stata chiara e non troppo prolissa!! Grazie ancora!! XD

Iole ha detto...

@tenebrae: anch'io ho provato gli esempi su internet explorer e funzionavano benissimo. Ma forse sul blog lo script di lightbox andava in conflitto con qualche altro script.

AUTOdiMERDA ha detto...

effetto d'impatto ma completamente inutile e fastidioso

Tenebrae ha detto...

@auto: non sono d'accordo, pensa a tutti i vari photoblog o chi pubblica in rete le proprie creazioni grafiche (e ti assicuro che sono tantissimi). con lightbox puoi inserire un piccolo thumbnail e poi cliccandoci sopra vedere l'immagine a pieno schermo, e tutto dal tuo blog senza ricorrere a servizi esterni sponsorizzati

è vero, su blogger basta cliccare su un'immagine e si viene reindirizzati alla foto intera, ma di certo l'impatto non è lo stesso e presto spiegherò anche come creare delle slide, cosa che non puoi fare nativamente con blogger, non a pieno schermo come con lightbox

poi, chiaro, non serve a tutti, non a me per esempio, ma sul tuo blog un pensierino ce lo farei ;)

Tenebrae ha detto...

@skleromucill: ricevo le notifiche, tranquillo/a!

dipende come l'hai inserito: se l'hai inserito con questo post, devi aggiungere eventuali nuove categorie che crei, se l'hai aggiunto con questo si aggiorna in automatico

hipst3r ha detto...

Accidenti, stavo scrivendo dello stesso identico argomento e ora mi trovo piuttosto in imbarazzo... Postare o non postare, questo è il problema...

°°SkleromuciLL° ha detto...

@Tenebrae:
Ok!! ^^
avevo inserito la prima versione, ma ora ho modificato e ho messo la seconda che mi hai proposto, funziona alla perfezione!! ^^

Che altro dire... grazie ancora dell'aiuto, sei stato gentilissimo!!

Ti linko subito nel mio blog, a presto! XD

Anonimo ha detto...

Forse non è la sezione adatta, comunque: esiste un servizio che permette ai visitatori di ingrandire o diminuire il testo? Avete presente quei due bottoncini con su scritto A+ e A-? Grazie molto dell'aiuto.

Federico Distefano ha detto...

Ciao!
Non è esattamente quello che speravo ma ti ringrazio!
Piuttosto, come si fa a far indicizzare anche le immagini che mettiamo, da Google?
Se cerco una qualsiasi di quelle che ho messo non salta fuori nulla...
Buona serata e ancora grazie!

P.S.= Non mi attira molto 'sto Lightbox, anche perchè mi sembra più complicato per "salvare l'immagine" che viene presentata.
Oltre ad avermi dato l'impressione di essere un pelo più lento del normale caricamento delle immagini su altra pagina o scheda.
Me lo guarderò con molta attenzione, tuttavia.
:)

hipst3r ha detto...

Alla fine ho deciso di postare. Ho descritto anche come far funzionare l'effetto con le immagini hostate su Blogger (Picasa).

Grazie per il tuo lavoro.

Chiar(osk)a ha detto...

grazie tenebrae!!!!!
*_____________* BLIG BLING BLING
(lucciconi agli occhi)
appena posso provo ad inserirlo nel blog!

Chiar(osk)a ha detto...

E' stato più facile di quello che pensavo!
funziona perfettamente
me felice :D

Massimo Albanese ha detto...

Grazie per i tuoi consigli.
Tuttavia dopo una prima giornata in cui tutto a funzionato a dovere...
...da qualche ora succedono due cose strane:
1 risulta difficile caricare la pagina con IE__;
2 Quando carica...è sparito l'effetto...

Grazie di nuovo

Massimo Albanese ha detto...

a già...
il link è questo: http://www.ivolatori.blogspot.com/

AUTOdiMERDA ha detto...

Ciao Tene sai cosa.. per il mio blog tutto sommato usando il servizio di Slide.com per le foto mi trovo splendidamente, ingrandire a tuttoschermo foto di dimensioni diverse può essere rischioso soprattutto con le risoluzioni basse, magari per chi pubblica foto proprie da fotocamera il discorso cambia. Le uniche pubblicazioni con thumb che faccio sono i wallpaper che creo ma che preferisco lasciare in vecchio stile per non creare dubbi ai neofiti. Sicuramente è un effetto carino cmq LBox.

O:O ha detto...

Funziona benissimo, ho aggiunto il tuo banner a http://invideoshow.blogspot.com, ciao Alessandro

O:O ha detto...

Che strano oggi non funzia più, strano questo lightbox, cosa può essere successo

Giugiu' ha detto...

Ciao, io non riesco a far partire questa funzione ... dove sbaglio?
grazie mille

Tenebrae ha detto...

Come ho appena segnalato, Skydrive ha cominciato a creare problemi con i javascript. Ho aggiornato il post e adesso tutto funziona.

Se riscontrate problemi simili anche in altri post, vi invito a segnalarmeli

Riki ha detto...

Ciao, io non sono riuscito a farlo partire..uso blogger con windows live writer..ho copiato lo script html..salvato..poi con windows live writer faccio il procedimento che dici..ma io ho l'ultima versione..e non trovo la voce "collega a url"..riesco a collegare solo a post precedente o a voce di collegamento automatico..per il resto faccio come dici tu..ma non funziona nulla..altra domanda: le immagini posso inserirle solo da web e non da pc?

Tenebrae ha detto...

@riki: quel collega a url è fondamentale. lo trovi cliccando sull'immagine nei pannelli a destra

purtroppo le immagini possono essere inserite solo da web

Riki ha detto...

l'ho trovato..grazie dell'aiuto..ma le immagini non funzionano in ogni modo..eppure ho seguito la procedura per filo e per segno..:-(

Runnix ha detto...
Questo commento è stato eliminato dall'autore.
Runnix ha detto...

Il codice che hai usato per far funzionare lightbox su blogger forse è un po' arrangiato, soprattutto quell'estensione "js" modificata in "j" per poter caricare il file su fileden.com , ma funziona alla grande!
Tutti gli altri blog che parlano di lightbox hanno dato una soluzione diversa che prevede maggiori modifiche e adattamenti. Complimenti! Gran bel tocco di genio!

Tenebrae ha detto...

@runnix: chiaramente cerco di risparmiare lavoro a chi mi legge, poi ovviamente i più tecnici possono benissimo prendersi il codice e farne l'uso che ritengono più opportuno, come faccio io d'altronde :)

grazie dei complimenti, fa piacere quando viene notato anche il lavoro "dietro le quinte" :)

thor ha detto...

ho creato il mio primo blog,ma non riesco a inserire le etichette,o meglio,le aggiungo dal layout,ma poi non vengono visualizzate nel blog.cosa faccio?
grazie

www.lushaolong.blogspot.com

Trinity ha detto...

ciao, ho eguito le tue istruzioni per quanto riguarda la slideshot (lightbox) mi ha salvato tutto ma io nn visualizzo niente :-/ e l stessa cosa mi è successa col contavisite :(( sicuramente qualcosa sbaglio io, ma non so cosa

Steven ha detto...

Ehi ciao. Bellissimo effetto...solo che su una serie di foto che ho insierito questo effetto me lo applica solo alla prima foto e non a tutte. Come mai?

Steven ha detto...

Ah ecco trovato l'errore!In pratica ogni volta che si aggiunge una foto bisogna pubblicarla altrimenti si cancella "lightbox" dalla casella...Ora va benissimo...Scusa,GRAZIE ancora CIAOOOO!!!

Recenso ha detto...

Io sto cercando il contrario invece, cioè uno script che nell homepage visualizzi solo un thumbnail della prima immagine del post anziché a dimensione intera. So che esiste qualcosa per wordpress ma non trovo per blogger

Mr E ha detto...

Vecchio, sei un grande :-) sto integrando lightbox nel mio blog più recente...appena ho tempo ti linko ;-) http://emanuele-secco.blogspot.com/

Tenebrae ha detto...

@recenso: anch'io in passato ne ho cercato uno ma non ne ho trovati che mi soddisfacessero, la cosa poi non mi è più servita e non mi sono messo a scriverne uno io

se trovi qualcosa di interessante però fammi sapere!

@Mr E: fammi sapere quando, che aggiungerò anche il tuo all'elenco dei blog che mi linkano!

Mr E ha detto...

@Tenebrae ho integrato lightbox e linko il tuo sito sul mio blog nuovo(l' indirizzo è nel commento precedente).
Ho un problema con lightbox. Una volta che lo aggiungo al template, non mi si visualizza più il box di coloro che seguono il blog.
Qualcun' altro ha riscontrato questo problema. Ho provveduto a caricare gli script sul google sites per vedere se il problema perdurava...ma lo fa ancora...consigli?

Massimo ha detto...

Ciao Tenebrae. Ti chiedo una mano a capire come far andare il lightbox. Mi sa che ho fatto un po' di confusione. Il blog è: www.beatstonemarine.com
Grazie mille e ciao

Alessandro ha detto...

Ciao ragzzi,

ma è ancora funzionante quel codice? Io lo metto nel mio blogger, ma non vedo nulla di nuovo :(

Grazie

Ale

Patrizia Corriero ha detto...

Ciao!Il tuo tutorial è stato l'unico chiaro ed esaustivo nell'affrontare questo argomento..

Volevo solo capire come realizzare una gallery fotografica con lightbox..Poiché sono una fotografa e vorrei esporre i miei lavori su Blogspot,dando alle mie foto un aspetto professionale.
Se tu potessi aiutarmi,ne sarei felice..

Grazie,

Patrizia

Patrizia Corriero ha detto...

Purtroppo ho provato ad inserire la parola lightbox all'interno del codice html della foto..provo a cliccarci su ma continua a caricare senza fare apparire la foto con Lightbox

marco castagneris ha detto...

Ciao! Io ho installato lightbox ed è perfettamente funzionante; c'è un problema però, nel momento in cui ho modificato il codice non mi si visualizzano più i lettori fissi... Da cosa può dipendere?
Girando sul web ho letto che è capitato anche ad altri ma la soluzione non l'ho ancora trovata...

Martha ha detto...

Ciao Tenebrae, è da un pò che non utilizzavo lightbox, ho inserito nel mio blog un serie di foto seguendo tutti i passi, secondo me, ma quando clikko sulla foto mi fa vedere che la carica all'infinito e non si schioda come posso risolvere?
Thanks :)

Ugo ha detto...

Grande Tenebrae!!! sei stato l'unico a farmi funzionare questo effetto alle foto. Con la modifica dell'html suggerita da altri siti non succedeva nulla, forse per qualche errore nello script o nel css. Grazie!

Diego

Ugo ha detto...

cacchio ho parlato troppo presto??? non visualizzo più i lettori fissi e l'iscrizione al sito come per marco! :/ riesci ad aiutarci?

Ugo ha detto...

se ti può servire ho notato che il problema della misteriosa sparizione dei sostenitori e l'iscrizione al sito non c'è su internet explorer ma neanche funziona l'effetto lightbox. Su chrome invece funziona lightbox ma spariscono i sostenitori :(

ABA - Kinshasa ha detto...

ciao
ho aperto 3 mesi un blog per postare e permettere di commentare/votare le foto di un concorso di pittura.
mi sono resa conto che blogger non è molto adeguato perchè per esempio visto che le foto sono molte (39 murales da vedere/commentare/votare) è possbile vederle una alla volta chiudendo ogni volta una foto e riaprendo ogni volta quella successiva... insomma foto poco fruibile soprattutto per una "giuria"..
ho pensato a mettere il link su flickr ma significherebbe spostere il tutto su flickr, così ho cercato un applicativo dentro/per blogger
lighbox permette solo di ingrandire e cmq non sono riuscita a caricarlo..
ci sono altri strumenti/gadgets possibili per realizzare i miei intenti?
grazie tante, da una neofita ;)

Discosafari ha detto...

ciao, ho provato a seguire le istruzioni ma sebza risultato (forse l'articlo èun po vecchio e le cose sono cambiate). ad ogni modo ho ricaricato sul mio blogger il template che avevo precedentemente salvato, ma continua a presentarsi un problmea nella visualizzazione di alcune immagini delle icone dell'editor dei post: alcune non si vedono (ma si vede il title e sono funzionanti). Hai idea da cosa possa dipendere?
grazie in anticipo

Francesca

Tobia Alberti ha detto...

E' possibile rimuovere "Show original" ??
Questo è il blog: http://tobiaalberti.blogspot.com/


Prima di lasciare un commento, leggete qui

Posta un commento