Pubblicato il 13/04/11e aggiornato il

Come inserire automaticamente l'effetto Lightbox in tutte le immagini di Blogger.

Effetto Lightbox per le immagini di Blogger
Ho già dedicato diversi articoli all'Effetto Lightbox che è famosissimo e che permette di aprire le immagini a grandezza naturale in una finestra popup rendendo opaco tutto il resto dello schermo. Vi rimando ai seguenti articoli per conoscere meglio di cosa si tratta

      Illustrazione dell'effetto Lightbox - 
      Gallerie di foto con Lightbox -
      Plugin Video LIghtbox per Wordpress -
Mi è stato segnalato per email che è stato creato uno script per inserire automaticamente l'effetto Lightbox in tutte le immagini del blog. Il lettore del blog non mi ha comunicato l'indirizzo del suo sito altrimenti gli avrei messo il link. Mi ha però dato quello del post in cui viene illustrata questa metodologia alternativa per l'installazione di Lightbox su Blogger. C'è però il problema che lo script presentato nel post non funziona perché non è presente un file javascript necessario all'effetto. Ho rimediato a questa mancanza e adesso vado a presentarvi come ottenere l'effetto Lightbox su tutte le foto del nostro sito, anche quelle già pubblicate, senza inserire rel="lightbox" nel loro codice come si doveva invece fare con i metodi precedenti.
Andare su Design > Modifica HTML e cercare  </head>, subito sopra incollare questo codice

<!--Lightbox Effect Start-->
<link href='https://sites.google.com/site/scriptperilblog/slideshow/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script><script src='https://sites.google.com/site/scriptperilblog/slideshow/lightbox.js' type='text/javascript'>
</script>
<noscript><a href='http://goo.gl/EWkOY' target='_blank'><span style='font-size: x-small;'>Lightbox Effect</span></a></noscript>
<!--Lightbox Effect End-->

Salvare il modello. E' tutto! Quando pubblicherete delle immagini inserite dal computer o dopo averle caricate su Picasa, si creerà in modo automatico una galleria di tutte le foto del blog. Nella parte bassa della finestra popup sarà visualizzato il numero delle immagini presenti che potranno essere navigate attraverso i classici pulsanti Prev e Next che compariranno non appena ci si passerà sopra con il mouse

lightbox automatic effect
Ho inserito una demo in rete con immagini postate con le diverse modalità
L'effetto funziona con Firefox e con Chrome mentre non si vede con IE9. Ieri è uscita la prima versione di IE10 che supporta l'HTML5, speriamo che le cose migliorino anche con questo browser. Concludo osservando che l'effetto è stato anche testato sui nuovi template del Designer Modelli.
Aggiornamento: Le immagini postate con Windows Live Writer non entrano a far parte della galleria quando sono pubblicate con l'opzione Collega a > Nessun collegamento. Se invece sono inserite scegliendo Collega a > Immagine di origine, ci sarà un tentativo di caricamento continuo senza fine. Quindi questo effetto funziona solo con le immagini postate attraverso l'Editor ufficiale di Blogger. Buone notizie invece per quello che riguarda Google Friend Connect. Come potete constatare aprendo i due post di prova, l'effetto Lightbox è compatibile con GFC, per verificarlo cliccate sul mio avatar.
Aggiornamento n°2: Adesso la galleria riguarderà solo il singolo post e non tutto il blog. Se ci sarà una sola immagine come in questo articolo, non si vedrà il numero delle foto nella parte bassa. 
Aggiornamento n°3: Se avete problemi con l'Effetto LightBox nativo di Blogger, seguite le istruzioni di questo articolo.




51 commenti :

  1. ehm... l'ho messo... però dato che carico le immagini da wlw e nel collegamento scelgo "nessuno" per evitare il doppione... non mi dà l'effetto. Che dovrei mettere? Tieni conto che io le carico sempre in formato originale

    RispondiElimina
  2. Ciao Parsifal,
    Notavo poco fa che sul mio blog non si vede più la finestra di google friend connect. Pensavo fosse un problema mio e stavo impazzendo con l'HTML, ma nella mia visita quotidiana al tuo ottimo sito ho notato lo stesso problema. Però su altri blog funziona normalmente. Boh.

    RispondiElimina
  3. ciao! qualcuno sa dirmi se il problema di lightbox persiste con il widget di google friend connect? quando impostavo lightbox non funzionava più il widget dei followers. Infatti a tuttora sto usando lytebox che non mi da problemi, ma devo sempre aggiungere rel="lytebox" e la cosa dopo un po' rompe. Grazie di già ;)

    RispondiElimina
  4. @Soffio di Dea
    Non ho testato con WLW ma si dovrebbe mettere Collega a Immagine originale

    @pda
    GFC Si vede forse è un problema del tuo browser

    @Santiago
    C'è una incompatibilità di base tra Lightbox e Google Friend Connect. Solo in alcuni modelli riescono a essere compatibili.

    RispondiElimina
  5. Ho testato l'effetto con le immagini pubblicate mediante WLW. Leggere aggiornamento.

    RispondiElimina
  6. Bello! é proprio ciò che stavo cercando però non riesco a farlo funzionare... io inserisco le immagini con il box di blogger e le carico su imageshack...

    RispondiElimina
  7. @SE-Gen
    ImageShack non l'ho testato. Inserendo le immagini con l'Editor di Blogger o tramite l'URL preso da Picasa funziona.

    RispondiElimina
  8. Ma l'unica cosa che devo fare è inserire solo il codice che hai postato, giusto? sicuramente sbaglio io qualcosa...

    RispondiElimina
  9. @SE-Gen
    Può darsi che nel tuo modello non funzioni.

    RispondiElimina
  10. Probabile anche questo... ho un modello del cavolo...mi chiedevo, restando sul mio modello, se esisteva un modo per dare ai widget ed ai post un box con gli spigoli tondi...

    RispondiElimina
  11. @SE-Gen
    Tanto vale cambiare modello. Bisogna usare il tag border-radius
    http://www.ideepercomputeredinternet.com/2011/03/come-creare-cerchi-o-rettangoli-con-gli.html
    ma non è cosa semplicissima.

    RispondiElimina
  12. Ok grazie ancora ;)
    Mi sa che lascio perdere :D

    RispondiElimina
  13. non capisco perchè nel codice c'è un link che rimanda al tuo sito goo.gl/EWkOY spero che sia un'errore perché se è un trucchetto per guadagnare visite del sito veramente non avrei parole....

    RispondiElimina
  14. @ferramroberto

    Tu sei un esperto di informatica ma una persona come Ernesto non merita un'accusa come la tua.

    RispondiElimina
  15. io non faccio alcune accuse solamente chiedo perché ci deve essere un link verso questo articolo speravo che sia un'errore ma notando anche altri codici ho visto che è presente e molto probabilmente lo scopo è portar visite al sito. non accuso nessuno solo che per far visite al sito questo mi sembra veramente uno skifo scusa il termine

    RispondiElimina
  16. @ferramroberto
    Non è un trucchetto. Si chiama "Credit" ed è semplicemente una attribuzione di paternità del widget. In quasi tutti i gadget è presente il link verso il post con le istruzioni per l'installazione. In questo caso c'è l'indirizzo ma non c'è link attivo. Se ti fa schifo padronissimo di non utilizzarlo. Ho scritto centinaia di articoli di tutorial di aiuto ai blogger, ho risposto a migliaia di commenti di richieste di delucidazioni e a centinaia di email e non ho mai chiesto niente a nessuno. Passare per un approfittatore mi sembra francamente ingiusto e ridicolo...

    RispondiElimina
  17. @Ernesto T.

    Grande Parsifal. :)
    Questi commenti non dovresti nemmeno prenderli in cosiderazione. Chi ti conosce e segue periodicamente, sa bene che tipo di persona sei e cosa fai per la comunità gratuitamente. Fottitene. :)

    Ciao.

    RispondiElimina
  18. Parisfal, a riguardo di quanto sostieni nell'aggiornamento numero 2, confermo quanto dici, ma se le immagini si aprono dalla Home del Blog e non dal singolo articolo, si vedranno nella galleria tutte le immagini presenti nella pagina. Sarebbe possibile fare in modo che anche dalla Home si apra solo l'immagine o le immagini presenti nel dato articolo?

    Ciao e grazie. :)

    RispondiElimina
  19. @Ernesto T.
    Ho scritto centinaia di articoli di tutorial di aiuto ai blogger, ho risposto a migliaia di commenti di richieste di delucidazioni e a centinaia di email e non ho mai chiesto niente a nessuno.

    che c'era con il "credit" che hai inserito?
    nessuno ti chiede di fare il blogger le tue guide sono visibili da tutti o no?

    quello che mi dispiace è che almeno il buon senso di dirlo nell'articolo
    una volta che uno lo installa che bisogno c'è del link nel codice?
    mi dispiace perché leggevo ogni tanto il blog ma visto come è mi sa che tolgo i feed
    saluti

    RispondiElimina
  20. @LeNny
    Purtroppo non credo sia possibile. Si forma automaticamente la galleria rispetto al numero di immagini visibili nella pagina, se è un post solo quelle che sono presenti nell'articolo, se è l'Homepage tutte quelle presenti negli articoli della Home. Questo vale anche per le pagine delle etichette.

    RispondiElimina
  21. @Ernesto T.

    Tranquillo, va benone ugualmente. Tnx. :D

    Ciao. :)

    RispondiElimina
  22. @ ferramroberto: scusami, ma che discorsi sono? Cioè Ernesto si sbatte e crea per tutti noi dei widget gratis, ma poi è giusto che li firmi. Picasso non firmava le suo opere?! Se vai in giro per il web, a cercare soluzioni per blogger, ti renderai conto che sono tutte firmate, ad esclusione di quelle basilari...
    Fine.

    RispondiElimina
  23. @SE-Gen
    La penso come te. Non sono un grande esperto di informatica ma mi sembra una prassi utilizzata da tutti quindi CORRETTA.
    Poi conoscendo il modo di fare di Ernesto, la sua cortesia e disponibilità verso chiunque l'ho trovato una critica eccessiva e ingiustificata. Magari era una serata No.
    Comunque, caro Ernesto, il tuo rank su Alexa sta sempre migliorando e magari a qualcuno......

    RispondiElimina
  24. Parlare di me stesso mi dà un po' fastidio. In relazione a questioni di questo tipo ancora di più.
    Sul web c'è un rapporto di "do ut des". Non si può pretendere di prendere soltanto. Io creo i widget e in cambio, quelli che li usano, mi danno un backlink. Moltissimi gli utilizzano e tolgono il link di attribuzione. Mica li denuncio per violazione di copyright! E' una cosa che riguarda la loro coscienza personale. I widget non offerti automaticamente da Blogger hanno tutti il "credit".
    Essere addirittura accusato di scorrettezza se non peggio, non ci sta proprio.
    Se poi si va nel caso specifico, il link non c'è neppure. Non c'è un testo, una immagine o un qualsiasi elemento in cui cliccando si va a questo articolo. Ho solo messo l'indirizzo a beneficio di webmaster che vanno nel sorgente pagina per indirizzarli al post di istruzioni.
    Ringrazio comunque chi mi ha espresso solidarietà, mi ha fatto piacere :)

    RispondiElimina
  25. @ Ernesto T.
    "Sul web c'è un rapporto di "do ut des". Non si può pretendere di prendere soltanto"
    ci sono sviluppatori che lavorano per passione che nemmeno ci mettono il nome. se le migliaia di persone che sviluppano firefox o software liberi mettessero tutti i fantomatici "credit" il codice sorgente diventerebbe un'enciclopedia
    a stessa ragione potresti mettere i credit di a chi sviluppa lightbox quindi o no?
    ripeto è capibile segnalare la paternità di un progetto o guida ma metterla nascosta questo proprio non è il massimo

    RispondiElimina
  26. Nell'articolo c'è correttamente il link a chi mi ha dato l'ispirazione per il post e lo avrei anche messo a chi me lo ha segnalato se lo avesse indicato nel modulo di contatto.
    Non c'è nulla di nascosto altrimenti non lo avresti notato.

    RispondiElimina
  27. Grazie mio guru!
    Per la prima volta il mio modello ha preso subito il codice!

    Funziona su Firefox..ma naturalmente non su explorer. :(

    La mia galleria comprende le foto dei post della pagina visualizzata.
    Per esempio in home page io visualizzo in lightbox 8 immagini. Ovvero la somma di tutte quelle inserite nei 3 post visualizzati in home page.

    Bello, mi piace! Grazie!!! ♥

    RispondiElimina
  28. @Sarù @ Dolci Creativi
    Sì, è così, la galleria è formata da tutte le foto presenti nella pagina. Se hai etichette con molti post, avrai anche gallerie con molte più immagini ^_^

    RispondiElimina
  29. Ciao Parsifal purtroppo da ieri l'effetto è cambiato e c'è una fastidiosa doppia apertura delle foto, prova un pò a vedere anche tu? Non c'è una soluzione per eliminare il doppio effetto?

    RispondiElimina
  30. @Marco
    Se vai nei post di demo dell'articolo
    http://lightbox-caratteri.blogspot.com/2011/04/immagini-lightbox.html
    http://lightbox-caratteri.blogspot.com/2011/04/immagini-lightbox-2.html
    non mi sembra sia cambiato nulla. Forse hai inserito un widget nel blog che interferisce con l'effetto.
    Se non fosse così prova a ricaricare questi due file
    https://sites.google.com/site/scriptperilblog/slideshow/lightbox.css

    https://sites.google.com/site/scriptperilblog/slideshow/lightbox.js

    su DropBox

    RispondiElimina
  31. @Marco
    Se ti riferisci alla barra orizzontale che si vede in fondo alla pagina con tutte le miniature delle imagini mi sembra che ci fosse stata anche in precedenza e comunque è un buon sistema di navigazione nella galleria.

    RispondiElimina
  32. si è la barra orizzontale è carina, ma io vorrei lasciare solo quella, dai un occhiata al mio blog, il doppio effetto è brutto...
    http://siponto.blogspot.com/

    RispondiElimina
  33. @Marco
    Sono venuto a conoscenza proprio in questo momento che Blogger sta sperimentando un effetto LightBox nativo. E' per questo che lo vedi doppio. Il tuo blog è tra quelli usati come test per questo nuovo effetto automatico di Blogger. Prova a togliere il LIghtbox che hai inserito per vedere come va. Ciao

    RispondiElimina
  34. Ciao. :)

    L'effetto doppio lo vedono tutti coloro i quali hanno inserito il widget di Parsifal (me compreso).

    Ora aspettiamo e se Blogger lo inserisce nativamente va rimosso (doppione).

    Parsi tienici aggiornati. Merci. :)

    Buona giornata.

    RispondiElimina
  35. ok grande Ernesto, grazie mille, togliendo il widget ora va bene, grazieeeeeeeeeeeee

    RispondiElimina
  36. @LeNny
    @Marco
    Certo che quelli di Blogger potevano avvertire. L'ho saputo da un blog argentino che c'era questo test in corso ...

    RispondiElimina
  37. @Parsi:

    Esatto. Non si sa nulla di più? Non vorrei levare il widget per poi rimetterlo finito il test se non diventa definitivo.

    Ciao. :)

    RispondiElimina
  38. @LeNny
    Di ufficiale non si sa nulla. Queelo che ho potuto appurare l'ho pubblicato in questo instant post
    http://www.ideepercomputeredinternet.com/2011/09/blogger-introduce-nativamente-un.html
    Da notare che considera immagine pure l'emoticon :D

    RispondiElimina
  39. Ciao Ernesto, approfitto della tua grande disponibilità e competenza per sottoporti un problema. Ho installato il codice per la funzione lightbox, allo scopo di visualizzare l'effetto, in particolare, in una pagina statica che ho allestito a mo' di presentazione sfruttando una semplice tabella html. ecco la pagina:
    http://lennesimaprova.blogspot.com/p/photogallery.html
    ora, la cosa stranissima è che la slideshow parte correttamente se clicco in una qualsiasi immagine appartenente alla prima e alla terza colonna, mentre invece, cliccando in una delle foto della colonna centrale, si apre su sfondo bianco. Sai dirmi a cosa potrebbe essere dovuto? Ci sono i fantasmi? :-) grazie tante in anticipo!

    RispondiElimina
  40. @sara b
    Onestamente non riesco a capire da cosa dipenda. Dal tuo sorgente pagina mi pare di capire che hai messo il Lightbox automatico quindi tutte le immagini dovrebbero avere lo stesso comportamento :P

    RispondiElimina
  41. esatto! è veramente un mistero... la tabella stessa è di una semplicità basilare, per cui mi resta difficile capire dove sia l'incompatibilità!

    RispondiElimina
  42. @sara b: Ernesto permetti che usi il tuo spazio per chiedere a Sara come ha fatto a fare quella tabella? Vorrei poter mettere le mie torte in una pagina statica e magari aggiungere il collegamento al post. Ma già riuscire a mettere solo le foto con lo slideshow sarebbe ok!
    P.s. il tuo blog promette proprio bene, bellissime foto! :D

    RispondiElimina
  43. @Sarù
    Ti risponderà lei ma presumo abbia usato Windows Live Writer, ha creato una tabella a tre colonne e poi ha inserito le foto.
    L'effetto invece è il Lightbox. Tra un po' tornerà quello ufficiale di Blogger.

    RispondiElimina
  44. @Ernesto: WLW è l'unico modo disponibile? Con il Mac non è compatibile.. mmm... ;-(

    RispondiElimina
  45. @Sarù
    Certo che no. Anzi visto che me lo hai ricordato domani faccio un post su come creare una tabella per tutti coloro che non hanno WLW. Per adesso puoi leggerti le istruzioni in questa guida
    http://xhtml.html.it/guide/lezione/1682/tabella-struttura-di-base/

    RispondiElimina
  46. ciao sarù, ho usato una tabella semplicissima in html, senza windows live writer. non so se posso incollare qui il codice... eventualmente inviami un'email e ti risponderò subito, oppure cerca "tabella base in html" e vedrai che uscirà fuori qualcosa :)

    RispondiElimina
  47. @sarù
    @sara b
    A beneficio tuo e di altri lettori ho già pubblicato un post su come inserire una tabella senza WLW
    http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html

    RispondiElimina
  48. grazie mille, vado subito a vedere: magari risolvo il mio misterioso problema O_O

    RispondiElimina
  49. si ma appare come l'immagine della guida no come la schermata nera che ti ho postato,
    sito: http://my-coloryourlife.blogspot.com/p/galleria-fotografica.html

    RispondiElimina
  50. @Manager
    Per avere la galleria nella parte bassa devi inserire più di una immagine nello stesso post o pagina inoltre senza che abbiano dei link.

    RispondiElimina
  51. Salve Ernesto, intanto complimenti per il sito e per la passione che trasmetti, ho un sito amatoriale e pensavo di utilizzare il codice postato per visualizzare le immagini presenti nelle varie pagine, ma non funziona... Funziona solo sui blog ?
    Un grazie in anticipo. Flavio

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.