Hvordan lage bilder Overgang i Dreamweaver CS5

March 9

Image overganger gjennom en Javascript-spørring drevet overlegg vindu er et felles nettsted design element, for utstillingsvindu fotografier og overgangen mellom bilder som en lysbildefremvisning. Denne type overgang er vanligvis kalles en "lightbox". Adobes high-end HTML editor lar Dreamweaver CS5 du koble eksisterende biblioteker med bilder for å forhåndsskrevne Javascript-biblioteker for å oppnå denne effekten, uten å måtte skrive noen Javascript-kode på egen hånd.

Bruksanvisning

1 Last ned forhåndsbygde lysbilde filen du ønsker, og pakk ut filen. Du vil finne et sett med fire mapper og en index.html fil. Mappene er "css", som har gjennomgripende stilark filer, "bilder", som inneholder to kopier av hvert av bildene du skal bruke - en med et miniatyrbilde, en i full oppløsning, "bilder", som inneholder ikonene som brukes for knapper og kontroller, og "js", som inneholder java~~POS=TRUNC-filene du skal bruke.

2 Kopier dine egne bilder og miniatyrbilder inn i "bilder" -mappen; sørge for at miniatyrene foranstille bildenavnet med "thumb_." For eksempel "car.jpg" ville ha en miniatyr av "thumb_car.jpg." Sørg for at hvert bilde har sin tilsvarende miniatyr.

3 Kopier lysbilde mappen inn i arbeidsmappen for din lokale kopi av nettstedet ditt, og åpne nettsiden i Dreamweaver. Bruk "Link Images" verktøy for å knytte miniatyrbildene inn på din side på stedene du vil at de skal være i.

4 Klikk på hvert miniatyrbilde i sin tur og se på elementets egenskaper område av Dreamweaver program; finne et alternativ for å lage en link rundt som thumbnail. Ved siden av at tekstboksen er et ikon for "punkt til fil." Klikk på det og dra pilen som fører til større bilde miniatyr vil peke på. Gjenta dette til du har koblet hver miniatyr til hvert bilde.

5 Klikk på koden vinduet i HTML-filen, og blar opp til spissen. Inne i <head> og </ head> tags, skriver i en kode som ser slik ut:

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

Dreamweaver vil trekke opp en liten meny der du kan velge js mappen lysboksannonser bruker, og du vil velge filen "jquery.js." Den endelige koden vil se omtrent slik ut - men det kan variere avhengig av hvor du har plassert lightbox mappe:

6 Legg en andre skriptmerket, som dette:

Den første manuset koden du har lagt trekker opp "jQuery" -verktøyet, og dette trekker opp den spesifikke lysbord javascript-kode. Navnet på koden kan variere avhengig av lysbilde du bruker.

7 Sett opp "krok" funksjon for lysbilde fra kildekoden gitt, inne i en Javascript-funksjon som ser slik ut:

<Script type = "text / javascript">
$ (Funksjon () {
$ ( 'A.lightbox') lysbord (.);
});
</ Script>

8 Scroll ned og finne hverandre <a href> tag som omgir en <img> -taggen. Sett inn følgende tekst i hver kode:

class = "lightbox"

like før den avsluttende brakett av <a href> tag. For eksempel kan det se omtrent slik ut:

9 Link css-filen som fulgte med lightbox til hodet av HTML-dokumentet; du kan gjøre dette med Dreamweaver er "Fest stil" -funksjonen i Filer panel. Se etter jQuery.css filen, og koble den i.

Hint

Du kan også sette en tittel attributt i hvert <a href> attributt, som dette: <a href="car.jpg" class="lightbox" title="Camaro">, men det er ikke nødvendig for bildet overgangen.