Nwlapcug.com


Come fare foto transizione in Dreamweaver CS5



Transizioni di immagini attraverso un Javascript finestra sovrapposta basate su query sono un elemento di progettazione sito Web comune, per esponendo fotografie e la transizione tra le immagini come una presentazione. Questo tipo di transizione viene solitamente chiamato "lightbox". High-end editor HTML di Adobe Dreamweaver CS5 consente di collegare librerie esistenti di fotografie per pre-scritte librerie Javascript per ottenere questo effetto, senza dover scrivere alcun codice Javascript sul proprio.

Istruzioni

1

Scaricare il file precompilati lightbox 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 userete – uno con una miniatura, uno 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 tue immagini e le miniature delle immagini nella cartella "foto"; Assicurarsi che le miniature anteporre il nome dell'immagine con "thumb_." Ad esempio, "Car. jpg" avrebbe una miniatura della "thumb_car.jpg." Assicurarsi che ogni immagine ha la 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 "Link immagini" per collegare le miniature delle immagini nella tua pagina Web nelle posizioni che si desidera loro di essere.

4

Fare clic su ogni miniatura a sua volta e osservare l'area di proprietà di elemento dell'applicazione Dreamweaver; trovare un'opzione per creare un link in giro quella miniatura. Accanto a tale testo casella è un'icona per "punto di file". Fare clic su questo e trascinare la freccia che indicano i risultati per l'immagine ingrandita la miniatura. Ripetere questa operazione fino a quando hai collegato ogni miniatura per ogni immagine.

5

Fare clic sulla finestra di codice del file HTML e scorrere fino all'intestazione. All'interno della testa < > e < / head > Tag, digitare un tag che assomiglia a questo:

< script type = "text/javascript" src = "

Dreamweaver tirerà un piccolo menu dove è possibile selezionare la cartella js utilizza il tuo lightbox, e dovrai selezionare il file "jQuery. js". Il codice finale avrà un aspetto simile a questo – ma può variare a seconda di dove hai inserito la cartella lightbox:

< script type = "text/javascript" src="js/jquery.js" >< / script >

6

Aggiungere un secondo tag di script, come questo:

< script type = "text/javascript" src="js/jquery.lightbox-0.5... js">< / script >

Il primo tag di script che hai aggiunto tira sullo strumento "jquery", e questo uno tira sul codice javascript specifico lightbox. Il nome del codice può variare a seconda il lightbox che stai usando.

7

Impostare la funzione di "gancio" per il tuo lightbox 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 < a href > tag che circonda un tag < img >. Ogni tag, inserire il seguente testo:

classe = "lightbox"

appena prima della parentesi di chiusura della < a href > tag. Ad esempio, potrebbe essere qualcosa come questo:

< un href="photos/car.jpg" class = "lightbox" >

9

Collegare il file css che è venuto con il tuo lightbox alla testa del documento HTML; è possibile farlo con la funzione di "Allegare foglio di stile" di Dreamweaver nel pannello file. Cercare il file jQuery.css e collegarlo a.

Consigli & Avvertenze

  • Si può anche mettere un attributo title in ciascuna < a href > attributo, come questo: < un href="car.jpg" classe = "lightbox" title = "Camaro" >, ma non è necessario per la transizione delle immagini.