Come eseguire la transizione delle immagini in Dreamweaver CS5

Passaggio 1

Scarica il file lightbox predefinito a tua scelta e decomprimilo. Troverete una serie di quattro cartelle e un file index.html. Le cartelle sono "css", che ha file con fogli di stile a cascata, "foto", che contiene due copie di ciascuna delle foto che userete, una con una miniatura, l'altra con la piena risoluzione, "immagini", Contiene le icone utilizzate per i pulsanti e i controlli e "JS", che contiene i file Javascript che userete.

Passaggio 2

Copia le tue immagini e le miniature nella cartella "foto", assicurati di inserire nelle anteprime il nome dell'immagine con "thumb_". Ad esempio, "car.jpg" avrebbe una miniatura di "thumb_car.jpg". Assicurati che ogni immagine abbia la sua miniatura corrispondente.

Passaggio 3

Copia la lightbox nella directory di lavoro per creare la copia locale del tuo sito web e apri la tua pagina web in Dreamweaver. Usa l'opzione dello strumento "link images" per collegare le miniature della tua pagina web ai luoghi in cui vuoi che siano.

Passaggio 4

Fare clic su ciascuna immagine di anteprima e esaminare l'area delle proprietà dell'elemento dell'applicazione Dreamweaver; è disponibile un'opzione per creare un collegamento attorno a tale miniatura. Accanto a quella casella di testo c'è un'icona "direct to file". Fare clic qui e trascinare la freccia che ingrandisce l'immagine nell'immagine di quella miniatura. Ripeti questa procedura finché non avrai collegato la miniatura di ogni immagine.

Passaggio 5

Fare clic sulla finestra del codice del file HTML e scorrere fino all'intestazione. Dentro la testa e scrivi un'etichetta simile a questa:

Passaggio 6

Aggiungi un secondo tag script, come questo:

Il tag script che aggiungi mostra la barra degli strumenti "jQuery" e arresta il codice javascript specifico. Il nome del codice può variare in base alla light box che stai utilizzando.

Passaggio 7

Imposta la funzione "hook" nella tua lightbox dal codice sorgente specificato, all'interno di una funzione Javascript simile a questa:

Passaggio 8

Scorri verso il basso e trova ogni etichetta che circonda un'etichetta . Inserisci il seguente testo in ogni tag:

class = "lightbox"

poco prima della chiusura di chiusura del tag. Ad esempio, potrebbe essere così:

Passaggio 9

Collega il file CSS che accompagna il lightbox all'intestazione del tuo documento HTML, puoi farlo con la funzione "Allega foglio di stile" di Dreamweaver nel pannello File. Trova il file jQuery.css e collegalo.