22 novembre 2009

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

litebox
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
lytebox

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
    wlw               lytebox
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
lytebox
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
galleria

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
slideshow
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.



39 commenti:

  1. @Helga
    Grazie :)), troppo buona.. (178cm...:)-)

    RispondiElimina
  2. Riprendo questo vecchio articolo per chiederti se hai idea di come mettere su blogger uno slideshow che "peschi" in automatico la prima immagine di ogni articolo di una determinata etichetta. Mi spiego: ho un blog che parla di film, giochi,iphone...in pratica ha 5 o 6 macrocategorie e mi piacerebbe poter inserire altrettanti slideshow che visualizzassero in automatico tutte le locandine con tasto next e prev per il momento ho utilizzato gli slideshow di picasa e andrebbe pure bene se non volessi anche che OGNI IMMAGINE fosse collegata al post da cui viene presa.
    Spero di essere stato sufficientemente chiaro. (per la cronaca penso che sarebbe UN OTTIMO POST visto che è un bel po' che lo cerco e non l'ho trovato da nessuna parte)

    RispondiElimina
  3. @takycardia
    In Blogger non è che si può fare più di tanto...
    Con Wordpress ci sono migliaia di plugin ma qui non è così semplice. Anche le categorie solo da poco forniscono i feed.
    Stavo per consigliarti gli slideshow di Picasa ma poi ho letto che gli hai già provati...

    RispondiElimina
  4. Ma solo a me è kentissimo ad aprire foto anche di pochi k?

    Grazie

    Ale

    RispondiElimina
  5. @alessandro
    L'efetto lytebox è così, affascinante perché mostra le foto lentamente in uno sfondo scuro

    RispondiElimina
  6. Ciao,

    si l'effetto è bello.. ma nel mio caso ci mette qlc secondo. E le immagini sono 40-50k!!

    Il lightbox è piu veloce e il movimento piu lineare, ma mi blocca le pagine del blog!!!

    Hai qlc suggerimento?

    Grazie e buoona serata

    Ciao

    Ale

    RispondiElimina
  7. @alessandro
    quando ho un po' di tempo vedrò di presentare qualche altro effetto.
    Ciao

    RispondiElimina
  8. Grandissimo... ti aspetto impazientemente...

    Senti, questo il mio primo blog.. quindi non fare caso al bordello....

    Secondo te non è lento?

    http://alexeroby.blogspot.com/

    Prova ad aprire una delle tre foto in orizzontale nel primo post...

    Mi viene il latte alle ginocchia :)

    Stasera poi è pure lento a caricarsi (veramente tutte le sere:))

    Ho appena provato la soluzione class="thickbox", è veloce, ma perde l'effetto

    PS: lytebox con ie8, non fa vedere le scritte sui bordi!!!

    Grazie e buona serata

    Ale

    RispondiElimina
  9. @alessandro
    è lentissimo ma non è colpa di Lytebox. Hai un modello con una immagine di sfondo che rallenta molto. Poi devi seguire alcuni comportamenti per velocizzare l'apertura della pagina. Per esempio inserire il -- more -- per gli articoli sintetici, eliminare qualche widget inutile, mettere in homepage meno post, ecc.
    Ciao

    RispondiElimina
  10. Allora ti spiego qui... nn volevo mettere questo (xchè lo sfondo nero... lo trovo un pò cupo x il mio blog e poi lo trovo lento come effetto... ansiosa come sono :P) lightbox mi piaceva molto ma nn va... in wlw... nn si memorizza la parola "lightbox" nella finestra... la metto clicco ok... riapro e nn c'è. Allora ho provato direttamente su bloggher... mettendo dopo <a quello che ci voleva e in + mettendo lo script in html... ho provato la tua ultima versione, quella precedente ma nulla. Puoi controllare se funziona o sono io negata? Ho provato a caricare le foto su Picasa (dove Lytebox funge) e su Skydrive.. ma nulla. Uff uff :( mi piaceva :(

    RispondiElimina
  11. @soffio di dea
    Andiamo con ordine
    1)Lo script di Lightbox funziona, l'ho controllato proprio adesso e poi ci sono i post di prova che hanno lo stesso codice
    2)la parola "lightbox" non si deve memorizzare in WLW. Per controllare che sia stata inserita correttamente vai su Origine (cioè modalità HTML) e controlla che ci sia il codice rel="lightbox" insieme all'URL dell'immagine, ma c'è senz'altro..
    Forse non funziona sul tuo modello, può esserci una incompatibilità di script. Mi spiace.
    Ciao
    P.S. Ogni tanto presento qualche altro effetto...

    RispondiElimina
  12. Si forse sarà così... peccato. Allora aspetterò le altre novità ^_^ grazie!

    RispondiElimina
  13. Molto bello. Ma.. Una questione forse ingenua: c'è modo di mettere le foto accostate orizzontalmente?
    Non so perchè non riesco, nell'html non c'è nessun "br", ma ugualmente rimangono solo in verticale.
    Sbaglio qualcosa?

    RispondiElimina
  14. Sì, era una domanda ingenua.
    Pardon, come non chiesto.

    RispondiElimina
  15. @piloro
    La domanda non è ingenua. Comunque la risposta è sì. Con l'editor di blogger è un po' difficile ridimensionare le immagini perché è una finestrella ridicola ma se usi Windows Live Writer non avrai problemi

    RispondiElimina
  16. Buongiorno,
    volevo segnalare che da ieri nell'effetto foto lytebox compaiono degli strani messaggi in inglese, sai dirmi qual'è il problema?

    RispondiElimina
  17. @Mauro
    Sono state rimosse delle immagini dal servizio Tinypic. Vedo di risolvere il prblema

    RispondiElimina
  18. @Mauro
    Articolo aggiornato. Ho scritto un altro post con le spiegazioni in merito
    http://www.ideepercomputeredinternet.com/2010/11/come-inserire-l-lytebox-nelle-immagini.html

    RispondiElimina
  19. l'effetto che cercavo c'è e funziona benissimo l'unica cosa che nn riesco a fare e LyteBox su una galleria di immagini infatti nn mi appaio i tasti avanti e indietro alle foto...ho seguito passo passo ma niente il blog è: http://123informo.blogspot.com/p/blog-page.html

    RispondiElimina
  20. @analfabeta
    Prova con il codice di questo post
    http://www.ideepercomputeredinternet.com/2010/11/come-inserire-l-lytebox-nelle-immagini.html
    Non mi ricordo se è lo stesso

    RispondiElimina
  21. @analfabeta
    Ho dato uno sguardo al codice sorgente della tua pagina e non hai inserito nessun nome della galleria è evidente che non ti apaioono Prev e Next!
    non devi mettere rel="lytebox" ma rel="lytebox[nomegalleria]" in tutte le immagini che la compongono. Spero di essere stato chiaro anche se c'era già scritto nel post.
    Ciao

    RispondiElimina
  22. si ma nome galleria di cosa dv lo prendo sto nome dalla cartella da dv.....

    RispondiElimina
  23. Lo devi inventare da solo... :-) Se è una galleria di foto di macchine la puoi chiamare auto e inserire rel="lytebox[auto]" in tutte le immagini. Se invece è una rassegna di foto di donne puoi chiamarla rel="lytebox[belleragazze]" ^_^
    Non c'è limite alla fantasia. L'importante è che il nome sia lo stesso per tutte le foto della galleria. In una stessa pagina puoi creare anche più gallerie con nomi diversi

    RispondiElimina
  24. Prima di tutto grazie mille per il tutorial.
    Volevo chiederti se è possibile rimpicciolire l'anteprima dellimmagine sulla pagina.
    Inserisco il codice dell'immagine le post di modifica della pagina statica, solo che l'anteprima è troppo grande. Vorrei poterla rimpicciolire.

    RispondiElimina
  25. @Jezebel
    io per farlo ho caricato la foto in Picasa poi ho modificato il link che rimanda alla foto:

    questo è una foto d'esempio

    http://lh4.ggpht.com/_yxZbmtt3l5g/TJy8dCmjUPI/AAAAAAAAAf0/9OnPsk4MTiM/s460/IMG_1067.JPG

    s460 indica la grandezza della foto; bada ad inserire sempre la "s" prima del multiplo della grandezza reale.

    Scrivo di fretta quindi un po sgrammaticato, ma sempre pronto a dare una mano

    RispondiElimina
  26. @Andrea Ferraro
    Grazie della collaborazione :)

    @Jezebel
    Per fare un buon lavoro preparati la galleria con Windows Live Writer
    http://www.ideepercomputeredinternet.com/2010/03/windows-live-writer-per-scrivere-post.html
    Le immagini le puoi ridimensionare come ti pare con il mouse senza perdere tempo dopo averle inserite tramite l'URL preso da Picasa.
    Quando la Galleria è pronta vai su Origine (Modalità HTML) e copi tutto il codice, quindi lo incolli nell'Editor di Blogger e pubblichi la pagina.
    Ciao

    RispondiElimina
  27. Grazie mille!!!
    Volevo chiedere anche un'altra cosa, volta fatto tutto, le anteprime delle immagini me leinserisce nella pagina una sotto l'altra. C'è un modo per visualizzarle affiancate?

    RispondiElimina
  28. @Jezebel
    Con WLW puoi utilizzare una tabella e inserirle all'interno. Puoi scegliere per esempio 8 righe per 4 colonne...

    RispondiElimina
  29. Grazie infinite!
    Ho creato un blog solo ieri, perciò non so ancora esattamente come muovermi. Per fortuna ho trovato quasi subito questo blog!

    RispondiElimina
  30. Premetto che non sono un esperto, ma a me non funziona! ho provato a seguire le indicazioni passo passo! ma quando clicco sulla foto me la apre in un'altra pagina!

    RispondiElimina
  31. @Pinna
    Può darsi che sia un problema di banda esaurita. Scarica questi due file
    https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-2.css
    http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js
    e caricali nella cartella Public di DropBox secondo le indicazioni di questo post
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    quindi acquisiscine i due URL e sostituiscili nel codice. Se ancora non funzionasse allora vuorrebbe dire che nel tuo modello sono presenti altri script incompatibili con quelli di Lytebox.

    RispondiElimina
  32. Salve...ho fatto precisamente come descritto nella guida ma non mi funziona...le apre normalmente in una nuova pagina...quando inserisco il codice nell'immagine e pubblico la pagina, se vado a modificare, trovo il codice spostato in un altro punto...blogger lo sposta da solo...come mai???

    RispondiElimina
  33. @MrTrufini1 Forse nel tuo modello c'è già uno script che non è compatibile con quello di Lytebox.

    RispondiElimina
  34. Buonasera Parsifal, seguo da tempo i suoi utilissimi consigli e sono riuscita a perfezionale il mio blogghino.
    Ho appena applicato il lytebox alla mia gallery, ma quando clicco sull'icona dell'immagine x vederla in lytebox, nel frattempo che la carica compare questa scritta: "this image or video". La vedete anche voi?
    Il link della pagina è il seguente:
    http://iconadeironchi.blogspot.com/p/gallery_14.html
    Grazie mille

    RispondiElimina
  35. @Gaia Vincenzi
    La pagina è lenta nel caricarsi perché c'è un video di youtube che parte con l'autoplay. Per quanto riguarda il Lytebox non ho trovato problemi. Ecco quello che ho visto
    http://i.min.us/ibZKiC.jpg
    con il browser Chrome

    RispondiElimina

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