March 28
Immagine transizioni attraverso una finestra di sovrapposizione di query-driven JavaScript sono un sito web elemento comune di design, per mostrare le fotografie e la transizione tra le immagini come una presentazione. Questo tipo di transizione viene generalmente chiamato "lightbox". high-end editor HTML di Adobe, Dreamweaver CS5 consente di collegare librerie esistenti di fotografie di pre-scritto librerie Javascript per ottenere questo effetto, senza dover scrivere alcun codice JavaScript sul proprio.
1 Scaricare il file ID prebuilt di vostra scelta, e decomprimere il file. Troverete una serie di quattro cartelle e un file index.html. Le cartelle sono "CSS", che ha i file di fogli di stile CSS, "foto", che contiene due copie di ciascuna delle foto che si utilizza - uno con una miniatura, un a piena risoluzione, "immagini", che contiene le icone utilizzate per i pulsanti e controlli, e "js", che contiene i file Javascript che userete.
2 Copiare le proprie immagini e le immagini in miniatura nella cartella "foto"; fare in modo che le miniature antepongono il nome dell'immagine con "thumb_." Ad esempio, "car.jpg" avrebbe una miniatura del "thumb_car.jpg." Assicurarsi che ogni immagine ha una sua miniatura corrispondente.
3 Copiare la cartella lightbox nella directory di lavoro per la copia locale del tuo sito web, e aprire la pagina web in Dreamweaver. Utilizzare lo strumento "collegamento Immagini" per collegare le immagini in miniatura nella tua pagina web nelle posizioni che si desidera loro di essere in.
4 Fare clic su ciascuna immagine in miniatura a sua volta e guardare la proprietà degli elementi zona dell'applicazione Dreamweaver; trovare una opzione per creare un collegamento intorno a quello delle miniature. Accanto a quella casella di testo è un'icona per "punto su file." Clicca su questo e trascinare la freccia che risulta l'immagine più grande la miniatura punterà. Ripetere questa operazione fino a quando si sono collegati ogni miniatura per ogni immagine.
5 Fare clic sulla finestra del codice del file HTML, e scorrere verso l'alto per l'intestazione. All'interno della <head> e </ head> tag, digitare un tag che assomiglia a questo:
<Script type = "text / javascript" src = "
Dreamweaver tirerà su un piccolo menu dove è possibile selezionare i js cartella usi lightbox, e ti selezionare il file "jquery.js." Il codice finale sarà simile a questa -, ma può variare a seconda di dove hai inserito la cartella ID:
<Script type = "text / javascript" src = "js / jquery.js"> </ script>
6 Aggiungere un secondo tag script, in questo modo:
<Script type = "text / javascript" src = "js / jquery.lightbox-0.5..js"> </ script>
Il primo tag script si è aggiunto tira lo strumento "jquery", e questo solleva il lightbox specifico codice javascript. Il nome del codice può variare a seconda del lightbox che si sta utilizzando.
7 Impostare la funzione di "gancio" per il vostro ID dal codice sorgente fornito, all'interno di una funzione JavaScript che assomiglia a questo:
<Script type = "text / javascript">
$ (Function () {
$ ( 'A.lightbox') Lightbox ().;
});
</ Script>
8 Scorrere verso il basso e trovare ogni tag href> <a che circonda un tag <img>. Inserire il testo seguente in ogni tag:
class = "ID"
appena prima della parentesi del tag <a href> chiusura. Ad esempio, potrebbe essere simile a questo:
<a href="photos/car.jpg" class="lightbox">
9 Collegare il file CSS fornito con il lightbox per la testa del vostro documento HTML; si può fare questo con la funzione di Dreamweaver "Allega foglio di stile" nel pannello File. Cercare il file jQuery.css, e collegarlo a.