Effetto Lightbox in Blogger per gallerie di immagini, video, link, iframe e flash con lo script PrettyPhoto.

Nei blog della piattaforma Blogger di default da diversi anni è stato implementato un Effetto Lightbox nativo per le immagini. Se abilitato quando si clicca su una immagine questa viene mostrata a grandezza naturale su uno sfondo della pagina oscurata. Nella parte bassa della pagina verranno visualizzate le miniature di tutte le immagini presenti nella pagina per navigare tra di esse cliccandoci sopra.

Il Lightbox nativo di Blogger può anche essere disabilitato andando su Bacheca -> Impostazioni -> Post, Commenti e Condivisioni -> Post -> Mostra le immagini con Lightbox. Si seleziona il No al posto del Sì nelle opzioni quindi si clicca in alto a destra su Salva Impostazioni. 

Come modificare colore, opacità e icona di chiusura del Lightbox nativo di Blogger.

Il Lightbox è un javascript che permette di visualizzare immagini e video che riempiono lo schermo oscurando contemporaneamente il resto della pagina. Il primo Lightbox fu realizzato da Lokesh Dhakar ma da allora questa tecnica è stata utilizzata da altre librerie simili.  Il suo successo è dovuto anche alla sua natura open source e a essere stato integrato nella libreria jQuery. Anche su Blogger è stato inserito un effetto che ricorda il Lightbox ed è chiamato proprio in questo modo per abuso di linguaggio.

Il Lightbox nativo di Blogger può essere attivato o disattivato andando su Impostazioni > Post e Commenti > Mostra Immagini su Lightbox per poi selezionare Si invece di No. Con il Lightbox attivato quando un lettore clicca sopra a una foto presente in un post questa verrà messa in evidenza, il resto del layout sarà oscurato lasciando vedere la pagina solo in trasparenza. Nella parte bassa si visualizzeranno tutte le miniature delle immagini presenti nella pagina che potranno essere navigate con  il mouse mentre in alto a destra si vedrà la crocetta per chiudere il Lightbox. Si potrà chiudere comunque cliccando in un qualsiasi punto dello sfondo.  Ecco un esempio in questo screenshot

Come personalizzare il Lightbox nativo di Blogger.

Quando il lettore clicca su una immagine pubblicata in un post di Blogger questa viene evidenziata a grandezza naturale oscurando parzialmente tutto il resto del layout. Questo effetto è denominato Lightbox e Blogger lo ha introdotto in modo nativo qualche anno fa. In basso si visualizzerà una barra con le miniature di tutte le immagini presenti nella pagina su cui il lettore potrà cliccare per visualizzarle rapidamente nella stessa modalità.  Blogger dà però la possibilità di disattivare il Lightbox nativo andando su Impostazioni > Post e Commenti e scegliendo No su Mostra Immagini con Lightbox.

Usando dei tool tipo Ispeziona elemento, Firebug per Firefox o Firebug Lite possiamo determinare quali siano i selettori delle classi del Lightbox per poterlo modificare nei colori o in altri parametri. Possiamo cioè passare da un Lightbox classico come questo

Come disabilitare il Lightbox nativo di Blogger nelle pagine statiche o in un determinato articolo.

Il Lightbox nativo di Blogger ha suscitato molto dibattito fin dalla sua introduzione visto che ci sono utenti che lo amano molto e che lo usano mentre altri proprio non lo sopportano. Ricordo che si può attivarlo o disattivarlo andando su Impostazioni > Post e Commenti > Mostra immagini con Lightbox e scegliere Sì oppure No quindi salvare le impostazioni. E' anche possibile in qualche modo personalizzare il Lightbox arrotondando i bordi dell'immagine o modificando il colore dello sfondo.

Coloro che postano le immagini con Windows Live Writer non visualizzeranno tale effetto nei loro articoli. Comunque è stato posto rimedio anche a questo problema inserendo il collegamento alla immagine originale su Picasa. Facciamo adesso l'ipotesi che un utente di Blogger usi il Lightbox nativo ma che abbia creato una galleria di immagini in una pagina statica con un altro effetto tipo Lytebox, Facebox, PrettyPhoto o Shadowbox. In quella galleria saranno visualizzati contemporaneamente i due effetti con ovvie ricadute negative dal punto di vista estetico. Vediamo quindi come disabilitare il Lightbox nativo di Blogger solo nelle pagine statiche o al limite solo in una pagina statica o in un singolo post del nostro sito.

Come far funzionare il Lightbox di Blogger anche con le immagini postate con Windows Live Writer.

Pubblicare i post tramite Windows Live Writer aumenta moltissimo la produttività di un blogger. Da quando uso questo Editor penso di impiegare la metà del tempo a scrivere un articolo. I vantaggi sono anche dal lato SEO visto che si possono creare dei collegamenti automatici a porzioni di testo senza perdere tempo a inserire il link di collegamento. Il vantaggio più grosso si ha però con le immagini specialmente se si usano molto gli screenshot. Una immagine si può postare in una articolo semplicemente con il copia-incolla senza bisogno di altre operazioni.

Caricare le immagini in questo modo ha però due controindicazioni che sono molto sentite soprattutto dalle blogger donne. Nei Blog Roll e in Elenco lettura della Bacheca queste immagini non vengono visualizzate come miniatura. Inoltre le foto postate con Windows Live Writer non si visualizzano con l'Effetto Lightbox nativo di Blogger, nel senso che se ci si clicca sopra non succede assolutamente nulla.

Vediamo come sia possibile continuare a utilizzare WLW cercando di ovviare a questi due inconvenienti. Per visualizzare la miniatura di una immagine anche nel Blogroll basta caricare quella più significativa dell'articolo su Picasa, metterla Windows Live Writer attraverso Inserisci > Immagine > Dal Web

Come personalizzare il Lightbox nativo di Blogger.

Da ieri è tornato nuovamente su tutti i siti della piattaforma Blogger il Lightbox nativo. Si tratta di cliccare su una qualsiasi immagine priva di collegamento per visualizzarla a grandezza naturale in uno sfondo scuro. Ricordo che questo effetto può essere disabilitato andando su Impostazioni > Post e commenti > Open Images in Lightbox e selezionando il NO.

Di default in tutti i blog che hanno lasciato questo effetto, vengono mostrati gli stessi stili per quanto riguarda il colore di sfondo, l'opacità, le icone, la barra della galleria ecc. Attraverso opportuni CSS si può personalizzare il Lightbox per renderlo più adatto ai colori e allo stile del nostro blog.

    Qui di seguito posto uno screenshot in cui vengono mostrati gli elementi che si possono modificare

Torna il Lightbox nativo su Blogger ma adesso è possibile disabilitarlo.

Con un post su Blogger Buzz, blog ufficiale di Blogger, che ha sposato i nuovi modelli Dynamic Views, è stato annunciato il ritorno dell'Effetto nativo Lightbox. La novità importante risiede nel fatto che saranno gli utenti a scegliere se usarlo o meno. Non ci sarà quindi più bisogno di tecniche particolari per eliminare questo effetto quando fosse indesiderato.

Come impostazione di default tutti i blog avranno il Lightbox installato e le immagini senza link, se cliccate, si apriranno a grandezza naturale su uno sfondo oscurato. Se in una pagina sono presenti più immagini, se ne vedrà in basso la galleria con la possibilità di navigazione e con il link diretto a ciascuna foto 

Ufficializzato il nuovo Effetto Lightbox di Blogger: gli script per disabilitarlo.

Finalmente è arrivata la comunicazione ufficiale della introduzione in tutti i blog dell'Effetto Lightbox nativo. La notizia è stata data da Blogger Buzz. Molti di noi se ne erano già accorti da diversi giorni. Credo di essere stato il primo ad aver dato la notizia in Italia. Intanto viene anche comunicata una feature particolarmente interessante di cui confesso di non essermi accorto.

L'Effetto Lightbox funziona solo con le immagini in cui non sia stato inserito un link. Se per esempio avete creato un menù con delle immagini che puntano a delle pagine del vostro blog, se ci cliccate sopra, non si aprirà la finestra del Lightbox, ma verrà correttamente aperta la pagina di destinazione.

• Esempio di una pagina con link e una senza link -

Come eliminare l'Effetto nativo di Blogger e lasciare funzionante il Lightbox installato manualmente.

Il metodo già illustrato per eliminare l'effetto Lightbox, che da qualche giorno viene testato in molti blog su Blogger, inibisce anche il corretto funzionamento dello stesso Effetto Lightbox inserito nel modello manualmente. LeBlogger ha pubblicato un nuovo script che invece pare inibire l'effetto nativo di Blogger senza provocare alcun problema a quello che avevamo già installato nel template.

L'ho testato su questo post di prova dell'effetto Lightbox e funziona egregiamente sia con Firefox, sia con Chrome. Per l'installazione si va su Design > Modifica HTML, si cerca la riga </html> (è l'ultima) e, immediatamente sopra, si incolla il codice

<script type='text/javascript'>
gooimg = document.getElementById(&#39;main&#39;);
goobox = gooimg.innerHTML;
goobox = goobox.replace(&quot;&#39;lightboxEnabled&#39;: true,&quot;,&quot;&#39;lightboxEnabled&#39;: false,&quot;);
gooimg.innerHTML = goobox;
</script>

Si salva il modello. Coloro che non vogliano rinunciare al loro Lightbox, possono utilizzare questo metodo ponte per eliminare la doppia finestra che si viene ad aprire. Da una dichiarazione di un componente del Team Blogger, c'è comunque da pensare che questo effetto nativo sarà introdotto solo come opzionale.

PrettyPhoto per slideshow di foto, gallerie di video e pagine web.

L'introduzione dell'Effetto nativo tipo Lightbox su Blogger ha provocato delle reazioni contrastanti. Ci sono coloro che lo hanno amato immediatamente visto che non avranno più la necessità di installare effetti manualmente ma ci sono anche quelli che sono rimasti irritati perché tale effetto va a incidere pesantemente su layout che erano già stati accuratamente personalizzati e configurati.

La pubblicazione di un codice che disabilita questo effetto ha lasciato soddisfatti quelli che usano Facebox ma non altrettanto felici gli utenti di Lightbox visto che lo script che ho presentato provoca dei problemi anche al Lightbox non nativo . Dopo la lettura di un commento in cui venivo informato che lo script KillingLightbox non influenzava il plugin PrettyPhoto, ho pensato di illustrare la sua installazione. Potrebbe essere utile a quei lettori che non amano questa nuova feature di Blogger, che avevano installato Lightbox e che si ritrovano con effetti sovrapposti.

Come eliminare l'effetto LightBox nativo di Blogger.

Il nuovo effetto di Blogger simile al classico Lightbox sta suscitando un acceso dibattito in rete segnatamente nei forum di Blogger in lingua inglese. Vi consiglio di leggere i commenti presenti in questo thread del forum britannico. I feedback inviati dai lettori devono avere smosso un pochino le certezze iniziali del Team di Blogger visto che Brett, dipendente di Google, ha postato sul forum questo contributo 

Thanks everyone for the feedback, I'll take this discussion back to the team and see what we can do to make the feature more flexible. If you haven't already, providing a detailed explanation of this lightbox is not ideal for your blog will help us understand all the use cases here. Our ears are open!

L'optimum sarebbe che venisse inserita nella Bacheca una opzione per decidere se inserire o meno questo effetto nativo. Io credo che sarebbero in molti quelli felici di implementarlo ma questo eviterebbe anche le proteste di tutti coloro che avevano già inserito effetti simili e che adesso sono costretti a eliminarli. La parola d'ordine di questi utenti si può riassumere come "Giù le mani dal mio blog" con l'ovvio significato che, pur essendo Blogger un servizio gratuito, chi usufruisce della piattaforma ha il diritto di metterci dentro solo le personalizzazioni e gli effetti che gli piacciono.

Blogger introduce nativamente un Effetto simil Lightbox.

Questa mattina ho letto un commento in cui mi si informava del raddoppio dell'Effetto LightBox che avevo presentato in un mio vecchio post e che era stato installato da molti di voi. Ho controllato i post di demo e il relativo codice ma non ho visto niente di anomalo. Poi scorrendo i feed che leggo abitualmente, ho scoperto in un blog di lingua spagnola che Blogger aveva introdotto questo effetto nativamente senza aver dato nessuna comunicazione ufficiale.

A questo punto è evidente che chi ha installato gli Effetti Lightbox, LyteBox o FaceBox è costretto a eliminare il codice relativo perché ne deriva una sovrapposizione con quello nativo di Blogger. In  un prossimo articolo mi ripropongo di vedere se si può ulteriormente personalizzare questo effetto. Innanzitutto, per poterlo visualizzare, si possono postare le immagini come si vuole. Se voi per esempio cliccate sulle immagini sottostanti, inserite tramite Windows Live Writer e Sharper Photo, vedrete comunque che l'effetto funziona

Effetto ShadowBox per gallerie di foto e di video.

Ho presentato diversi effetti molto suggestivi come Lightbox, Lytebox, Expando, Facebox, Sfoglia Pagina e altri ancora ma credo che quello che vado a illustrare sia il migliore e il più completo. ShadowBox si basa sullo stesso concetto di Lightbox che permette all'utente di aprire delle finestre modali unitamente alla opacizzazione dello sfondo. Quello che ha in più rispetto a Lightbox è che è possibile anche utilizzarlo per i video di Youtube e Vimeo oltre che per pagine HTML come del resto accade anche per Lytebox.

E' anche possibile utilizzare l'effetto con delle mappe e creare un popup di benvenuto a chi arriva nel nostro blog. Queste due ultime funzioni le vedremo in un prossimo articolo per non appesantire troppo la trattazione. Si possono scaricare i file necessari all'installazione direttamente dal sito del creatore. Si mette la flag alle funzionalità che interessano e si seleziona la lingua con cui si vuole che operi l'effetto. Visto che è una operazione che ho già fatto e che ho già caricato le immagini degli strumenti di navigazione sul mio account Picasa, potete limitarvi a inserire gli script e i CSS nel template. Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

Come inserire automaticamente l'effetto Lightbox in tutte 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.

Come creare una galleria fotografica con Windows Live Writer.

Windows Live Writer permette di velocizzare in modo notevole le operazioni di pubblicazione di un articolo, lo rende esteticamente più valido ed è in grado anche di fare delle cose che sarebbero impossibili con l'editor di Blogger o anche con quello di Wordpress.

Una di queste è la creazione di una galleria fotografica attraverso l'utilizzo dello strumento Tabella. Conviene sempre caricare le immagini con cui vogliamo creare la galleria in un hosting gratuito per poi acquisirne l'URL. Si può scegliere Skydrive, Imageshack o Tinypic  ma ce ne sono molti altri.

In WLW si va su Inserisci > Tabella e si scelgono il numero di righe e di colonne, la dimensione e i bordi

Come creare una pagina di benvenuto in un blog su Blogger con l'effetto Lightbox.

Per mostrare questo effetto ho dovuto creare un nuovo blog che ho chiamato Pagina di Benvenuto. Accedendovi potete rendervi conto di cosa stia parlando. Quando si entra nella Homepage del blog si visualizzerà una finestra sul tipo dell'effetto Lightbox con un invito a entrare nel sito e relativo collegamento nella parte bassa.

E' inutile sottolineare come la pagina di benvenuto possa essere creata da ciascuno di voi a seconda delle proprie esigenze e secondo i propri gusti. Se accedete a un singolo post del blog che ho creato, la pagina di benvenuto non sarà invece visibile. Ma andiamo per gradi.

Per prima cosa occorre accedere a Layout > Modifica HTML e salvare il modello completo. Cercare la riga di codice </head> e, immediatamente sopra, incollare il seguente codice

<!-- Pagina di Benvenuto -->
<link href='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/leightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/prototype.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/leightbox.js' type='text/javascript'/>
<!-- Pagina di Benvenuto - http://parsifal32.blogspot.com -->

Salvare il modello. Adesso occorre editare una pagina di benvenuto e questo può essere fatto con programmi installati nel computer o anche utilizzando dei tool online come Online HTML Editor. Nel caso in cui voleste inserire nella vostra pagina anche delle immagini, queste prima devono essere caricate su un hosting gratuito tipo Skydrive o Imageshack.

 

Quando avete editato la vostra pagina con immagini, testo e collegamenti vari, andando sull'icona a forma di minore e maggiore (<>), potete visualizzare il codice corrispondente e copiarlo in un file di testo.

Alternativamente a Online HTML Generator potete usare anche Windows Live Writer o l'Editor di Blogger; in questo caso vi dovete ricordare comunque di caricare le immagini su un hosting e di passare alla modalità HTML per copiare il codice.

A titolo di esempio riporto il codice creato per la pagina di benvenuto che ho creato per prova

<img src="http://sjmshg.blu.livefilestore.com/y1pgBiP3B2O4ODgfwAfKyv63vwtEqVS5DDq-da2QVpj0AY8cVYD7_vksVmMFmefa3JNZiGloQ-tjpDhePOcJ5l3mqzSSz8vA4t8/wel003.gif" title="benvenuto-gif" alt="benvenuto-gif" border="0px" />
<div><img src="http://sjmshg.blu.livefilestore.com/y1pJRUEzhJeKe5w6ju4QstoKqB-L2E8CCFgVbFnp-Q3Ut85N8SIoj05sxtcAp7Mb5qX0XYhsV6DsUoLt27Q1DtqmFjSk4iuZ3bQ/ideepercomputer.png" title="idee per computer" alt="idee per computer" border="0px" /><br />
</div>
<div><span style="font-size: 14pt; ">Per</span><a href="http://feeds.feedburner.com/ComputerChePassione"><span style="font-size: large;"> iscriverti ai feed</span></a><span style="font-size: large;"> o per </span><a href="http://www.facebook.com/pages/IDEE-PER-COMPUTER-ED-INTERNET/207337935513"><span style="font-size: large;">diventare fan su Facebook</span></a></div>

Come vedete ci sono gli URL di due immagini e un paio di collegamenti. Adesso andiamo su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript. Titoliamo l'elemento in un modo riconoscibile tipo "Benvenuto" e incolliamo il seguente codice in Sezioni del sito

<!-- messaggio benvenuto inizio -->
<div id="pop01" class="leightbox">

<div class="scrollbox">

<!-- Codice HTML della pagina di benvenuto creato precedentemente -->

<a href="URL_DEL_BLOG" class="lbAction" rel="deactivate">Entra nel blog</a>
</div>

<!-- messaggio benvenuto fine -->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script></div>

Le personalizzazioni da fare sono le seguenti

1. Al posto della riga rossa dobbiamo inserire il codice HTML che abbiamo creato per la nostra Pagina di Benvenuto
2. In URL_DEL_BLOG dobbiamo inserire l'indirizzo del nostro blog
3. Entra nel blog e l'espressione che sarà letta nella parte finale della finestra e che può essere sostituita con un altra.

Questo elemento pagina va salvato e, con il mouse, posizionato nella parte alta del modello, sopra all'area del post

Nel momento in cui si accede al blog sarà vista quindi la pagina di benvenuto e successivamente si potrà accedere al blog cliccando su Entra nel blog. 

Senza ulteriori modifiche questa pagina sarà visibile quando si apre qualsiasi post del blog e questo non è consigliabile ma è opportuna che venga visualizzata solo quando il visitatore accede alla Homepage. Bisogna quindi inserire questa condizione nel modello.

Si usa il sistema già ampiamento spiegato negli articoli

1. Come inserire un widget solo negli articoli o solo in Homepage - 
2. Come inserire un widget solo in una pagina specifica del blog -

Si va nuovamente su Layout > Modifica HTML e si cerca il widget attraverso il nome che gli abbiamo dato, in questo caso "benvenuto", cliccando su F3 o pigiando Ctrl+F, dopo aver messo la spunta su Espandi i modelli widget

Si inseriscono le due righe

<b:if cond='data:blog.url == data:blog.homepageUrl'> e

</b:if>

esattamente nella posizione mostrata da questo screenshot

Vanno cioè inserite rispettivamente dopo la riga <b:includable id='main'> e prima della riga </b:includable>. Si salva il modello, si riapre l'elemento pagina andando su Layout > Elementi pagina > Modifica e si elimina il Titolo, in questo caso "benvenuto" perché non ci serve più per la sua individuazione.

Osservazioni finali

1. Si può scegliere di mettere il messaggio di benvenuto in tutte le pagine e non seguire l'ultimo passaggio
2. Si può anche mettere il messaggio di benvenuto a un altro blog che adesso abbiamo un po' tralasciato per reindirizzare il traffico nel nostro blog principale
3. Si può utilizzare questo tool anche quando si ha un blog in fase di manutenzione affinché i visitatori visualizzino un messaggio del tipo "Sito in Manutenzione" o simile
4. Se svolete una cosa meno ingombrante potreste essere interessati al widget di benvenuto personalizzato. 

Si possono effettuare anche delle personalizzazioni allo stile della finestra Lightbox. Basta scaricare il file presente a questo indirizzo, modificarlo e ricaricarlo su un nostro hosting che può essere Google Sites.

Le modifiche possono riguardare la posizione della scritta Entra nel blog che in questo caso è in basso a destra ma che possiamo mettere in alto sostituendo bottom con top nella parte iniziale del codice. Possiamo anche modificare l'opacità della finestra andando nella parte finale, ma queste cose sono per smanettoni.

Fonti | Leightbox, CodeBook e Divya Sai.

Effetto LyteBox per immagini, gallerie di foto e slideshow da inserire in blog su Blogger.

Prima di iniziare l'illustrazione della procedura per ottenere questi effetti forse è il caso di  dare uno sguardo a quello che provocano queste personalizzazioni. Ho pubblicato tre post nel sito di prova Mènù Orizzontale che credo siano sufficientemente esplicativi

• Effetto LyteBox su una singola immagine -
• Effetto Lytebox per la creazione di una galleria di immagini -
• Effetto Lytebox per la creazione di slideshow -

Per apprezzare gli effetti dovete cliccare sopra ad una qualsiasi immagine. Questo effetto è simile a quello Lightbox che ho illustrato in un altro articolo forse però è anche migliore.
Andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercate la riga </head>, quindi, immediatamente sopra incollateci il seguente codice

<!-- EFFETTO LYTEBOX INIZIO -->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js' type='text/javascript'/>
<!-- EFFETTO LYTEBOX FINE - http://goo.gl/GRcov -->

come mostrato dal seguente screenshot


Salvate il modello e la personalizzazione è completata. Per attivarla bisogna operare sul codice delle foto inserite. Si possono ottenere effetti su una singola immagine, su un'intera galleria e creare degli slideshow attraverso l'editor di Blogger o postando con Windows Live Writer. Cercherò di prendere in esame tutte le possibilità
Efffetto Lytebox su singola immagine
Se si posta l'immagine con l'editor di Blogger possiamo farlo selezionandola dall'hard-disk o dal web, personalmente preferisco la seconda ipotesi ma per l'effetto è indifferente. Se si carica dal computer, bisogna passare alla modalità HTML andando su Modifica HTML. Nel codice relativo all'immagine che abbiamo caricato, ci sarà un'espressione del tipo <a onblur="try{parent, se usate il vecchio editor. In questo caso inserite l'attributo rel="lytebox" in questo modo <a rel="lytebox" onblur="try{parent.
Nel caso usiate l'editor aggiornato di Blogger l'espressione rel="lytebox" dovrà essere inserita come mostrato nel seguente screenshot


Se invece si utilizza WLW bisogna prima caricare l'immagine nel web con un servizio tipo Skydrive, quindi inserirla nell'articolo andando su Immagine. Dopo averla selezionata si passa nella sezione di destra e si sceglie Collega a URL
                  
In URL si incolla l'indirizzo dell'immagine mentre nella parte bassa della finestra, in "Rel" si scrive "lytebox" (senza virgolette). Quindi si clicca su OK. L'effetto ottenuto su una immagine è quello che potete vedere nel primo esempio di Lytebox.

Effetto LyteBox su una galleria di immagini
La metodologia di inserimento è la stessa riguardo all'esempio precedente, cambia soltanto l'espressione da inserire in Rel. Se vogliamo che un certo numero di immagini facciano parte di una stessa galleria dobbiamo innanzitutto sceglierne il nome. Nel mio esempio ho usato tramonto visto che si tratta di immagini di quel tipo ma si può scegliere qualsiasi altro nome. Quello che conta è che tutte le immagini che vogliamo facciano parte della galleria, lo devono avere tra le parentesi quadre.
Se si inseriscono le immagini con l'editor di Blogger dobbiamo aggiungere, in modalità HTML, il seguente attributo

rel="lytebox[tramonto]"

se invece usiamo WLW, quando andiamo a collegare l'immagine al suo URL in "Rel" dobbiamo digitare

lytebox[tramonto]

come mostrato nel seguente screenshot

In questo caso, nel momento in cui si clicca con il mouse su un'immagine, oltre a ingrandirsi con il solito effetto compariranno anche dei pulsanti (PREV sulla sinistra e NEXT sulla destra) per passare all'immagine precedente o successiva. In basso sarà anche visualizzato il numero di immagini presenti nella galleria che abbiamo creato


Creazione di slideshow con Lytebox
La differenza rispetto ai metodi precedenti sta nel fatto che in questo caso si deve inserire l'espressione rel="lyteshow[mare]" se si utilizza l'editor di Blogger. In cui mare è il nome che si è dato allo slideshow e può essere scelto a piacere. Anche in questo caso quello che conta è che le immagini che vogliamo facciano parte dello slideshow devono avere la stessa espressione tra parentesi quadre.
Se le immagini si inseriscono con WLW occorre collegare ciascuna immagine al suo URL, come visto in precedenza e inserire in Rel l'espressione lytebox[mare], con tutte le precisazioni fatte prima. Gli slideshow mostreranno il numero e il nome di ciascuna immagine

sarà visualizzato anche un pulsante per interrompere la successione delle immagini. In questo slideshow ciascuna foto rimarrà visibile per circa 2-3 secondi.
Esistono ulteriori applicazioni di questo effetto e, nel caso incontrasse il favore dei lettori, potrei dedicargli un nuovo post. Mi sono basto su un lavoro di Markus F. Hay per Dolem LyteBox 3.2.

---

Ho caricato su un altro server gli script di Lightbox 2 per creare straordinari effetti alle foto del blog.

E' noto che noi blogger combattiamo una battaglia quotidiana contro i siti in cui carichiamo dei file che poi per qualche ignota ragione vanno in tilt o chiudono proprio i battenti. Alcuni file di tipo javascript erano stati caricati su FileDen che però ha dato segnali di disservizio piuttosto evidenti che mi hanno fatto decidere a trovare un'alternativa. Ho quindi caricato alcuni file su MyDataNest di cui parlerò in un prossimo articolo e che insieme a SigMirror mi sembra attualmente la soluzione più valida per i file Javascript.
I file in questione si riferivano al celebre effetto per le immagini Lightbox 2  ed ecco il nuovo codice da inserire subito sopra al tag </head> in Layout > Modifica HTML

<!--LIGHTBOX INIZIO-->
<link href='https://sites.google.com/site/scriptperilblog/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/><script src='https://sites.google.com/site/scriptperilblog/lightbox/prototype.js' type='text/javascript'/> <script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/> <script src='https://sites.google.com/site/scriptperilblog/lightbox/lightbox.j' type='text/javascript'/>
<noscript><a href='http://goo.gl/IbTx' target='_blank'><span style='font-size: x-small;'>Lightbox per Blogger</span></a></noscript>
<!--LIGHTBOX FINE-->

Questo script riesce a creare un effetto particolare alle immagini nel momento in cui ci si clicca sopra con il mouse. Tale effetto può essere verificato cliccando sopra alla foto di Cristina Chiabotto in questo post di prova. Per avere questo effetto ricordo che occorre caricare le foto nel web attraverso un servizio gratuito tipo Skydrive, quindi postarle scegliendo l'opzione Carica dal web nell'editor di Blogger

quindi passare alla modalità HTML ed inserire rel="lightbox" subito dopo la <a del collegamento in questo modo 
Se invece si usa Windows Live Writer le nostre immagini devono sempre essere inserite tramite URL, quindi si sceglie Immagine > Da Web


 
Dopo aver selezionato l'immagine, nella parte destra in Collega a si sceglie URL e si inserisce nuovamente l'URL dell'immagine che abbiamo caricato nel web
          

nella parte bassa della finestra occorre inserire in Rel l'espressione lightbox come mostrato nel precedente screenshot. Le immagini ridimensionate, con un click del mouse, si vedranno a grandezza naturale e acquisteranno luminosità mentre il resto della finestra diventerà opaco.
Si possono creare anche degli slideshow di gallerie di foto, slideshow a cui dobbiamo dare un nome. In questo caso, se si usa l'editor di Blogger dobbiamo inserire con le stesse modalità di prima l'espressione
rel="lightbox[nome-slideshow]"
notare le parentesi quadre. Se invece si usa WLW il procedimento è lo stesso, dovremo solo inserire in Rel l'espressione lightbox[nome-slideshow], anche in questo caso notare le parentesi quadre, come mostrato in quest'ultimo screenshot


Nel caso di uno slideshow questo non passerà automaticamente da un'immagine ad un'altra ma sarà possibile 
farlo andando sui pulsanti PREV e NEXT che si visualizzeranno nelle foto         

• Per testare il funzionamento dell'effetto Lightbox 2, cliccate su una delle immagini dello slideshow di Cristina Chiabotto.

Questo script non interferisce con quello di Expando, quindi possono essere usati anche contemporaneamente.
Aggiornamento: Ho caricato gli script su Google Sites perché My Data Nest dava segni di malfunzionamento.
Aggiornamento n°2: Ho dovuto caricare le immagini per gli strumenti di navigazione in un hosting diverso. Coloro che notassero un malfunzionamento non debbono fare altro che sostituire il vecchio codice con quello nuovo.
Aggiornamento n°3: Se avete dei problemi con l'Effetto Lightbox nativo di Blogger, seguite le istruzioni di questo articolo. 

Lightbox Image Editor è un programma gratis per ritoccare le nostre foto in modo semplice ma professionale.

Lightbox è un programma con due versioni, mi occuperò solo di quella free ma esiste anche un altra, con più funzionalità, di cui è possibile scaricare la versione trial. La versione gratuita può essere scaricata da questo link.

Durante l’installazione occorre scegliere nuovamente l’opzione free. Ecco come si presenta l’editor di immagini

 Il programma supporta file di formato JPEG, TIFF, BMP, RAW e ha numerose funzioni di ritocco foto. È possibile regolare il colore, la luminosità, la saturazione,  cambiare tonalità, giocare con le ombre. Tutto questo è negli strumenti che si trovano sulla sinistra

 

 E’ interessante notare che l’immagine cambia in tempo reale nel momento si varia con il cursore uno di questi parametri. Andando su More Options si possono trovare ulteriori funzionalità.

Esiste anche la funzione di zoom, quella di ridimensionamento (resize), ritaglia (crop). Si può inoltre aggiungere un bordo, togliere gli occhi rossi, ecc. Tutto questo nella paletta di tool che si trova sulla destra

Può essere una validissima alternativa gratuita a programmi costosi quali Photoshop. Chiudo segnalandovi la curiosità che il programma viene installato nella cartella Program Files > 19th Parallel > Lightbox, nel caso non lo troviate se eliminate l’icona dal desktop.

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'/>

  
Quindi salvare il modello.  Adesso per pubblicare delle immagini ed ottenere un effetto da scatola illuminata bisogna procedere nel seguente modo.

• Se non si usa Windows Live Writer 

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

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




Nella sezione di destra in Collega a, selezionate URL



o, in alternativa, selezionate l’immagine e cliccate sull’icona per inserire un collegamento,  nella finestra che si aprirà inserite nuovamente l’URL dell’immagine

 

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

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.