Pubblicato il 07/05/09 - aggiornato il  | 16 commenti :

Come inserire Lightbox 2 in Blogger per ottenere con le foto effetti speciali e slideshow.

Lightbox è adesso arrivato alla versione 2.04 e può essere scaricato da qui. Il pacchetto comprende un documento CSS, 5 file di tipo javascript, una decina di immagini ed un collegamento ad un file html.
Occorrerebbe fare la configurazione ma per fortuna c’è chi l’ha già fatta. Quindi per integrare Lightbox nel blog occorre semplicemente andare su Layout>HTML, scaricare il modello completo per un eventuale back-up, quindi, subito prima della riga di codice </head>, cioè nella parte non visibile della pagina, incollare il seguente codice

<link href='http://www.fileden.com/files/2009/4/11/2399868/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://www.fileden.com/files/2009/4/11/2399868/Lightbox/lightbox.j' type='text/javascript'/>
   screenshot
Quindi salvare il modello.  Adesso per pubblicare delle immagini ed ottenere un effetto da scatola illuminata bisogna procedere nel seguente modo.
Le immagini non possono essere caricate dal computer ma debbono essere caricate su un servizio di hosting gratuito tipo Skydrive o Altervista. Quindi quando si inseriscono occorre selezionare l’opzione Aggiungi immagine dal web
image
ed inserire l’URL che si è acquisito dal servizio in cui si è caricata. Successivamente si passa alla modalità HTML ed si aggiunge l’attributo rel=”lightbox”  subito dopo la <a del collegamento. Verrà cioè una cosa del tipo
<a rel=”lightbox” onblur=…
adesso puoi pubblicare l’articolo.
  • Se si usa Windows Live Writer
Le nostre foto debbono essere sempre inserite tramite URL, quindi devono già essere nel web, ma il procedimento si semplifica. Dopo aver cliccato su Immagine si sceglie da Web, si inserisce l’URL, e si clicca su Inserisci
cristina chiabotto lightbox



Nella sezione di destra in Collega a, selezionate URL


image
o, in alternativa, selezionate l’immagine e cliccate sull’icona image per inserire un collegamento,  nella finestra che si aprirà inserite nuovamente l’URL dell’immagine
image 
eventualmente il titolo, necessariamente lightbox nella sezione Rel. Infine ovviamente si pubblica l’articolo.
Per poter verificare l’effetto recatevi nel mio blog di supporto e cliccate in una qualsiasi immagine di questo post.
Le immagine possono essere ridimensionate con le apposite maniglie e, quando ci si clicca sopra, si espanderanno a grandezza naturale.
Se si pubblicano immagini senza il riferimento a lightbox, queste, nel momento in cui ci si clicca sopra non diventeranno a grandezza naturale. Sarà solo possibile acquisirne l’URL di origine cliccandoci col destro del mouse e scegliendo Copia indirizzo immagine.


COME CREARE DEGLI SLIDESHOW CON LIGHTBOX

Occorre inserire in un articolo delle immagini come illustrato nella prima parte del post. Bisogna però avere l’accortezza di inserire il nome dello slideshow nelle immagini che vogliamo ne facciano parte.
In questo caso invece dell’attributo rel=”lightbox” dobbiamo inserire
rel="lightbox[nome-slideshow]"
Se si usa WLW invece di lightbox inseriremo lightbox[nome-slideshow]. Notare le parentesi quadre. Nell’esempio illustrato prima viene una cosa di questo tipo
image
dove il nome, in questo caso Cristina, deve essere lo stesso per tutte le immagini.
Se volete vedere una realizzazione pratica andate sempre nel mio blog di supporto e guardate questo post. Lo slideshow non è automatico e per passare all’immagine successiva o precedente bisogna cliccare su Prev o Next che appaiono ai lati delle foto nel momento in cui ci si passa sopra con il mouse.       
Da notare che lo script di Lightbox non interferisce con quello di Apture, almeno non ho notato nessuna incompatibilità in questi due post che ho pubblicato.



16 commenti :

  1. Ciao! Complimenti per il blog!!!
    Io ho inserito lightbox nel mio blog ed è perfettamente funzionante, però mi si è presentato un nuovo problema: da quel momento la casella dei lettori fissi è scomparsa (o meglio, c'è ancora la casella ma non visualizza più i lettori). Ho notato girando per il web che non solo io ho avuto questo problema... Cosa potrebbe essere?

    RispondiElimina
  2. @marco castagneris
    Potrebbero esserci delle incompatibilità tra lo script di Lightbox e quello dei lettori. Se infatti clicchi su una miniatura si apre una finestra con un effetto simile.
    Ciao

    RispondiElimina
  3. Grazie! ok quindi o lettori fissi o lightbox, ci epnserò su perchè per il mio blog li vorrei entrambi...
    Ancora un'ultima domanda... Oltre a Lightbox c'è un'applicazione alternativa di apertura delle immagini del blog oltre a quella standard (e i pop-up)?

    Grazie ancora...

    RispondiElimina
  4. @marco castagneris
    Ci sono diversi effetti, la cui installazione è illustrata anche in questo blog. Vai nel menù su Effetti.
    C'è per esempio "Expando"
    http://parsifal32.blogspot.com/2009/07/come-ingrandire-le-immagini.html
    "Lytebox"
    http://parsifal32.blogspot.com/2009/11/effetto-lytebox-per-immagini-gallerie.html
    e "Lytebox per iFrame"
    http://parsifal32.blogspot.com/2009/11/come-inserire-una-pagina-web-nel-blog.html
    Ciao

    RispondiElimina
  5. Fatto ieri, ma l'avevo scovato per caso altrove, mi sa che aggiungo il tuo script, così tanto per esser tranquilla.
    Comunque ti volevo dire... Mi pare che vada in conflitto con google connect friends. :S
    O non saprei perché non lo vedo più.

    Secondo te?

    RispondiElimina
  6. Ho avuto la mia conferma... togliendo il codice è ritornato tutto.
    Si può risolvere? --''
    Grazie Ernesto.

    RispondiElimina
  7. Ok, ora parlo da sola. xD
    A parte gli scherzi, ho fatto una ricerca su internet, sembra proprio che JS di Lightobx sia in conflitto con google friends... Che peccato! Ma questo spiega anche perché moltissimi non lo usano...

    RispondiElimina
  8. @Marguerite N.
    Se ci pensi l'effetto Lightbox è molto simile a quello che vedi quando clicchi su un avatar in Google Friend Connect, quindi non mi stupisco che sia incompatibile.
    Si può comunque risolvere inserendo la galleria di foto in una pagina statica in cui sia stata tolta la sidebar con GFC.
    In questo post di prova
    http://prove-parsifal.blogspot.com/2009/05/galleria-di-foto-di-cristina-chiabotto.html
    funziona ancora dopo molto tempo che lo avevo inserito e dopo le molte variazioni occorse in Blogger.
    L'effetto LyteBox non ti piace?
    http://www.ideepercomputeredinternet.com/2009/11/effetto-lytebox-per-immagini-gallerie.html
    Ciao

    RispondiElimina
  9. Cosa intendi per galleria di foto in una pagina statica?
    E' una soluzione alternativa a Lytebox? Io proverei anche questo qui, ma se mi dici che può darmi gli stessi problemi, provo con la prima opzione!

    RispondiElimina
  10. Si inserisce l'effetto con la condizione che deve valere solo nelle pagine statiche. Quindi non appesantisce il blog. Però l'effetto non lo puoi mostrare in un post ma solo in una galleria fotografica inserita in una pagina statica. Qui ci sono delle istruzioni di massima
    http://www.ideepercomputeredinternet.com/2010/01/come-creare-una-galleria-fotografica-in.html

    RispondiElimina
  11. Aaaah ora ho capito...
    No, a questo punto preferisco così com'è. Al limite provo lytebox, anche se sappiamo che probabilmente non verrà lo stesso, ma ci proviamo.

    Peccato però... Ti farò sapere.

    Grazie Ernesto. :)

    RispondiElimina
  12. Ciao! Il codice non funziona. L'autore l'ha modificato.
    Per favore hai già scritto un post, o hai qualche idea, per realizzare una pagina statica come su questo sito:
    http://www.antoniomasini.it/painting/

    RispondiElimina
  13. @Amicale
    Il codice nel blog in cui l'ho provato funziona, puoi controllare. Può darsi che si sia superata la larghezza di banda. Prova il codice di quest'altro articolo perché è più recente
    http://www.ideepercomputeredinternet.com/2009/10/ho-caricato-su-un-altro-server-gli.html
    Quella che mi hai linkato è una pagina di un blog su Wordpress. Si vede dalla cartella wp-content/uploads su cui sono state caricate le foto andando sulla sorgente della pagina. In questo caso esistono dei plugin che fanno in automatico tutto il lavoro. Cosa impossibile su Blogger

    RispondiElimina
  14. Dopo varie prove con il codice che avevo preso sulla tua fonte:Creareblog (una volta funziona e una volta no ...) ho provato Expando e Lytebox. Mille volte meglio! Grazie per l'aiuto.

    RispondiElimina
  15. E' possibile aprire i posts e visualizzarli con effetto lightbox?

    In pratica vorrei che il visitatore da homepage cliccando sul titolo del post o su leggi tutto, visualizzasse il contenuto del post con effetto lightbox e magari con adsense al loro interno.

    RispondiElimina
  16. @Calcio Napoli 365
    Mi sa che pretendi un po' troppo ^_^
    Al massimo si può creare un effetto Lytebox in un iFrame
    http://www.ideepercomputeredinternet.com/2009/11/come-inserire-una-pagina-web-nel-blog.html

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy