Hozzon létre egy egyszerű fotóalbum

Annak érdekében, hogy tegye a honlapján fényképeket, akkor mehet három módon.

1. Keresse meg az interneten fotóalbum kész, töltse le és telepítse a webhelyen. Ezzel a módszerrel már nem lehet figyelembe venni.

2. Egyszerűen helyezze képek és feliratok a html-oldalát, használja beilleszti a képet címkék a szövegben, amely Alla vezették, 20. lecke

3. De mondjuk nem akarja a képet csak beragadt a szövegben. Akarsz, például, hogy az oldal bélyegképek ha rákattint egy külön oldalon kell nyitni a teljes körű képet. Vagy azt akarja, hogy fordult a diavetítés amikor a képek cserélni, ha rákattint a „Tovább” gombra, anélkül, hogy változtatni az egész oldalt. Fogok beszélni három egyszerű létrehozásának lehetőségeit ilyen album.

Helyezzük az áttekintő oldalra, ha rákattintunk, egy külön ablakban megnyílik egy teljes körű képet.

1) Készítsünk a html oldal, gondolja át a design. Elviszem példaként a legegyszerűbb design az oldalon, hogy a honlapomon:

Ez - html-kódot oldalamon egy fotóalbumot. Úgy néz ki, mint ez: Egy üres oldal az album csinálsz egy ilyen oldalt, mire van szüksége.

Helyett a három pontot, amelyek a kód táblázat (70%, Border 0) jelzett a piros, akkor helyezze a képeket.

2) Most kell, hogy vegye fel a képeket, hogy feltölteni a honlapunkon. Lehetnek bármilyen méretű, amit akar. De kívánatos azonban, hogy a már kész őket, megtakarítás weboldal. hogy ne terheljék túl sokat. A hagyomány szerint (valamilyen oknál fogva, gyakran példaként kép állataik), én viszem nyolc fotók a macska. Töltsük be a kép a mappában azt szeretné, hogy a tárhely, és előírja az egyes fényképek kódot, mint ez:

Tartsuk szem előtt, hogy ez a módszer a telepítés egy oldalon kis képek, lehet, hogy torz, mert nem csökkentette őket arányosan, hanem egyszerűen beállítja a mérete, mint egy miniatűr, amely fel a böngésző is. Ha azt szeretné, hogy a képek és a miniatúrák nézett arányosan, akkor sem kell számítani, milyen méretű kell adnia az egyes képeken, úgy, hogy arányosan csökken, vagy hogy mindegyik kép megfelelő miniatűr, például a Photoshop vagy a Paint programot. Ie hogy egy külön képet - egy kis másolata amely növeli - és feltölt egy mappát képek nem csak fotók, hanem egy miniatűr rá.

Például, csináltam egy miniatűr az első kép, és elnevezte „Kosha1_min.jpg” (Van ez nem 100 50 100 77 px). Aztán a kód a következőképpen néz ki:

A fényképek mérete eltávolítani a címkét úgy, hogy ne torzuljon a képemet.

Tehát az én album Minden miniatűrök csökken 100 50 px, kivéve az elsőt, az általam már tett egy külön miniatűr 100 77 px és betöltve egy külön mappába. Most tettem mind a nyolc kép a tabletta oldal kódot a megfelelő helyre (ha emlékszel, amikor feltettem a három pontot).

Az egész album kódot az oldalon fog kinézni:

A fényképek kódok I kékkel jelölt. Most betölteni az egész oldalt tárhely és kapj itt egy fotóalbumot: Fotóalbum

Ha rákattint egy áttekintő képet minden alkalommal meg kell venni, hogy egy oldal teljes körű képet.

Mint látható, van tettem csak három képet, amelyek követik egymást. Tudod, hogy annyi képet, amennyit csak kell.

A második rész a forgatókönyvet, amelyet bele kell illeszteni olyan hely az oldalon, a

Minden html-kódot az oldal így fog kinézni (piros Igazából hozzájárult kódot eredményező fent):

funkció diavetítés ()
num = NUM ​​+ 1
ha (num == 4)

document.photos.src = Eval ( "img" + num + "src")
>

Nézze meg, mi történt itt: Fotóalbum

Hátránya ennek a módszernek: haladunk tovább a képeket csak előre egy kört. Ahhoz, hogy visszatérjen az eredeti kép - meg kell frissíteni az oldalt a böngészőben.

Ez a része a script, meg kell tenni között

numimg = 0
imgslide = new Array ()
imgslide [0] = new Image ()
imgslide [1] = new Image ()
imgslide [2] = new Image ()
imgslide [3] = new Image ()
imgslide [4] = new Image ()
imgslide [5] = new Image ()
imgslide [6] = new Image ()
imgslide [7] = new Image ()
imgslide [8] = new Image ()

A következő rész a forgatókönyvet és a forma „előre” és „Vissza” fogjuk fel a szervezetben az oldal között

Ez a részünk tartalmaz egy linket a diavetítés az első képet, és a formában, hogy a böngésző fogja alakítani a gomb „Vissza” és „Előre”. Most lássuk, hogyan fog kinézni az összes oldalt html-kód (album scriptek pirossal kiemelve):