22 ottobre 2009

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

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

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


19 commenti:

  1. Utilissimo, grazie! Non riuscivo a trovare qualcosa di efficace per i blog piuttosto che per i siti!
    Ciao, alla prossima

    RispondiElimina
  2. @Jessica
    Tanti saluti anche a te e grazie della considerazione :)

    RispondiElimina
  3. Ciao!Ho aggiunto l'effetto lightbox alle mie foto ma purtroppo cliccandoci sopra diventano enormi..come risolvo questo problema?Grazie.

    RispondiElimina
  4. @Patrizia Corriero
    Diventano della loro dimensione originale. Basta che tu, prima di postarle, le cambi le dimensioni (per esempio passi da 800x600 pixel a 400x300 pixel).
    Puoi utilizzare Photoshop, Paint.NET o Gimp che sono gratis.
    Esistono anche dei tool tipo
    Image Resize Powertot o Image Tuner
    Ciao

    RispondiElimina
  5. Molto utile e funziona bene, grazie mille.
    Ho solo un piccolo problema, non so se puoi aiutarmi: i tasti prev e next della gallery funzionano, ma non compaiono. Ovvero: se clicco sui bordi dell'immagine una volta ingrandita da Lightbox posso navigare all'interno della gallery, ma senza che i tasti next, prev e la x per chiudere si vedano.

    Tutto ciò ha senso?

    Ad ogni modo grazie per la guida.

    RispondiElimina
  6. @gabbbro
    E' vero ci deve essere qualche problema di hosting. Domani vedo di risolvere.

    RispondiElimina
  7. Aggiornamento:
    Risolto problema di hosting delle immagini per gli strumenti di navigazione (Prev, Next e Close)

    RispondiElimina
  8. Ottimo!
    Ora devo cambiare qualcosa per renderli visibili?

    RispondiElimina
  9. @gabbbbro
    Devi sostituire il vecchio codice con il nuovo. Puoi anche sostituire solo le righe che sono state modificate.

    RispondiElimina
  10. Ops!
    Sciocco io, lo avevi anche scritto! :)

    Grazie ancora, funziona alla grande.

    RispondiElimina
  11. ho utilizzato questo effetto con ottimi risultati qualche tempo fa in questa pagina http://myjacket-photogallery.blogspot.com/2011/03/londra-firenze-by-bike.html servendomi di W.live writer
    Adesso vorrei creare un'altra pagina ma W.live writer non mi permette più l'opzione "collega a URL"...?!?
    come posso fare visto che utilizzando l'editor di blogger ho pure dei problemi....
    grazie

    RispondiElimina
  12. @Gianni Zucchini
    esiste ancora. Si sceglie Collega a > Indirizzo web Ecco lo screenshot
    http://i.minus.com/ieEN29bFu.png

    RispondiElimina
  13. Gentilissimo, come risulta da questo blog di prova http://dajdphylosophy.blogspot.it/ non riesco a vedere l'immagine ingrandita nello slideshow. Dove ho sbagliato? Devo modificare qualche parametro in html oppure direttamente le dimensioni delle immagini caricate su flikr?

    RispondiElimina
    Risposte
    1. @Donatello
      Non te lo dire con certezza, delle volte ci sono delle incompatibilità intrinseche. La demo funziona quindi questo vuol dire che gli script sono tuttora funzionanti.

      Elimina
  14. Grazie ho risolto! Dipendeva dal link che copiavo su flickr. In base alla grandezza visualizzata cambia il link e di conseguenza le dimensioni dell'immagine in pagina! grazie mille per la disponibilità.

    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.