Crearea unui album foto simplu

Pentru a posta pe site-ul său fotografii, puteți merge trei moduri.

1. Găsiți în albumul foto pe Internet gata, descărcați-l și instalați-l pe site. În acest fel nu vor fi luate în considerare.

2. Pur și simplu loc legende și fotografii de pe HTML-pagină, utilizați pentru a introduce tag-uri de imagine în text, pe care l-au condus Alla în Lecția 20

3. Dar să presupunem că nu doriți ca imaginea blocat doar în text. Vrei, de exemplu, că pe pagina de miniaturi au fost atunci când a făcut clic pe o pagină separată se deschide o imagine pe scară largă. Sau vrei să fi transformat o expunere de diapozitive atunci când imaginile sunt înlocuite atunci când faceți clic pe butonul „Next“, fără a fi nevoie să se schimbe întreaga pagină. Voi vorbi despre trei opțiuni simple, pentru stabilirea unor astfel de albume.

Se pune pe pagina de pictograme, când faceți clic, într-o fereastră separată se va deschide o imagine pe scară largă.

1) Se prepară pagina HTML, cred că peste design. Voi lua ca exemplu cel mai simplu design al paginii, care este pe site-ul meu:

Acesta - cod html pagina mea pentru un album foto. Se pare că acest lucru: O pagină goală pentru albumul pe care faci o astfel de pagină, de ce ai nevoie.

În locul celor trei puncte care sunt în tabelul de cod (70%, de frontieră 0) indicat în roșu mea, vom insera imagini.

2) Acum, avem nevoie pentru a ridica imaginile pe care le încărcați pe site-ul nostru. Ele pot fi orice dimensiune, ceea ce vrei. Dar este de dorit, totuși, că le-ați pregătit, de economisire pentru web-pagini. că acestea nu cântăresc prea mult. Conform tradiției (pentru un motiv oarecare, foarte des folosit ca exemplu fotografiile de animalele lor), voi lua opt fotografii cu pisica ta. Încărcați imaginile din folderul pe care doriți să ne găzduirii și prescrie pentru codul fiecare fotografie e ca acest lucru:

Rețineți că această metodă de instalare pe o pagină de imagini în miniatură, acestea pot fi distorsionate, pentru că nu le-a reduce în mod proporțional, ci pur și simplu setează dimensiunea unei miniatură, care va pune browser-ul în sine. Dacă doriți ca imaginile și miniaturile privit în mod proporțional, trebuie fie să calculeze ce dimensiune trebuie să introduceți în fiecare imagine, astfel încât aceasta a scăzut proporțional, sau pentru a face la fiecare miniatură imagine corespunzătoare, cum ar fi programul Paint Photoshop sau. Ie face o imagine separată - o copie mică a celui care va crește - și încărcați un dosar cu imagini nu numai fotografii, dar, de asemenea, o miniatură la ea.

De exemplu, am făcut o miniatură a primei imagini și a numit-o „Kosha1_min.jpg“ (am nu 100 de 50 și 100 este de 77 px). Apoi, codul meu ar arata astfel:

Dimensiunea imaginii a elimin tag-ul, astfel încât nu este distorsionat imaginea mea.

Deci, în albumele mele Toate imaginile vor fi reduse la 100 de 50 px, cu excepția primei, la care am făcut o miniatură separată de 100 de 77 px și încărcate într-un dosar separat. Acum am pus toate cele opt imagini în codul paginii comprimat în locul corespunzător (dacă vă amintiți, în cazul în care am pus trei puncte).

Întregul cod album cu pagina va arata astfel:

Codurile fotografie I marcate cu albastru. Acum am încărca toată pagina de găzduire și adu-mi aici este un album foto: Album foto

Când faceți clic pe o imagine în miniatură de fiecare dată când va fi dus la o pagină cu o imagine pe scară largă.

După cum puteți vedea, nu am pus doar trei imagini, care va urma unul pe altul. Puteți pune cât mai multe imagini ca va fi nevoie.

A doua parte a script-ul, care trebuie să fie introdus în orice loc al paginii, între

Toate cod html al paginii va arata (rosu am contribuit de fapt, cod care a rezultat de mai sus):

Funcția slideshow ()
num = num + 1
if (num == 4)

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

Vezi ce sa întâmplat aici: Album foto

Dezavantajele acestei metode: trecem la imaginile noastre doar înainte într-un cerc. Pentru a reveni la imaginea originală - este necesar pentru a actualiza pagina în browser.

Această parte a script-ul, aveți nevoie pentru a pune între

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 ()

Următoarea parte a scenariului și forma pentru „Forward“ și „Back“ vom pune în corpul paginii, între

Această parte din noi conține un link la o expunere de diapozitive prima imagine și forma în care browser-ul va converti la un buton „Back“ si „Forward“. Acum, să vedem cum va arăta toate paginile HTML-cod (scripturi album sunt evidențiate cu roșu):