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

Come inserire l'effetto LyteBox nelle immagini di un blog su Blogger.

In un commento mi è stato fatto notare come apparissero delle strane scritte in inglese nell'effetto LyteBox che avevo presentato qualche tempo fa. Questo è dovuto al fatto che alcune immagini di sfondo inserite nel file CSS sono state eliminate senza spiegazioni da Tinypic su cui erano state caricate. Per fortuna avevo sempre in una cartella del PC le immagini originali che ho ricaricato su Picasa sperando abbiano una sorte migliore.

Coloro che non hanno mai sentito parlare o non hanno mai visto l'effetto Lytebox possono vedere queste tre demo

1. Effetto LyteBox per una immagine singola -
2. Effetto Lytebox per una galleria di immagini -
3. Effetto Lytebox con slideshow -

Basta cliccare con il mouse su una singola immagine per visualizzare l'effetto che è simile a quello Lightbox ma più completo visto che può essere usato anche per creare degli slideshow. Per le istruzioni relative a come gestire l'inserimento delle immagini sia con l'editor di Blogger che con Windows Live Writer vi rimando al post che avevo precedentemente dedicato a LyteBox.

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 galleria fotografica in una pagina statica con l'effetto Lytebox.

Le pagine statiche hanno aperto diverse prospettive di sviluppo del blog. La personalizzazione di una pagina statica attraverso l'eliminazione della sidebar dà modo di avere a disposizione un intero layout per inserirci cose che prima non potevamo fare.
Se abbiamo creato delle pagine statiche sufficientemente larghe possiamo anche inserire una galleria fotografica che possa fare da supporto al blog. Penso a blog aziendali che vogliono presentare le foto dei loro prodotti in uno stesso luogo oppure a siti immobiliari con le foto delle abitazioni in catalogo. Praticamente tutti i blog in cui le immagini hanno un'importanza fondamentale potrebbero essere interessati a creare una tale galleria.
Questa può tranquillamente essere inserita senza nessun effetto speciale. In questo caso potrebbe essere opportuno inserire le foto all'interno di una tabella. Nell'editor di Blogger non esiste la possibilità di generare una tabella ma si può usare Windows Live Writer.
Se si vuole inserire degli effetti si può scegliere tra Expando, Lightbox o Lytebox tra quelli che ho presentato in questo blog. Nel mio blog di prova ho creato una pagina statica denominata Gallery con diverse foto incorporate con l'effetto Lytebox.
Traccio le linee che ho seguito per la realizzazione

1. Ho creato una pagina statica -
2. Ho eliminato la sidebar e allargato l'area di layout -
3. Ho modificato il modello incollando il codice di Lytebox -

Si tratta in sostanza di andare in Layout > Modifica HTML, cercare la riga </head> e, immediatamente sopra, incollare il seguente codice

<!--EFFETTO LYTEBOX INIZIO-->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-1.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://www.ideepercomputeredinternet.com-->

Per rendere effettivo questo effetto bisogna inserire l'attributo rel="lytebox" nel link dell'immagine, come illustrato nell'articolo. Se si vuole creare una galleria occorre inserire rel="lytebox[nome-galleria]". Nel caso di uno slideshow la stringa diventa rel="lyteshow[nome-slideshow]".
Per far questo vi consiglio di utilizzare Windows Live Writer perché è più semplice e immediato. Le immagini possono anche essere inserite in una tabella. Non si può pubblicare nel blog la galleria così editata, occorre quindi andare su Origine, selezionare tutto il codice della galleria di foto, copiarlo e incollarlo nell'editor della pagina di Blogger in modalità HTML.

Nella pagina statica di dimostrazione non ho inserito la tabella, quindi il lavoro non è accuratissimo. Ho però inserito due gallerie fotografiche e uno slideshow.
Le due gallerie sono state realizzate mediante l'inserimento nei link delle stringhe lytebox[tramonto] e lytebox[mare] mentre lo slideshow è stato creato inserendo lyteshow[belledonne]. Nel caso delle gallerie, quando si clicca su una foto, questa si evidenzia e mostra i due collegamenti per andare alla foto successiva o a quella precedente

il tutto in uno sfondo oscurato per far risaltare meglio l'immagine. Nel caso dello slideshow, quando si clicca su una foto si passa automaticamente alla successiva dopo tre secondi come in un filmato. Per iniziare bisogna cliccare sul simbolo di Play. E' presente anche il bottone di pausa per soffermarsi su una immagine in particolare

Se si clicca sulla prima foto non occorrerà andare su Play ma la riproduzione inizierà in automatico. Alla fine dello slideshow l'effetto terminerà senza bisogno di cliccare su Close.

Come inserire una pagina web nel blog con Lytebox tramite un iFrame.

Nell'articolo precedente ho illustrato Lytebox che serve per inserire suggestivi effetti nelle immagini del blog e può essere utilizzato anche per creare delle gallerie fotografiche o degli slideshow. Per seguire questo post è quindi necessario prima leggere quello che spiega come inserire Lytebox nel blog.

Senza modificare in niente l'installazione di Lytebox, per inserire una pagina web all'interno di un nostro articolo sotto forma di un iFrame, basta incollarne l'URL in un collegamento e specificare rel="lyteframe". Facendo un esempio pratico se noi, quando scriviamo un post, andiamo in modalità HTML e incolliamo un codice simile a questo

<a href="http://www.google.it" rel="lyteframe" title="Ricerca su Google"
   rev="width: 600px; height: 450px; scrolling: no;">Ricerca su Google</a>

si realizzerà un classico collegamento ad una pagina. In questo caso abbiamo

1. Il collegamento è alla pagina www.google.it
2. Le dimensioni della finestra che si apre sono di 600 pixel di larghezza e 400 di altezza, che possono essere modificate 
3. Il testo che si vede è Ricerca su Google
4. Il riferimento a Lytebox avviene mediante l'inserimento di rel="lyteframe". Da notare che in questo caso si utilizza lyteframe al posto di lytebox per le immagini o lyteshow per gli slideshow.
5. Ovviamente possiamo scegliere una qualsivoglia pagina web e un qualsiasi testo da visualizzare 

Se cliccate su uno dei collegamenti di questo articolo

vedrete apparire una finestra di questo tipo

con la pagina dell'iFrame che si illuminerà e andrà in primo piano, mentre l'articolo resterà in sottofondo in posizione oscurata. Può essere un effetto particolarmente sorprendente per i visitatori del blog e dà l'idea di un sito accurato e quindi affidabile.

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.

---