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 che più vi piace, copiare il codice e incollarlo prima del tag </head> (in Modifica html):
<script language='javascript' src='https://www.iolecal.it/blog/posts/post089/red/lytebox.js' type='text/javascript'/>
<link href='https://www.iolecal.it/blog/posts/post089/red/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://www.iolecal.it/blog/posts/post089/red/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://www.iolecal.it/blog/posts/post089/gold/lytebox.js' type='text/javascript'/>
<link href='https://www.iolecal.it/blog/posts/post089/gold/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://www.iolecal.it/blog/posts/post089/gold/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://www.iolecal.it/blog/posts/post089/blue/lytebox.js' type='text/javascript'/>
<link href='https://www.iolecal.it/blog/posts/post089/blue/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://www.iolecal.it/blog/posts/post089/blue/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://www.iolecal.it/blog/posts/post089/grey/lytebox.js' type='text/javascript'/>
<link href='https://www.iolecal.it/blog/posts/post089/grey/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://www.iolecal.it/blog/posts/post089/grey/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://www.iolecal.it/blog/posts/post089/green/lytebox.js' type='text/javascript'/>
<link href='https://www.iolecal.it/blog/posts/post089/green/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://www.iolecal.it/blog/posts/post089/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>
- 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>
<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>
- 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>
<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.
Copyright 2008- 
Design by 
Grazie Iole e complimenti...:)
RispondiEliminaRudin
avevo già fatto una prova, adesso seguo le tue indicazioni. grazie! ciao!
RispondiEliminaPer me è arabo ma siccome sono curiosa nel mio blog di prova ho provato ma.....cosa dovrebbe succedere? :)
RispondiElimina@Cialla: prova a cliccare sulle foto presenti nel post e vedi cosa succede ;)
RispondiEliminabellissimo e utilissimo questo script!!
RispondiEliminagrazie come sempre per le tue spiegazioni!!
ciao elisabetta
@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"
RispondiEliminase posso aggiungere .. una cosa? io con live writter inserisco anche delle descrizioni inerenti alle foto
RispondiEliminanella 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
@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).
RispondiEliminaciao iole.
RispondiEliminaInstallato e provato sul blog di prova, ora lo passo sull'ufficiale.
Grazie 1000, proprio quello che mi mancava
Ciao,ciao
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.
RispondiEliminaInfatti funziona con tutto il resto.
ho notato forse un'errore, nello script le immagini sono invertite?
"SMALL_IMG_URL"<>"BIG_IMG_URL"
ciao,ciao ;-)
@klick: grazie mille per la segnalazione; in effetti erano invertite... ho appena corretto l'errore.
RispondiEliminaDi niente, felice di esserti stato utile
RispondiEliminaCiao,ciao
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.
RispondiEliminaGrazie mille
Maria
@Maria: se mi dai l'indirizzo del tuo sito posso dare un'occhiata al codice html e vedere cosa non va!
RispondiEliminaho 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.
RispondiEliminaGrazie comunque della risposta ciao Maria
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????
RispondiEliminaGrazie per l'aiuto
Ciao Giuliano
@The_Ecleptic: per creare uno slideshow devi copiare il codice html della sezione
RispondiEliminaslideshow: (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.
Ciao Iole. Ho aperto da poco un blog a cui ho dato il nome
RispondiEliminadi "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
@CS: nello slideshow le immagini in verticale vengono visualizzate più piccole in quanto vengono adattate all'altezza dello schermo.
RispondiEliminaPer 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.
Vorrei segnalarvi dei problemi di visualizzazione di lytebox 3.22 con internet explorer 8. In particolare bordi e pulsanti di navigazione scompaiono !.
RispondiEliminaHo corretto tali bugs e potete scaricare una versione aggiornata (3.23) da quiesto link: www.yeskme.com/index/it/software.php.
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.
RispondiElimina....scusami. Aspettiamo il tuo ritorno.
CIAO - CS
@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...aspettiamo.....!!!! e ancora ben tornata!!!
RispondiEliminaCiao
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?
RispondiEliminaIo ho diverse immagini ma quando le inserisco, le miniature sono enormi!
Grazie!!!
@luxury deluxe: le mie miniature sono tutte della stessa grandezza perché ho preso le "immagini quadrate" da Flickr (come ho spiegato in questo post).
RispondiEliminaPer rimpicciolire le tue immagini, puoi aggiungere le proprietà height e width in questo modo:
<img src="indirizzo_immagine" style="height: 75px; width: 75px;" />
Ciao!!! Ho trovato comodissimo lytebox e sicuramente più chiaro e soddisfacente di Lightbox!!
RispondiEliminaTuttavia 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 ^^
@Atane River: per far apparire un'immagine all'apertura della pagina del blog devi fare quanto segue: vai in Blogger - Design - Modifica html.
RispondiEliminaTrova 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.
Innanzitutto
RispondiEliminaGRAZIE!!!!!!
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!!!!!!!
@Atane River: certo che lo so! ^_^
RispondiEliminaPer far apparire il messaggio solo sull'homepage devi racchiudere il codice precedente tra:
<b:if cond='data:blog.pageType == "index"'>
<script>
function MsgBenvenuto() { ... }
</script>
</b:if>
Gentilissima Ione ^^
RispondiEliminami 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 ^^
@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.
RispondiEliminaSe mi dai l'indirizzo del tuo blog passo a controllare cosa non va.
Certamente ^^
RispondiEliminaIl mio blog è satanismoveneto.blogspot.com
Grazie mille per il tuo aiuto!
@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.
RispondiEliminaIn 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!!!
RispondiEliminaComplimenti per il blog!!! E' stato uno dei migliori che ho trovato in rete!
@Atane River: grazie per i complimenti ^_^
RispondiEliminaComunque appena ho un po' di tempo, rivedo lo script sul mio blog di prova e ti faccio sapere.
Il lyteframe con Flickr non funziona. Prova ad usare un'altro sito come esempio. ciao :)
RispondiElimina@Art: grazie per la segnalazione. Ho appena modificato il post sostituendo il link di Flickr con uno funzionante.
RispondiEliminaCiao Iole,
RispondiEliminacomplimenti 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!!!!
@Anonimo: se mi lasci l'indirizzo del tuo sito passo a controllare cosa non va.
RispondiEliminaCiao me lo puoi fare con immagini romantici di baci, abbracci eccetera.
RispondiElimina