utilizzo lightbox per principiante

[Straystudios]

Originariamente inviato da pasticcina
PS: il link che hai messo in rosso apre una pagina insignificante, sei sicuro sia giusto?

È una pagina divisa in due parti: di sopra, è un' area di scrittura e ci metti il codice; di sotto, ti appare il risultato come sul Browser.

Copia il codice del mio ultimo esempio e incollalo nella parte sopra.
Funziona meglio con Netscape/Firefox che non con IExplorer, direi.


Il Lightbox 2 che riporti è quello giusto e che già sommariamente conosco; la fonte è da un dominio autentico del "padre" sviluppatore Lokesh Dhakar.
Notizie di incompatibilità con IExplorer ne avevo già incontrate in giro, anche per la versione IExplorer 8 Beta.
Domani faccio un nuovo test.

Tu potresti provare a farglia prire un' immagine più piccola; nel caso il problema fosse nell' adattamento al monitor (prima ipotesi da quel che ho visto).

[pasticcina]

evviva ci sono riuscita!


Ma con lightbox.

Il tuo codice Straystudios, mi dà una pagina tutta rossa e una piccola immagine in alto che non è cliccabile, forse ho capito male cmq grazie

[Straystudios]

Ho verificato la tua pagina, in locale e su server, con Lightbox2 aggiunto.
Visualizzata con Windows XP e Vista; vari browser (IExplorer7, Netscape N9, Mozilla 2, Safari).
Ed anch' io non riscontro particolari problemi.
Ecco il test:

http://straystudio.uuuq.com/programm.../page01lb.html

Mi rincresce non esserti stato d' aiuto più di tanto, ma solo ieri notte ho potuto sapere che versione di Lightbox adoperavi (ce ne sono una dozzina in giro per il web).
Mea culpa, avrei dovuto chiederlo prima ma pensavo tu avessi abbandonato il thread dopo due giorni, e mi sono buttato in quelle spiegazioni ...

[pasticcina]

Originariamente inviato da Straystudios
Ho verificato la tua pagina, in locale e su server, con Lightbox2 aggiunto.
Visualizzata con Windows XP e Vista; vari browser (IExplorer7, Netscape N9, Mozilla 2, Safari).
Ed anch' io non riscontro particolari problemi.
Ecco il test:

http://straystudio.uuuq.com/programm.../page01lb.html

Mi rincresce non esserti stato d' aiuto più di tanto, ma solo ieri notte ho potuto sapere che versione di Lightbox adoperavi (ce ne sono una dozzina in giro per il web).
Mea culpa, avrei dovuto chiederlo prima ma pensavo tu avessi abbandonato il thread dopo due giorni, e mi sono buttato in quelle spiegazioni ...

Grazie mille. Dato che sei così gentile, potresti ricontrollare? Ho appena caricato il tutto e non ti dico come sto sulle spine pensando che non funzioni qualcosa.

Cmq l'errore mio stava nello sbagliare cartelle.

ciao

[Straystudios]

Ottimo !
Ho dato una prima occhiata con Netscape e IExplorer; il tutto funziona anche qua, tranquilla.
Ottima idea aver dato il colore rosso-cupo anche all' offuscamento.

NOTIZIE AI NAVIGANTI.
Le operazioni da fare sulle singole pagine, in definitiva sono di aggiungere questo blocchetto nella HEAD (dopo il tag </title> e, se esistono, i tag <meta&#62:

<link rel="stylesheet" href="css/stile.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

e poi di andare a "spulciare" nel BODY dove sono codificate le thumbnails ed aggiungere l' Attributo rel="lightbox" nei Link:

<a href="immagini/grande_01.jpg" rel="lightbox" title="titolo didascalia"><img src="immagini/piccola_01.jpg" alt="testo alternativo" /></a>


La Lightbox presume quindi che la galleria sia progettata con il classico criterio: foto piccola che al click apre foto grande in stessa/altra finestra; via <A> link.
Si applica sovente a fotogallerie che esistono già.

Poi bisogna scaricare i file .js e .css relativi dal sito:
http://www.lokeshdhakar.com/projects...box2/#download
o da;
http://www.huddletogether.com/projec...box2/#download

Sono file in formato .zip e per decomprimerli possiamo usare ZipGenius, che è free:
http://www.zipgenius.it/eng/?page_id=10

Il fatto è che il programma ce li va a piazzare in una cartella di default, che di solito è il Desktop, se non gli diamo un diverso percorso.
Quindi poi andranno trasferiti/copiati nella stessa Directory dove è il file della fotogalleria.

[pasticcina]

proprio così, hai dato una spiegazione esauriente.

[Straystudios]

Originariamente inviato da pasticcina
proprio così, hai dato una spiegazione esauriente.

Ma te hai fatto prima a fare da sola; complimenti, e soddisfazione tua.

Al click su Download dal sito, appare la finestrella di dialogo e si lascia su "Apri con: ZipGenius 6"
ZipGenius fa tutto da solo, si apre e ci mostrerà una schermata di elenco file: click su "Extract" e si apre la dialog box di ZipGenius.
È a questo punto che si deve far caso al percorso.
Il Download di Lightbox2 produrrà questo:

[Straystudios]

Il Download di Lightbox2 scarica i propri file suddivisi in tre Nuove Cartelle css images js che provvede a creare.
238Kb in tutto; è un download "leggero".

Il rischio è di trovarcele sparpagliate per il Desktop o tra tutti i Documenti.
Facciamo caso alla Path che ZipGenius dialog box ci mostra in alto a sinistra, se troviamo qualcosa di questo genere:

C:\Users\Pasticcina\Desktop

aggiungiamo l' indicazione per una Cartella specifica, del tipo:

C:\Users\Pasticcina\Desktop\Lightbox2


UNA POSSIBILITA' DI CONFLITTO TRA FILE index.html
Il Download comprende anche un file HTML index.html che altro non è che una pagina di istruzioni/demo.
Si da' il caso che index.html potrebbe anche essere il nome della pagina-fotogalleria cui volete applicare Lightbox; e che quindi dovrà diventare il quinto elemento in questa Cartella.
Se invece la nostra pagina si chiama photogallery.html abbiamo:

css images js index.html photogallery.html

e questo non crea problemi, ma due file index.html non possono coesistere nella stessa Directory; apparirebbe allora la finestrella di Confirm che ci chiede se vogliamo sovrascriverlo.
E se la nostra pagina index.html fosse già presente in Cartella, la perdiamo se diamo conferma. Ci ritroveremmo la pagina di spiegazioni, al posto della gallery.

Il file index.html di istruzione/demo si può se necessario, cancellare o rinominare, o fare proprio a meno di scaricare; senza con ciò compromettere alcun funzionamento.