8 giugno 2009

39 commenti Condividi il post Facebook Twitter Google+

Come usare Lytebox nel blog

Tempo fa ho pubblicato un post su Lytebox, un utilissimo script per visualizzare in modo professionale le immagini sul proprio blog.

In molti mi avete contattata perché avevate difficoltà nell'integrare Lytebox nel vostro blog... forse sul sito ufficiale non sono abbastanza chiari i pochi passi da seguire, e cioè scaricare Lytebox v3.22, scegliere uno tra i cinque diversi temi offerti (grigio, giallo, verde, rosso e blu), caricare online le immagini del colore desiderato, modificare i file lytebox.css e lytebox.js e caricarli online.

In molti però avete trovate queste operazioni troppo complesse... ho deciso quindi di caricare online tutte le immagini, modificare i file css e js per ogni tema e rendere disponibile il codice html da inserire nel blog.
Dovete solo scegliere il colore, copiare il codice e incollarlo prima del tag </head> (in Modifica html):

<script language='javascript' src='http://digilander.libero.it/iolecalblogspot/lytebox/red/lytebox.js' type='text/javascript'/>
<link href='http://digilander.libero.it/iolecalblogspot/lytebox/red/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://digilander.libero.it/iolecalblogspot/lytebox/gold/lytebox.js' type='text/javascript'/>
<link href='http://digilander.libero.it/iolecalblogspot/lytebox/gold/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://digilander.libero.it/iolecalblogspot/lytebox/blue/lytebox.js' type='text/javascript'/>
<link href='http://digilander.libero.it/iolecalblogspot/lytebox/blue/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://digilander.libero.it/iolecalblogspot/lytebox/grey/lytebox.js' type='text/javascript'/>
<link href='http://digilander.libero.it/iolecalblogspot/lytebox/grey/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://digilander.libero.it/iolecalblogspot/lytebox/green/lytebox.js' type='text/javascript'/>
<link href='http://digilander.libero.it/iolecalblogspot/lytebox/green/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>


Per utilizzarlo bisogna usare la seguente sintassi:
- una singola immagine: (rel="lytebox")
<a href="BIG_IMG_URL" rel="lytebox" title="DESC_IMG"><img src="SMALL_IMG_URL" /></a>

Tramonto a Sorrento

- un gruppo di immagini: (rel="lytebox[GROUP_NAME]")
<a href="BIG_IMG_URL_1" rel="lytebox[GROUP_NAME]" title="DESC_IMG_1"><img src="SMALL_IMG_URL_1" /></a>
<a href="BIG_IMG_URL_2" rel="lytebox[GROUP_NAME]" title="DESC_IMG_2"><img src="SMALL_IMG_URL_2" /></a>
<a href="BIG_IMG_URL_3" rel="lytebox[GROUP_NAME]" title="DESC_IMG_3"><img src="SMALL_IMG_URL_3" /></a>

Margerite Rose rosse Bouganvilla

- slideshow: (rel="lyteshow[GROUP_NAME]")
<a href="BIG_IMG_1" rel="lyteshow[GROUP_NAME]"><img src="SMALL_IMG_1" /></a>
<a href="BIG_IMG_2" rel="lyteshow[GROUP_NAME]"><img src="SMALL_IMG_2" /></a>
<a href="BIG_IMG_3" rel="lyteshow[GROUP_NAME]"><img src="SMALL_IMG_3" /></a>


- popup: (rel="lyteframe")
<a href="PAGE_URL" rel="lyteframe" title="DESC_PAGE">DESC_PAGE</a>



Resto a disposizione per ogni dubbio e chiarimento!
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

39 commenti

  1. Grazie Iole e complimenti...:)

    Rudin

    RispondiElimina
  2. avevo già fatto una prova, adesso seguo le tue indicazioni. grazie! ciao!

    RispondiElimina
  3. Per me è arabo ma siccome sono curiosa nel mio blog di prova ho provato ma.....cosa dovrebbe succedere? :)

    RispondiElimina
  4. @Cialla: prova a cliccare sulle foto presenti nel post e vedi cosa succede ;)

    RispondiElimina
  5. bellissimo e utilissimo questo script!!
    grazie come sempre per le tue spiegazioni!!

    ciao elisabetta

    RispondiElimina
  6. @AbcHobby.it: potresti usarlo sul tuo blog... visto che carichi le immagini su Flickr, potresti inserire nel post solo le miniature "quadrate" e visualizzare le foto in formato "grande"

    RispondiElimina
  7. se posso aggiungere .. una cosa? io con live writter inserisco anche delle descrizioni inerenti alle foto
    nella riga titolo, che e' visibile anche in miniatura quando ci passi sopra con il mouse compare la scritta, per il resto complimenti per il post! spiegato alla grande. ciaooo

    RispondiElimina
  8. @Spyke: hai ragione... non l'ho scritto ma è come dici tu: inserendo l'attributo title verrà visualizzata una descrizione al passaggio del mouse sopra la foto e anche nella finestra di Lytebox (in basso a sinistra).

    RispondiElimina
  9. ciao iole.

    Installato e provato sul blog di prova, ora lo passo sull'ufficiale.

    Grazie 1000, proprio quello che mi mancava

    Ciao,ciao

    RispondiElimina
  10. ciao iole, scusa se rompo ma ieri sera non riuscivo a postare sul tuo blog,sicuramente è un problema di firefox che sul Mac,non è il massimo.
    Infatti funziona con tutto il resto.

    ho notato forse un'errore, nello script le immagini sono invertite?

    "SMALL_IMG_URL"<>"BIG_IMG_URL"

    ciao,ciao ;-)

    RispondiElimina
  11. @klick: grazie mille per la segnalazione; in effetti erano invertite... ho appena corretto l'errore.

    RispondiElimina
  12. Di niente, felice di esserti stato utile

    Ciao,ciao

    RispondiElimina
  13. ciao. Scusate, ma visto che ve ne intendete, ... sto facendo una prova con il mio sito, inserendo questo Lytebox e tutto funziona (su pc e con ie) ma quando provo con mac (su safari) o con pc (googlechrome) non si vedono le immagini grandi (che sono .jpg) ... è tutta la mattina che sto diventando matta. Mi potete aiutare.
    Grazie mille
    Maria

    RispondiElimina
  14. @Maria: se mi dai l'indirizzo del tuo sito posso dare un'occhiata al codice html e vedere cosa non va!

    RispondiElimina
  15. ho scoperto. Praticamente è un'incompatibilità con iframe. Il sito l'ho fatto con iframe e quindi ... con ie funziona e con safari no. Caspita. Non so come risolvere.
    Grazie comunque della risposta ciao Maria

    RispondiElimina
  16. Ciao! Vorrei creare delle slide per il mio blogfotografico, ma ci capisco poco e niente di queste cose. Le foto sono caricate su picasawebalbum....si può fare qulcosa secondo te??? Il problema inoltre è che non vorrei che le foto venissero scaricate da chissa chi????

    Grazie per l'aiuto

    Ciao Giuliano

    RispondiElimina
  17. @The_Ecleptic: per creare uno slideshow devi copiare il codice html della sezione
    slideshow: (rel="lyteshow[GROUP_NAME]")
    Puoi utilizzare qualunque foto, anche se caricate su picasawebalbum.
    Ovviamente le foto potrebbero essere scaricate da chiunque in quanto nell'html del blog compaiono gli indirizzi.
    Se non riesci a creare lo slideshow contattami via chat.

    RispondiElimina
  18. Ciao Iole. Ho aperto da poco un blog a cui ho dato il nome
    di "fotopoesia". Quì, io pubblico le mie foto amatoriali,
    affiancando però ad esse delle poesie o piccoli racconti. Avevo la necessità di creare uno slideshow e quindi per primo ho usato e uso ancora Lightbox. Nonostante tutto, questo non mi soddisfa e quindi ho provato ad inserire Lytebox seguendo le Tue scrupolose istruzioni.
    Mi piace,anche se nel mio slideshow di prova ho riscontrato alcuni problemi; mi correggo, un problemino.
    Le immagini in verticale risultano più piccole di quelle che io ho ridimensionato.
    Puoi aiutarmi?
    E, se posso usufruire ancora della tua pazienza, c'è un modo per aumentare il tenpo di attesa tra una foto e l'altra?
    Scusami, se sono stato troppo noioso.

    Ciao da Costantino

    RispondiElimina
  19. @CS: nello slideshow le immagini in verticale vengono visualizzate più piccole in quanto vengono adattate all'altezza dello schermo.
    Per quanto riguarda il tempo di attesa tra una foto e l'altra, non sei il primo a fare questa richiesta. Occorerebbe mettere mano al codice javascript. Appena mi libero un po', ci provo e ti/vi faccio sapere.

    RispondiElimina
  20. Vorrei segnalarvi dei problemi di visualizzazione di lytebox 3.22 con internet explorer 8. In particolare bordi e pulsanti di navigazione scompaiono !.
    Ho corretto tali bugs e potete scaricare una versione aggiornata (3.23) da quiesto link: www.yeskme.com/index/it/software.php.

    RispondiElimina
  21. Seguendo i tuoi consigli avevo già inserito questo script nel mio spazio web, e, ancora ripeto nel dire che mi piace. Modificare i file lytebox.css e lytebox.js sono veramente operazioni troppo complesse? Per quanto mi riguada SI. Non saprei da dove iniziare, e quali siano i vari passi per il raggiungimento della meta. Sarebbe carino, e allo stesso tempo utile per tutti quelli, che , come me, sono ignari della materia , un piccolo tutorial su come modificarli e caricarli online. ....probabilmente ho esagerato. ....Io che suggerisco consigli su come gestire un blog.
    ....scusami. Aspettiamo il tuo ritorno.
    CIAO - CS

    RispondiElimina
  22. @CS: modificare il file javascript e quello css di Lytebox non è difficile. Spero presto di pubblicare il tutorial su come fare. Grazie per la segnalazione. Suggerimenti per nuovi post sono sempre ben accetti!

    RispondiElimina
  23. ...aspettiamo.....!!!! e ancora ben tornata!!!
    Ciao

    RispondiElimina
  24. Ciao iole! Il tuo tutorial é stato molto utile. Ma ora ho una domanda molto importante! Come si fa a fare in modo che le miniature abbiano tutte la medesima grandezza come le tue?
    Io ho diverse immagini ma quando le inserisco, le miniature sono enormi!

    Grazie!!!

    RispondiElimina
  25. @luxury deluxe: le mie miniature sono tutte della stessa grandezza perché ho preso le "immagini quadrate" da Flickr (come ho spiegato in questo post).
    Per rimpicciolire le tue immagini, puoi aggiungere le proprietà height e width in questo modo:
    <img src="indirizzo_immagine" style="height: 75px; width: 75px;" />

    RispondiElimina
  26. Ciao!!! Ho trovato comodissimo lytebox e sicuramente più chiaro e soddisfacente di Lightbox!!

    Tuttavia volevo chiederti un'informazione... come posso far si che parta un immagine in lytebox all' avvio della homepage del mio sito? Un messaggio di benvenuto in sostanza in jpg che si apre in automatico con lytebox!!!

    Grazie mille ^^

    RispondiElimina
  27. @Atane River: per far apparire un'immagine all'apertura della pagina del blog devi fare quanto segue: vai in Blogger - Design - Modifica html.
    Trova la riga di codice </head> e subito prima incolla questo codice:

    <script>
    function MsgBenvenuto() {
    var a = document.createElement("a");
    a.title = "Benvenuto"
    a.rel = "lytebox";
    a.href= 'INDIRIZZO IMMAGINE';
    if(typeof myLytebox=="undefined") initLytebox();
    myLytebox.start(a,false,false);
    }
    </script>


    sostituendo INDIRIZZO IMMAGINE con il link della tua immagine di benvenuto.

    Poi trova <body> e sostituiscila con:

    <body onload='MsgBenvenuto();'>.

    Infine salva le modifiche!

    Io l'ho testato e funziona correttamente su Firefox e Chrome mentre su Internet Explorer 6 no. Se hai una versione più recente di IE prova e fammi sapere.

    RispondiElimina
  28. Innanzitutto

    GRAZIE!!!!!!

    Ho perso una giornata a provare non ti dico quanti script di prova senza successo, e stavo per gettare la spugna in preda alla frustrazione!!! Quindi un grazie di cuore!!!

    Funziona benissimo ^^

    Volevo chiederti un' altra cosa già che ci sono ^^

    Con questo codice ho il mio messaggio di benvenuto praticamente sempre, sia che cambi pagina, sia che campi post... per caso sai se è possibile far si che appaia solo sulla Homepage? ^^

    Grazie ancora di tutto!!!!!!!

    RispondiElimina
  29. @Atane River: certo che lo so! ^_^

    Per far apparire il messaggio solo sull'homepage devi racchiudere il codice precedente tra:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script>
    function MsgBenvenuto() { ... }
    </script>
    </b:if>

    RispondiElimina
  30. Gentilissima Ione ^^

    mi scuso perchè ho sbagliato io nel spiegarmi nel commento precedente. Attualmente se apro il mio blog, mi appare correttamente la Lytebox di benvenuto. Tuttavia se apro i link ai post contenuti nella homepage, questa mi riappare ogni volta, mentre io preferivo che si aprisse solo nella pagina principale. Non so se sia possibile.

    Comunque ti ringrazio nuovamente, perchè questo secondo codice che mi hai suggerito mi permette di non visualizzare la Lytebox nelle pagine diverse dalla homepage e quindi è risultato UTILISSIMO!!!

    COMPLIMENTONI, e scusa per il disturbo ^^

    RispondiElimina
  31. @Atane River: io l'ho testato su un mio blog di prova e il messaggio di benvenuto mi appare solo sull'homepage, cliccando invece su uno qualsiasi dei post in home il messaggio non compare.
    Se mi dai l'indirizzo del tuo blog passo a controllare cosa non va.

    RispondiElimina
  32. Certamente ^^

    Il mio blog è satanismoveneto.blogspot.com

    Grazie mille per il tuo aiuto!

    RispondiElimina
  33. @Atane River: sono stata sul tuo blog e il messaggio di benvenuto mi appare soltanto sull'homepage. Cliccando invece su uno qualsiasi dei post in home o sull'archivio non visualizzo il messaggio.

    RispondiElimina
  34. In effetti se uso un link del widget "Etichette" (ribattezzato "Argomenti") mi appare, mentre usando i link del widget "Archivio" no... bizzarro XD! Va bene comunque!!! Grazie mille di tutto Iole! Provvederò a prendere il tuo bannerino e metterlo sul mio blog al più presto!!!

    Complimenti per il blog!!! E' stato uno dei migliori che ho trovato in rete!

    RispondiElimina
  35. @Atane River: grazie per i complimenti ^_^
    Comunque appena ho un po' di tempo, rivedo lo script sul mio blog di prova e ti faccio sapere.

    RispondiElimina
  36. Il lyteframe con Flickr non funziona. Prova ad usare un'altro sito come esempio. ciao :)

    RispondiElimina
  37. @Art: grazie per la segnalazione. Ho appena modificato il post sostituendo il link di Flickr con uno funzionante.

    RispondiElimina
  38. Ciao Iole,
    complimenti per il tutorial... un unico problema...
    Faccio tutto correttamente infatti se apro la pagina html vedo l'effetto spiegato nel tuo tutorial, ma quando pubblico il sito tramite iweb non ho l'effeto desiderato!!!Non so più cosa fare!!!!

    RispondiElimina
  39. @Anonimo: se mi lasci l'indirizzo del tuo sito passo a controllare cosa non va.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy