11 novembre 2010

Effetto Facebox per i nuovi modelli di Blogger e compatibile con Google Friend Connect.

Gli effetti Lightbox e Lytebox sono molto affascinanti e permettono di creare gallerie di immagini inserendone soltanto le miniature che poi si aprono con il click del mouse. Hanno la controindicazione di non essere compatibili con molti nuovi modelli e di andare in conflitto con Google Friend Connect visto che il widget dei lettori utilizza uno script molto simile.
Ho scovato un altro effetto, denominato Facebox, che è di minor impatto visivo, ma ha il vantaggio di essere facilmente installabile nei nuovi template di Blogger creati con il Designer Modelli, di essere compatibile con Google Friend Connect e di funzionare con tutti i browser. Per quanto riguarda IE l'ho testato con IE 9 Beta ma non dovrebbero esserci problemi neppure con IE7 e IE8.
Prima di procedere alla installazione andate a dare uno sguardo all'effetto nella pagina di demo che ho creato appositamente
Se si clicca su una miniatura di una immagine, questa diventa a grandezza naturale e si visualizza dentro una cornice grigia
demo-effetto-facebox
Si clicca su Close per chiudere l'effetto. Come vedete nella stessa pagina è presente anche Google Friend Connect che funziona perfettamente e non va in conflitto con gli script di Facebox. Per rendersene conto basta cliccare sul mio avatar.
Il lavoro di caricare immagini e file nel web l'ho già fatto io, quindi anche l'installazione dell'effetto è semplicissima. Nel nuovo Designer Modelli di Blogger è presente la sezione Design > Designer modelli > Avanzato > Aggiungi CSS che serve appositamente per inserire nuovi CSS ma in questo caso non può essere utilizzata perché dobbiamo caricare anche degli script.
Si va quindi, come al solito, su Design > Modifica HTML e si cerca la riga </head>. Immediatamente sopra si incolla il seguente codice
<!--FACEBOX INIZIO-->
<script src='https://sites.google.com/site/ideepercomputeredinternet/facebox/jquery-1.2.2.pack.js' type='text/javascript'/>
<link href='https://sites.google.com/site/ideepercomputeredinternet/facebox/facebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/ideepercomputeredinternet/facebox/facebox.js' type='text/javascript'/> <script type='text/javascript'>
    jQuery(document).ready(function($) {
      $(&#39;a[rel*=facebox]&#39;).facebox()
    })
</script>
<!--FACEBOX FINE - www.ideepercomputeredinternet.com-->
quindi si Salva il Modello.
Per rendere visibile questo effetto dobbiamo inserire le immagini nel web e ottenerne l'URL. Questo può essere fatto caricandole su Picasa, Skydrive, ImageShack, o su qualsiasi altro hosting gratuito.
Se si utilizza l'editor normale di Blogger dobbiamo immettere le immagini scegliendo Icona immagini > Da un URL e incollando l'indirizzo acquisito dal servizio in cui si sono caricate. Successivamente si va in Modifica HTML e si inserisce l'attributo rel="facebox" nella posizione indicata dallo screenshot
facebox-url
cioè dopo l'URL del collegamento alla immagine e prima di style=". Si pubblica l'articolo normalmente e le immagini inserite con questo procedimento mostreranno l'effetto FaceBox quando sono cliccate con il mouse.
Se per scrivere articoli si utilizza Windows Live Writer, il procedimento varia di poco. Dobbiamo sempre caricare l'immagine nel web e andare su Inserisci > Immagine > Dal Web; dopo dovrà essere selezionata. Occorrerà quindi andare su Strumenti immagine > Collega a > Indirizzo Web
collega-indirizzo-web
Lo screenshot si riferisce all'ultima versione di WLW ma questa opzione esiste anche in quella precedente solo che è nella sidebar di destra invece che nella barra multifunzione in alto. Nella finestra che si apre, si incolla l'URL della immagine e, nel campo rel in basso, si digita facebox (senza virgolette)
rel-facebox
Si clicca su Inserisci per terminare. Successivamente si pubblica l'articolo come al solito. Tutte le immagini che saranno state inserite in questo modo si apriranno con l'Effetto FaceBox.
Fonte | Dynamic Drive -



17 commenti :

  1. con questa modifica resta la possibilità, una volta cliccato sulla miniatura, di sfogliare le altre immagini senza chiudere la finestra? compaiono i pulsanti next o prev adottando la stessa dicitura rel="facebox[galleria]"? Grazie

    RispondiElimina
  2. @Ugo
    No. Facebox è meno invasivo di Lightbox e Lytebox e dà come unico effetto quello di visualizzare le immagini a grandezza naturale in una cornice

    RispondiElimina
  3. Me l'ero persa questo articolo! E me ne sono resa conto solo ora che stavo cercando di scovare un nuovo effetto. Scopro FaceBox e scopro te. :D
    Di' un po' Ernesto, sembra che non si possa aggiungere testo, vero? Ho letto su un forum americano che dovrei aggiungere un DIV.
    Articolo naturalmente perfetto. ;)

    RispondiElimina
  4. @Marguerite N.
    Dici di aggiungere del testo come didascalia o descrizione dell'immagine?
    Penso si possa ma non ho testato. Si potrebbe inserire la didascalia con l'Editor di Blogger o con WLW, procedere come nel post e vedere il comportamento dell'effetto.

    P.S. E' imperdonabile che ti sia persa un mio post ahahah

    RispondiElimina
  5. Buongiorno!
    Ho provato come con lytebox aggiungendo title="Your Description", ma niet, non funziona.

    PS Lo so. xD Ed era anche un articolo che mi interessava parecchio visto che c'era rimasta male l'altra volta.

    RispondiElimina
  6. @Marguerite N.
    Si può mettere la didascalia alle immagini con l'Editor di Blogger. Guarda l'ultima foto di Charlize Theron in questo post
    http://sfondopersonalizzato.blogspot.com/2010/11/demo-effetto-facebox.html
    ma la scritta non viene visualizzata nell'effetto.
    Credo che sia lo stesso anche per LyteBox e Lightbox.
    Intanto stai guadagnando posizioni su posizioni nel widget dei Top Commentatori ^;^

    RispondiElimina
  7. Con Lighttebox avevo un po' tutto, anche la possibilità di applicare lo slide solo per una categoria e non per tutte le foto del post. Vabbè che ogni volta andare in html e aggiungere tutte le voci era un bel problema, però almeno il titolo era carino.
    Comunque mi accontento, già così sono contentissima. :D

    Eh be', mica pizza e fichi, io sono un'assidua lettrice! :D

    RispondiElimina
  8. anche se non commento spesso.

    Avevo lasciato la frase a metà, sono la solita ahaha.

    RispondiElimina
  9. E così sono altri due commenti e sei già in settima posizione :D pronta a insidiare il podio *^

    RispondiElimina
  10. Ciao Parsifal,
    ma l'effetto si applica anche per tutte le foto già presenti nel blog?

    RispondiElimina
  11. @Superzot
    Sì si può applicare ma devi ripubblicare i post inserendo in Modalità HTML, per ciascuna foto che vuoi mostri l'effetto, rel="facebox", come spiegato nel post

    RispondiElimina
  12. Ciao, ho avuto modo di provare lo script su questa pagina https://www.facebook.com/RB.Tattoo.Machines?sk=app_195611817141370 e precisamente nella pagina del link Accessori e ricambi. Lo script mi funziona bene ma invece di aprirsi in un box si apre in un'ica pagina e l'immagine si posiziona su Top-Left, cosa ho sbagliato?
    Grazie

    RispondiElimina
  13. @gighen
    Non conosco questa app di FB

    RispondiElimina
  14. Ciao, grazie di avermi risposto.
    L'applicazione che uso su FB per creare la pagina è questa: IFrame Apps ed ho creato la pagina con tabelle e celle, in cui ho messo delle immagini all'interno delle celle, ora vorrei poterci cliccare sopra e far ingrandire l'immagine come spieghi nel tuo script. Seguendo le tue indicazioni per inserire lo script, cliccandoci sopra l'immagine invece di aprirsi in una cornice come nell'esempio da te descitto, si va ad aprire in una nuova pagina bianca posizionandosi sul lato sx in alto della stessa.
    Se vuoi dare un'occhiata a come si comporta lo scrip ti posto il link qui:https://www.facebook.com/RB.Tattoo.Machines. Ora clicca sul menu Accessori e ricambi e poi clicchi sulla prima immagine e vedi dove si posiziona l'immagine. Ora vorrei sapere dove ho sbagliato, e cosa devo fare per correggere l'errore.
    Ti ringrazio della tua pazienza, resto in attesa di tue notizie.

    RispondiElimina
  15. @gighen
    Questo effetto è per Blogger e mi sarei stupito molto se avesse funzionato anche in una pagina fan che ha tutto un altro linguaggio di programmazione. L'applicazione che usi la conosco, è ottima, ma non è che puoi portarci tutte le personalizzazioni di Blogger.

    RispondiElimina
  16. Ok! Capito. Pensavo che si potesse applicare su qualsiasi codice html ed ottenere lo stesso effetto. Grazie comunque cerchero' in altro modo come fare. Complimenti comunque per il tuo sito lo ritengo molto ma molto utile, un po di tempo fa ho avuto modo di utilizare dei tuoi consigli proprio su blogger e mi sono stato molto utili. Grazie di tutto, sicuramente usero altri tuoi consigli che proponi qui. Ciao

    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.