19 maggio 2011

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

<!-- EFFETTO SHADOWBOX INIZIO -->
<link href='https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000000&quot;,
overlayOpacity: &quot;0.9&quot;,
});
</script>
<noscript><a href='http://goo.gl/q56FZ' target='_blank'><span style='font-size: x-small;'>Shadowbox Effect</span></a></noscript>
<!-- EFFETTO SHADOWBOX FINE - http://www.ideepercomputeredinternet.com -->

Salvate il modello. Prima di leggere come fare per inserire materialmente immagini e video con questo effetto andate a vedere la

Inserimento di una sola foto mediante Editor di Blogger o Windows Live Writer 

Se si usa l'editor di Blogger si può caricare la foto dall'hard-disk, successivamente si va su Modifica HTML e si aggiunge la stringa

 rel="shadowbox"

nella posizione mostrata da questo screenshot

inserire shadowbox

Con Windows Live Writer si deve prima caricare l'immagine su Picasa quindi inserirla nell'articolo mediante Inserisci > Immagine > Dal web e incollandone l'URL. Successivamente si sceglie Collega a > Immagine di origine oppure Indirizzo web. In questo secondo caso si incolla l'URL dell'immagine su Picasa, quindi si inserisce shadowbox in Rel nell'ultimo campo

inserimento immagini windows live writer shadowbox

Tutto il resto del contenuto del post o della pagina statica si pubblica come al solito. Le immagini possono essere ridimensionate a piacere. Quando ci si cliccherà sopra si vedrà una finestra popup con la foto a dimensioni originali

effetto shadowbox utilizzo. 

Inserimento di immagini, video e pagine web mediante link per gallerie 

Non occorre postare una foto o un video per avere l'Effetto ShadowBox, è sufficiente inserire dei link nel post secondo questa sintassi dove come anchor text si può scegliere qualsiasi cosa

<a href="URL IMMAGINE" rel="shadowbox" title="NOME IMMAGINE">TESTO IMMAGINE</a>

dove si inserisce l'indirizzo della immagine caricata su Picasa o altro hosting

<a href="URL IMMAGINE 1" rel="shadowbox[nomegalleria]" title="Nome Immagine 1">Testo immagine 1</a>
<a href="URL IMMAGINE 2" rel="shadowbox[nomegalleria]" title="Nome Immagine 2">Testo immagine 2</a>
<a href="URL IMMAGINE 3" rel="shadowbox[nomegalleria]" title="Nome Immagine 3">Testo immagine 3</a>

serve per creare una galleria di immagini che possono essere in numero indefinito. In questo caso si deve inserire la stringa

rel="shadowbox[galleria1]"

dove si dovrà dare un nome alla galleria di foto. Si possono creare anche più gallerie in una stessa pagina dando ovviamente dei nomi distinti. Quando si cliccherà sopra a un link si vedranno gli strumenti di navigazione con il numero degli elementi della galleria

gallerie di foto con shadowbox

Per inserire un video di Youtube il codice da incollare in Modalità HTML è questo

<a href="http://www.youtube.com/v/T73frdYAgIE&amp;rel=0&amp;autoplay=1" rel="shadowbox;width=405;height=340;" title="Titolo video">Clicca qui per vedere il video</a>

dove si deve inserire l'ID del video al posto del codice in rosso. Si possono personalizzare anche le dimensioni. Il video inizierà a riprodursi nel momento in cui si clicca sul link. Questo accade per il parametro autoplay=1. L'ID dei video di Youtube possono desumersi dalla barra degli indirizzi del browser.Viene dopo v= e prima di &

id video youtube

 
Per inserire un video di Vimeo bisogna ricordarsi che gli URL dei video sono del tipo vimeo.com/XXXXXXXX. La parte finale rappresenta l'ID del video

<a rel="shadowbox;width=405;height=340;" title="Video Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=11712103&amp;autoplay=1">Nome video Vimeo</a>

dove si possono anche personalizzare le dimensioni.

Inserimento di pagine web e oggetti in flash

Per inserire una finestra con una pagina web

<a rel="shadowbox;width=800;height=600" title="Nome Pagina web" href="URL della pagina">Nome della pagina</a>

Per mettere l'effetto a un oggetto in flash in formato SWF

<a rel="shadowbox;width=600;height=400" title="Oggetto SWF" href="URL del file SWF">Nome Oggetto SWF</a>

Come inserire l'Effetto ShadowBox con l'ausilio di miniature

Abbiamo visto che si possono postare le immagini direttamente oppure si possono usare dei semplici collegamenti per generare l'effetto ShadowBox. Al posto del testo del link può essere messa una miniatura e questo sia con le immagini che con i video. Basta sostituire l'anchor text, che in tutti i codici è stato colorato di blu, con un codice che rappresenta l'immagine in miniatura in questo modo

<img style="width:120px; height:90px;" src="URL della immagine" />

dove si possono configurare le dimensioni ottimali. Ricordo che si può sempre ottenere l'URL della miniatura di un video di Youtube.

Considerazioni conclusive e regolazioni

Per modificare l'effetto si possono seguire le istruzioni del sito e scegliere tra le varie opzioni. E' consigliato solo ai lettori molto esperti. Nel codice iniziale ci sono dei dati in rosso

overlayColor: &quot;#000000&quot;,
overlayOpacity: &quot;0.9&quot;,

Il primo rappresenta il codice del colore dello sfondo mentre il secondo è la percentuale di opacità del background (0.1 è il minimo e 1.0 è il massimo). Questi parametri possono essere modificati a seconda dei colori del blog o del gusto personale.

Volendo si possono anche creare gallerie miste di immagini, video e oggetti in flash. Non sto a trattare l'argomento in modo esaustivo altrimenti faccio un romanzo. Mi limito a pubblicare su Google Documenti un codice di esempio di una galleria con tre immagini e un video con le relative miniature

Nel caso abbiate un blog su Blogger con un dominio personalizzato cioè del tipo www.miodominio.com, può capitare che gli script che ho caricato su Google Sites con la modalità schedario non funzionino. Non si sa bene da cosa dipenda ma può essere che Google non voglia fare da deposito per CSS e Javascript poi utilizzati su siti non di sua proprietà. Per ovviare all'inconveniente basta scaricare i due file

https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css
https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js

caricarli sul vostro account DropBox, acquisirne l'hotlink e sostituirlo nel primo codice. Se ancora non siete iscritti a DropBox potete porre rimedio a questa grave manchevolezza compilando questo modulo di invito a DropBox.

Aggiornamento: L'effetto ShadowBox non funziona con IE. Me ne sono accorto solo ora perché non uso mai quel browser.




42 commenti:

  1. Ciao,
    Ho un problema quando uso analytic mi fà vedere i dati relativi al giorno precedente...cosa devo fare?

    RispondiElimina
  2. Analytics è sempre in ritardo di 24 ore circa. Per vedere i dati reali di oggi bisogna aspettare le 9 domani mattina. Se vuoi avere delle statistiche in tempo reale puoi guardare la scheda Statistiche su Blogger.

    RispondiElimina
  3. ti segnalo che sto avendo difficoltà ultimamente nella ricerca personalizzata ovvero mi rimanda (se va bene) il solo indirizzo di home page tua e non quello che cerco
    ad esempio oggi cercavo "pagine numerate" poi solo "pagine"
    magari non funziona a me ma è diverso tempo che fa così .. pls check and
    let's know
    ;-))

    RispondiElimina
  4. Grazie Tex,
    non ho capito come sia potuto succedere, ora dovrebbe essere tutto a posto. Ciao

    RispondiElimina
  5. Ciao, ho creato una pagina multimedia
    caricando una galleria immagini con effetto ShadowBox perfettamente funzionante,ma quando tento di aggiungere un'altra galleria di immagini con lo stesso procedimento della prima, questa non e' visibile sulla pagina ma carica le foto sempre nella prima galleria.Dove sbaglio?
    comunque grazie molte per i tuoi preziosi post che sono serviti ad abbellire il blog in modo non indifferente.ciao

    RispondiElimina
  6. @Flccgil Polime
    Sbagli non cambiando il nome delle gallerie.
    Alle foto della prima galleria devi inserire per esempio
    rel="shadowbox[galleria1]"
    e a quelle della seconda per esempio
    rel="shadowbox[galleria2]"
    e così via

    RispondiElimina
  7. Attualmente il mio blog http://tuttoconilpc.blogspot.com/ ha un dominio gratuito.Se in questo momento decidessi di acquistare un dominio perderei l'indicizzazione da google?

    RispondiElimina
  8. niente da fare cambio il nome alla galleria e alle foto che carico ma il risultato è sempre quello.

    RispondiElimina
  9. scusa Ernesto, avevi ragione ma molto probabilmente era esatto sin dal primo momento solo che non visualizzavo, la ragione? c'era uno spazio enorme fra il titolo di una galleria e l'altra e mi sono accorto solo adesso.risolto Grazie ancora!

    RispondiElimina
  10. @Rubel
    Leggi questo post
    http://www.ideepercomputeredinternet.com/2010/11/cosa-fare-durante-il-passaggio-da-un.html
    E' spiegato tutto con chiarezza

    @Ficcgil
    Come vedi nel post di prova ci sono due diverse gallerie entrambi funzionanti, quindi è una cosa che non mi so spiegare.

    RispondiElimina
  11. ciao ho un problema, le immagini non vengono visualizzate una sotto l'altra come nel tuo blog di prova, ma vengono visualizzate in diagonale una dopo l'altra a mo' di scala

    http://dittapaolotest.blogspot.com/p/prova-pag.html

    grazie per l'aiuto

    RispondiElimina
  12. @DittaPaoloScanu
    L'effetto vedo che funziona benissimo. Per inserire le immagini orizzontalmente o verticalmente puoi usare l'Editor di Blogger e scegliere Centra. Se non ti viene allora usa una tabella con Windows Live Writer
    http://www.ideepercomputeredinternet.com/2010/03/galleria-foto-windows-live-writer.html
    IL tuo layout però è molto stretto e dovresti usare delle miniature più piccole.

    RispondiElimina
  13. Ciao! Questo effetto mi interessa molto. Vorrei chiederti una cosa: Visto che io ho inserito anche altri codici sopra al tag head mi viene il dubbio che quest'ultimi non funzionino più. E' così o posso tranquillamente inserire anche altre cose? Grazie mille.

    RispondiElimina
  14. @MariaFelicia99
    Quello non è un problema. Si dice di mettere i codici sopra al tag /head per semplificare ma la posizione è irrilevante. Devono però essere anche sotto la riga /b:skin
    Se ci sono problemi non dipenderà da quello ma da delle incompatibilità tra i vari javascript che sono sempre possibili.

    RispondiElimina
  15. ciao, è possibile inserire questo effetto scrivendo rel="shadowbox" nel codice html del post ma caricando le foto dal computer con WLWriter?
    da quanto leggo in questo post è possibile solo se carichi le foto tramite blogger! grazie per la risposta!

    RispondiElimina
  16. @Ditta ...
    Nel post è scritto chiaramente che si può fare in entrambi i modi. Si può fare anche in un momento successivo con foto già pubblicate o anche per articoli passati.

    RispondiElimina
  17. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  18. ciao.ho provato ad inserire l'effetto shadowbox prettamente per utilizarlo con i video. ho seguito al dettalgio la guida ma l'effetto desiderato non è ocme quello che viene a te. questo è il link il video è quello con scritto prova

    http://www.xboxbook.org/p/video.html

    RispondiElimina
  19. @GEKO24
    Proprio oggi Blogger ha introdotto una grossa novità
    http://www.ideepercomputeredinternet.com/2011/09/blogger-introduce-nativamente-un.html
    ancora non ufficiale ma che impedisce il corretto funzionamento di questi tipi di effetti. Seguimi nei prossimi giorni.

    RispondiElimina
  20. Fantastico!!! Ci sono riuscito! :P

    RispondiElimina
  21. Shadowbox l'avevo provato tempo fa su un primo blog e funzionava su IE. Ora l'ho ritestato su un altro e pare funzioni su IE9, l'unico difetto riscontrato finora è che non c'è l'animazione del loading anche se la gif del caricamento appare. L'ho provato oltre che con le foto, anche con i link, nel mio caso rinvianti alle mappe di Google a tutto schermo.

    RispondiElimina
  22. Come faccio a farlo funzionare con internet explore, la soluzione l'ho trovata sul sito ufficiale di shadowbox:(http://www.shadowbox-js.com/support.html)ma non riesco ad applicarla, mi potresti dare una mano.
    sito: http://my-coloryourlife.blogspot.com/

    RispondiElimina
  23. @Manager
    Il link che mi hai dato porta a fare una modifica all'inizio della pagina web di Blogger. Si tratta sempre di cose abbastanza rischiose, in questo caso però è una cosa anche inutile visto che i blog su Blogger hanno già il codice in quel modo.

    RispondiElimina
  24. @Manager
    Le vecchie versioni di IE non vengono più supportate neppure da Youtube e con IE9 e il prossimo IE10 non sembra ci siano problemi.

    RispondiElimina
  25. @Manager
    La Demo con IE9 funzionava bene. Forse dipende anche dai nuovi commenti che danno dei problemi con IE

    RispondiElimina
  26. scusa mi potresti dire come si chiama questo effetto: http://img859.imageshack.us/img859/9448/immaginesenzanome.png

    RispondiElimina
  27. @Manager
    E' il Lightbox nativo di Blogger
    http://www.ideepercomputeredinternet.com/2011/04/come-inserire-automaticamente-l.html

    RispondiElimina
  28. Scusate.....

    sono nuovo del "settore" e sto creando un mio sito web...

    Ho le mie pp di home & info con associato un css unico.....

    Adesso per fare la galleria delle img avrei intenzione di suddividere le immagini in album e tramite shadowbox quando si entra dentro uno di questi, avere l'effetto reso dal programma.

    Come mi debbo muovere...??

    Non ho idea....

    Pensavo anzitutto....ma si può fare questa suddivisione...??

    E successivamente.....

    E come implemento il foglio di stile, ne creo un'altro oppure metto un div che sia relativo la pp della galleria e da là indico il css di shadowbox...??


    Grazie.....

    Enrico

    RispondiElimina
    Risposte
    1. @Enrylion-BBFC
      Confesso di non aver capito il tuo problema. Con questo effetto puoi creare delle gallerie. Se hai un CSS unico non vedo perché non se ne possa inserire anche un altro. Possono ovviamente esistere problemi di incompatibilità ma questo si scopre solo dopo l'installazione.

      Elimina
  29. Ciao, grazie per la risposta celere...!! :-)

    La questione di base è che...vorrei creare per esempio 4 album contenenti immagini (nr casuale....) suddividendo così le tematiche......

    Vorrei che apparissero solamente le 4 copertine nella pagina delle immagini, successivamente all'apertura di uno degli album si possono vedere le miniature, espandibili con l'effetto dato da shadowbox......


    E' possibile con quel programma effettuare questa cosa?? E soprattutto...mi sono spiegato......?? :-))

    Ah, quindi posso creare un second CSS e linkare quello al posto degli altri nella pagina in questione, senza che alle altre pagine questo possa fare influenza....

    Problemi incompatibilità in che senso, a che livello??

    Grazie... :-)

    Enrico

    RispondiElimina
    Risposte
    1. @Enrylion
      Incompatibilità tra il javascript di Shadowbox e altri javascript eventualmente presenti nel modello. Il resto del tuo commento onestamente non riesco a decifrarlo. Con le istruzioni di questo post si possono creare delle gallerie video, poi ognuno può personalizzare la cosa come gli pare (se è in grado di farlo).

      Elimina
    2. Buonasera,

      data l'assenza altro codice java, posso confidare in nessuna incompatibilità, sto muovendo i primi passa nella web graphic, pertanto mi limito solamente a basi html & css....non mi avventuro oltre per adesso..... :-)

      Per cercare di spiegare e far comprender meglio la mia esigenza:

      Lei accede ad un sito web di un fotografo, nella pagina con il portfolio troverà delle immagini suddivise per "tema".

      Ecco, immagini nella pagina della galleria vedere solamente la "copertina" ed il titolo di tali album.....

      Questa è la mia necessità in sintesi.....

      Spero essermi spiegato.....altrimenti...proverò direttamente il codice, e riporterò eventuali problemi.....

      Saluti

      Enrico

      Elimina
    3. @Enrylion
      Allora ti conviene trovare un modello già predisposto

      Elimina
    4. Ok....e dove posso reperirli, ricerco su google modelli/esempi shadowbox, oppure vi sono dei siti ad hoc consigliati/consigliabili...?

      Grazie

      Elimina
    5. @Enrylion ...
      Guarda un po' qui
      http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html

      Elimina
  30. Ciao Ernesto! io sono una tua follower affezionata da quando ti ho scoperto da un paio di mesi, e da principiante sto costruendo,grazie a i tuoi utilissimi consigli il mio blog/portfolio. Ho provato tutte, ma proprio tutte le tue gallerie e slideshow, per mia sfortuna, tutte non funzionavano perchè facevano contrasto con i widgets del template che avevo scaricato. Ad esempio non potevo neppure usare il lightbox di blogger, nè quello tuo,perchè come altri slideshow,ma per mia fortuna, Shadowbox funzionaaaaa!!! Ora ho un'unica curiosità, per quanto riguarda il mettere una pagina web, io avrei voluto mettere il mio canale youtube, si, lo so, che c'è già il widget dei video su youtube, ma si potrebbe fare? ho seguito tutto passo passso, e infatti per mio portfolio online funziona. Quindi strano che non funzioni per Youtube.
    Che ne pensi? è vero che posso far si che la pagina rimandi al link che voglio,però in questa maniera,uno può visualizzare,interagire rimanendo nel blog,ecco perchè la tua idea mi piace di più.
    (Grazie anche per il consiglio di usare Windows live writer,è ottimo!)
    Ecco il mio blog,
    http://estercellucci.blogspot.com/

    RispondiElimina
    Risposte
    1. @EsterCellucci
      Se hai il codice del widget del tuo canale di Youtube puoi inserirlo al posto del codice del LikeBox di Facebook seguendo le istruzioni di questa pagina

      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html

      limitatamente alla parte finale del post. Segui anche questo post

      http://www.ideepercomputeredinternet.com/2011/02/come-incorporare-un-canale-di-youtube.html

      Elimina
    2. grazieissime ernesto! ha funzionato alla grande!ho incorporato il codice nella mia pagina statica, perfetto!ti ringrazio tanto, sono sicura che cercando un pò di più avrei trovato anche questo consiglio,ma sono contenta di aver rotto il ghiaccio, domandando a te di persona,così posso ringraziarti doppiamente! e quando avrò finito di migliorarlo metterò il tuo antipixel. Ho imparato più da te che dal mio prof di editoria multimediale all'università!certo, era un esame facoltativo,ma ho sempre voluto farmi un sito/blog, grazoe a te ci sto riuscendo!

      Elimina
  31. Ciao Ernesto!

    Ottimo articolo ed ottimo effetto a tal punto che ho voluto sperimentarlo!

    Tuttavia, ho un problema con le mappe Google. Il link di Google Maps non va con lo shadowbox: cliccandoci su, dà il consueto effetto nero, si apre la finestra come quella delle foto, ma all'interno della finestra non c'è nulla.

    Sei al corrente di qualche soluzione per caso?

    Grazie per l'aiuto in anticipo!

    Gianluca

    RispondiElimina
    Risposte
    1. @# Usare l'effetto Shadowbox per le mappe mi sembra piuttosto ardito. Però puoii provare a usare questo post se vuoi evidenziare una sola mappa
      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html

      Elimina

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.