LightBox ws5_7

Predisposizione dell'ambiente di lavoro
Consiglio sempre di mantenere i file utilizzati all'interno di una cartella (per ogni sito creato), quindi:
1) creare la cartella generale (se non l'avete già), ad esempio C:\Incomedia Progetti
2) creare la sotto-cartella per il singolo progetto, ad esempio: C:\Incomedia Progetti\LightBox
3) create un'altra sotto-cartella per i file di LightBox, ad esempio: C:\Incomedia Progetti\LightBox\lb

Download di LighBox 2.04
Scaricare il file lightbox2.04.zip dal sito di Lightbox 2.04, ed estrarre il contenuto nella cartella appena creata (punto 3).
Dopo l'estrazione si otterranno 1 file index.html e 3 cartelle:
- css
- images
- js

creiamo un'ulteriore cartella di nome
- img
in questa cartella andremo a mettere le nostre immagini da usare con lightbox, sia quelle normali che le miniature (vedere punto 2).

ISTRUZIONI

NOTA: le indicazioni vanno bene sia per EVO7 che per EVO8.

1) MINIATURE
Prima di tutto mi sono creato le miniature, utilizzando l'oggetto SlideShow di EVO, che poi ho eliminato, e mi sono tenuto le immagini generate da EVO copiandole in un'apposita cartella (vedi punto 2)
Ovviamente ognuno può utilizzare altri programmi.


2) STRUTTURA
nel mio sito ho creato una sotto-cartella \lb in cui ho copiato la struttura dei file di LightBox esattamente come richiesto dall'autore:
- css
- images (***)
- js
più un'altra cartella
-img
in cui metto tutte le immagini che voglio gestire con LightBox (non da EVO), cioè
- le miniature (da visualizzare nella pagina)
- le immagini in dimensione originale

In questo modo, potrò usare LightBox in qualsiasi altro sito, semplicemente caricando la cartella senza fare più alcuna modifica, a parte ovviamente le immagini da usare!
La cartella \lb va caricata sul server con un programma FTP, non con EVO.
(***)Le immagini usate da lightbox contenute in questa cartella vanno comunque copiate nella cartella \images del sito.
Diversamente, non ho capito il perchè, alcune di queste lightbox non le vede.

3) CREARE LA PAGINA in EVO
1. Creare una nuova pagina (es. GALLERY)
2. Aprire le Proprietà della pagina, scheda Esperto e nella casella HEAD copiare il codice seguente:
Codice:
<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>

Come vedete, rispetto a quello dell'autore di LightBox ho anteposto la mia cartella lb/ al percorso

4) CODICE PER VISUALIZZARE LE MINIATURE
Ora inseriamo il codice nella pagina GALLERY:
- apriamo la pagina, inseriamo un oggetto TESTO ed attiviamo il pulsante
</> per l'inserimento di codice HTML.
Prima di tutto inseriamo la referenza al file css:
Codice:
<link rel="stylesheet" href="lb/css/lightbox.css" type="text/css" media="screen" />


Poi inseriamo il codice che mostrerà le miniature. Per ogni miniatura si dovrà indicare la codifica indicata sotto; notare che il nome delle miniature si differenzia da quello normale solo per la 'p' iniziale; ho suddiviso il codice su due righe per migliorare la leggibilità:

Codice:
<a href="lb/img/001_0_1.jpg" rel="lightbox[grp]">
<img src="lb/img/p001_0_1.png" width="107" height="107" border=0 alt="zoom" />


Dove in:
href= mettiamo l'indirizzo dell'immagine originale

rel= relazione lightbox, la parte [grp] serve ad indicare a lightbox che quella immagine fa parte di un gruppo, così tutte quelle con [grp] potranno essere visualizzate in sequenza.
Notare che il nome [grp] è arbitrario, potete mettere qualsiasi cosa: [fiori], [bandiere], ...

img src= mettiamo il percorso della miniatura corrispondente.

width= e height= indicano la dimensione della miniatura, che in genere è uguale per tutte le miniature.

border= indica la dimensione del bordo (0=nessuno)

alt= la didascalia mostrata quando ci si posiziona sulla miniatura con il mouse


5) MODIFICA DI LIGHTBOX.CSS
1. Aprire coon il Notepad il file lightbox.css presente nella cartella \lb\css
2. modificare lo z-index: attenzione! Esistono diverse impostazioni z-index che servono a posizionare oggetti diversi su livelli diversi, quindi dovete rispettare il posizionamento dei livelli altrimenti alcuni elementi di LightBox potrebbero non essere visualizzati correttamente.
Per aiutarvi vi indico le 3 righe con i 3 valori impostati da me:
RIGA 1: z-index: 2000
RIGA 9: z-index: 1010
RIGA 27: z-index: 1090

N.B. Nella numerazione ho considerato anche le righe vuote!


6) ANTEPRIMA IN LOCALE
Sappiamo tutti che EVO usa delle cartelle temporanee per l'anteprima:
- Evo7: Documenti\Incomedia WebSite X5
- Evo8: <temp>\WebSiteX5\iwp01
dove <temp> è la vostra cartella temporanea di sistema (se non ricordo male è C:\Documents and Settings\<UTENTE_CORRENTE>\Impostazioni locali\Temp\iwp01).
Naturalmente la cartella iwp01 può variare, a seconda di quanti progetti avete aperto, quindi potrebbe essere iwp02, iwp03, ...

In ogni caso, l'indirizzo che fa testo lo vedete nella barra indirizzi dell'anteprima di Evo.

Ora, dato che Evo non ha la minima idea che noi ci serviamo della cartella \lb che contiene tutti i nostri file da usare con lightbox, copieremo l'intera cartella \lb nella cartella temporanea di Evo in base alla versione usata.

Dopo aver fatto ciò, potremo vedere l'anteprima anche della nostra GALLERY creata.