Creare slideshow per le nostre foto con Lightbox 2


A completamento del precedente post su Lightbox, ecco una delle principali funzioni introdotte con la seconda versione, la possibilità di creare delle slideshow per le nostre foto:

image

Anche in questo caso, l’effetto è di visualizzare l’immagine in primo, con in più la possibilità di sfogliare le varie foto con i pulsanti Previous e Next.

Vediamo come fare.

Integriamo Lightbox e Blogger

Per prima cosa, dovrete preparare il vostro blog per la visualizzazione delle immagini con Lightbox, troverete in questo post tutte le informazioni necessarie. Prima di creare le slideshow, vi consiglio di fare delle prove con le singole immagini, per essere sicuri che tutto funzioni come deve.

Pubblichiamo le immagini per la slide

Per creare una slideshow, inserite in un post le varie immagini che volete usare seguendo le spiegazioni date nel precedente post. Unico cambiamento sarà l’attributo Rel che conterrà il nome (che dovrà essere univoco) della slide:

image

In questo caso ho dato il nome kitty alla slide, inserendolo tra parentesi quadre dopo la parola lightbox. Tutte le immagini della slide dovranno avere specificato lo stesso nome.

Una volta inserite le immagini con il Rel appropriato, pubblicando il post sarà possibile vedere la slide in azione:

imageI pulsanti Prev (precedente, visibile nella foto) e Next (successivo) permetteranno la navigazione tra le immagini, mentre sotto sarà possibile vedere quante sono. Potete vederne un esempio in azione qui, cliccando su una delle immagini sotto IMAGE SET.

Inserire la slide in un widget

E’ possibile inserire la slide in un widget anzichè in un post, basta semplicemente creare prima il post (sistemando bene la posizione e le dimensioni delle immagini) e poi copiarne il codice HTML (Modifica HTML se utilizzate l’editor online di Blogger per scrivere il post, o Visualizza->Codice HTML se usate Windows Live Writer) in un elemento di tipo HTML/Javascript. A quel punto potete anche non pubblicare il post o cancellarlo.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

36 commenti:

Analfabeta ha detto...

ciao Tenebrae; complimenti per il blog.
Scusami tanto, ma quando è che pubblicherai qualcosa sui commenti? Grazie!

Tenebrae ha detto...

@analfabeta: è una cosa che ho inserito nel sondaggio, ma non sembra riscuotere grande interesse

ho comunque del materiale in proposito, ma vista appunto la mancanza di interesse non penso di farlo a breve termine

Analfabeta ha detto...

@Tenebrae: Peccato...

Elenina ha detto...

ciao!
Favoloso questo blog!!!
Una mia cara amica mi ha consigliato di rivolgermi a te x risolvere il mio problema: quando scrivo un nuovo post non riesco + a "giustificare" la scritta, o a cambiar carattere/colore....è sparita l'apposita barra!!!
cosa devo fare?!
Grazie in anticipo!
Elena

Tenebrae ha detto...

@elenina: stranissimo problema, una volta era capitato a un'altra persona e aveva risolto cambiando browser... tu quale usi?

a parte questo, comunque, ti consiglio di usare windows live writer per scrivere i tuoi post... provalo e non tornerai più indietro ;)

DottNeurone ha detto...

complimenti per il blog, veramente utilissimo e ben strutturato !!

se posso ti espongo il mio problema su blogger, ma perchè non riesco a inserire commenti nel mio blog,cliccando su posta commento non succede niente..

grazie in anticipo anche se non rispondi :-) continua così !

Anonimo ha detto...

ciao, si può citare un commento? come si fa ad avere un link cliccabile nel commento?( come windows live witer che hai messo spora). si possono inserire le immagini nel commento?

Anonimo ha detto...

come fai ad inserire ''leggi tutto'' con w.l writer?

Anonimo ha detto...

ecco... la prima cosa che faccio è un commento!
sto leggendo da un pò e cerco di accumulare più nozioni possibile,ma come un bimbo per la prima volta in un negozio di caramelle cerco di non farmi venire il mal di pancia!!!!
parto dal nulla ,vorrei creare un mio blog e plubblicizzarvi una mia casa vacanze
è possibile farlo?
scusa la mia enormeeeeeee ignoranza e non riderci sopra!!!!!

Colui che combatte ha detto...

Anonimo ha detto:
"ciao, si può citare un commento? come si fa ad avere un link cliccabile nel commento?( come windows live witer che hai messo spora). si possono inserire le immagini nel commento?"Be' anche io sono curioso. :-)

Spyke ha detto...

ciao tene
non direi che e' una slide .. ma..e' un visualizzare la sequenza di tutte le immagini del post, cioe' se non clicchi next non va avanti da solo! o si?

Tenebrae ha detto...

@spyke: beh, è comunque una slide, anche se non va avanti da sola :)

Spyke ha detto...

ciao tene,
e' possibile dare una ridimensionata alle foto? senza doverle rimpicciolire una ad a una?perche quelle di grosse dimensioni occupano tutto lo scermo, annullando il bel effetto di lightbox.
grazie
spyke

Pinella ha detto...

Ho messo il programma sul desktop ma non riesco a scaricarlo. Mi compare un avviso che Adobe non riesce ad aprirlo . Ho WINZIP quindi non dovrei avere problemi. Che succede?

Anonimo ha detto...

succede che non sei pratica :P

Bella Proff ha detto...

Ciao, provo anche io a farti una domanda. Come si fa a inserire il "leggi tutto", ossia a non far comparire il post per intero e ridurre lo spazio?
Grazie per il servizio che fai, ho trovato molti spunti utili e divertenti.

Spyke ha detto...

ciao tene,
per le foto mi sono arangiato a ridimensionarle in partenza, ma ho un 'altro problema piu' grande.. in pratica con IE7 non mi fa visualizzare il blog, mi da un messaggio di errore e si chiude la sessione, hai qualche soluzione? per adesso ho dovuto disinstallare lightbox!
grazie
spyke

mery ha detto...

@tenebrae io nn o internet completo e in questi giorni sn impAZZIta mi serv e urgente!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!tu ti chiederai perche ti sto chiedendo questo!e perchè ce lo da pochi giorni......................a un'altra cosa come si fa una e-mail???????

rrisp ti...ciao!!!!!!!!!!!!!!!!!!!!!!...

mimi ha detto...

ciao ciao ciao cm state ragazzi io bene e voi auna cosa vi devo dire ki legge questo mess mi risponda perfavore...

rispondetemiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii..........

Rullo69 ha detto...

Ciao e grazie mille per queste fantastiche informazioni!
Riguardo le slide con lightbox avevo da chiederti una cosa: quando creo un post con Live writer e aggiungo una serie di immagini associate col rel per una slide, come posso visualizzarne nel post una soltanto che sia da link diretto alla vera slide con lightbox?
grazie mille ciao

Tenebrae ha detto...

@rullo69: tutte le immagini devono trovarsi nella stessa pagina html, lightbox non permette di fare altrimenti

al limite puoi fare un link ad una pagina che contenga le immagini e le slide

Tania ha detto...

ciao tene.
ho provato a integrare lightbox. ho creato una slide su windows live writer e ho pubblicato il post. la prima volta che ho controllato tutto ok, ma dopo il blog mi si bloccava. ho dovuto togliere tutto :(

Maurizio ha detto...

Ciao anche io volevo sapere se e' possibile con lightbox o con altri metodi poter solo visualizzare una foto sul post che sia poi vincolo di uno slide con piu' foto.E' possibile?

Tenebrae ha detto...

@maurizio: basta seguire le istruzioni che ho dato qui e applicare i tag solo alle foto a cui vuoi applicare l'effetto

Alessandro ha detto...

Ciao,

mi funziona, ma non mi fa vedere le etichette Prev e succ... forse l'ultima release le ha tolte? Se clicco sulla foto scorre la slide.

Domanda: E' posssibile creare un album, postando solo 1 foto nel post, diciamo la copertina?

Grazie

Ale

Lulla ha detto...

Ciao Tene! Complimenti davvero per questa splendida guida e grazie di cuore! E' merito tuo se non siamo impazziti con il nostro blog :D
Avrei una domanda: la slide di cui parli è creata con Windows Live Writers se non sbaglio. Si può fare solo così o è possibile crearla in altri modi?
Grazie ancora, buona serata! :)

8spazio ha detto...

Ciao e complimenti per i tuoi tutorial, sempre utili e chiari...
grazie alla tua spiegazione ero riuscito ad inserire le immagini con lightbox ma purtoppo col passaggio al nuovo design modelli il lightbox non funziona più. Come fare per farlo funzionare di nuovo? O sbaglio io qualcosa?
Grazie dell'aiuto!

MiLLa ha detto...

Ciao e tanti complimenti per il tuo sito che mi è sempre molto utile. Avrei una domanda da farti.
Sto utilizzando lightbox nel mio blog, quindi con l'attributo rel="lightbox[galleria]" riesco ad associare tutte le immagini che seleziono ad uno stesso set. Cio' che vorrei sapere è se è possibile associare due set ad una stessa immagine, praticamente come succede coi tag dei post! Attendo tue notizie. Grazie .
Milla @ papaveridizucchero.blogspot.com

Fangyaya ha detto...

fangyanting20150926
louis vuitton, http://www.borselouisvuittonoutlet.it/
jordan shoes, http://www.jordanshoes.us.com/
michael kors outlet, http://www.michaelkorsoutletcanada.in.net/
longchamp handbags, http://www.longchamphandbag.us.com/
nfl jerseys wholesale, http://www.nfljerseys-wholesale.us.com/
hermes bags, http://www.hermesbags.co.uk/
oakley sunglasses wholesale, http://www.oakleysunglasseswholesale.us.com/
michael kors handbags, http://www.michaelkorshandbags.in.net/
ugg boots, http://www.uggboot.com.co/
nike air max shoes, http://www.nikeairmaxshoess.co.uk/
mulberry outlet, http://mulberryoutlet.outlet-store.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike trainers, http://www.niketrainers.me.uk/
coach outlet store, http://www.coach-outlet-store.us.com/
hermes belt, http://www.hermesbelts.us/
cheap nba jerseys, http://www.nbajerseys.net/
replica handbags, http://www.replicahandbag.us.com/
tory burch outlet, http://www.toryburchoutletonline.in.net/
air max 2015, http://www.airmax2015.in.net/
air jordan 11, http://www.airjordan11.net/
ray ban sunglasses, http://www.ray-bansunglasses.eu.com/
stuart weitzman boots, http://www.stuartweitzmanoutlet.us/
michael kors outlet, http://www.michaelkorsusa.us/
air max 90, http://www.airmax90.us.com/
ugg boots, http://www.uggbootscheap.eu.com/
ray ban sunglasses, http://www.raybansunglass.us.com/
the north face uk, http://www.thenorthfaces.org.uk/
swarovski jewelry, http://www.swarovski.in.net/
nike free, http://www.nikefreerunning.org/
ray ban sunglasses, http://www.raybansunglass.com.au/

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

chenlina ha detto...

CHENLINA20160308
ralph lauren outlet
louis vuitton outlet online
louis vuitton outlet
michael kors outlet
louboutin
ugg boots
ray-ban sunglasses
louis vuitton outlet
nfl jerseys
toms wedges
coach outlet store online
adidas superstars
oakley sunglasses
cartier watches
jordan 3s
beats solo
nfl jerseys wholesale
kate spade outlet
kobe 8
retro 11
ugg on sale
gucci outlet
nike sb janoski
michael kors outlet store
true religion jeans outlet
ugg boots
replica watches
louis vuitton handbags
air max 90
abercrombie & fitch new york
louis vuitton
canada gooses outlet
ray ban sunglasses outlet
the north face outlet
michael kors outlet
coach outlet online
kevin durant 8
coach factory outlet
coach factory outlet online
michael kors outlet
AS

林剑伟 ha detto...

http://www.cheapauthenticjordans.us.com
air huarache shoes
ugg outlet
Air Jordan 11
http://www.michaeljordanshoes.us.com
http://www.jordanretro.uk
ugg boots uk
michael kors outlet
tiffany,tiffany and co,tiffany and co jewelry,tiffany necklace,tiffany bracelet,tiffany ring,tiffany earrings
michael kors outlet store online
cheap air jordans
michael kors outlet store
http://www.jordansforcheap.us.com
michael kors handbags
http://www.christian-louboutin-outlet.uk
Cheap NFL Jerseys China
nike dunks
tiffany & co
michael kors outlet
chrome hearts wholesale
kobe shoes,kobe zoom,kobe byrant shoes
mlb jerseys authentic
tiffany online
tiffany online
http://www.cheapairjordan.uk
Michael Kors Online Outlet
huaraches shoes
kobe basketball shoes
cheap retro jordans
cheap jordans online
kobe shoes for sale online
jordan shoes
Michael Kors Outlet Online
ray ban uk,cheap ray ban sunglasses
michael kors handbags clearance

dong dong23 ha detto...

michael kors outlet
ralph lauren polo
michael kors outlet
kate spade outlet
kate spade outlet
coach factory outlet
michael kors outlet clearance
toms
tory burch outlet
adidas stan smith
ray ban sunglasses
asics running shoes
true religion jeans
fitflops
nike roshe runs
christian louboutin sale
ralph lauren polo
rolex watches
michael kors handbags
ray ban wayfarer
cheap oakley sunglasses
nike huarache shoes
ray ban outlet
toms shoes
air jordan 13
coach outlet
ray bans
adidas outlet
nike trainers
cheap jordans
hollister clothing
jordan 4 toro
adidas originals
toms outlet
ralph lauren outlet
michael kors handbags
coach outlet store online clearances
fake watches
coach outlet
hollister outlet
20165.4wengdongdong

Unknown ha detto...

michael kors outlet week!
ed hardy clothing for
salvatore ferragamo HOW
versace shoes Super
nike trainers uk top
nike tn pas cher it
cincinnati bengals jerseys stuffed
air max 90 adding
nike roshe run I
michael kors outlet super

raybanoutlet001 ha detto...

air max 90
jimmy choo shoes
nike huarache
pandora jewelry
ed hardy outlet
michael kors handbags
gucci sale
michael kors handbags
dolphins jerseys
oakland raiders jerseys

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
pandora charms
fred perry polo
cheap oakley sunglasses
michael kors outlet store
christian louboutin
nhl jerseys
coach factory outlet
ralph lauren outlet
coach outlet online
polo ralph lauren outlet


Prima di lasciare un commento, leggete qui

Posta un commento