Bibliotecile JavaScript, cum ar fi MooTools, pot economisi o mulțime de timp atunci când dezvoltă un site. În acest tutorial, vă voi arăta cum să combinați multe din funcțiile lui MooTools pentru a crea o galerie foto frumoasă.

Pasul 1 - Configurați HTML, CSS și MooTools

Înainte de a începe, aruncați o privire la demo. Va fi mai ușor să înțelegeți scopul fiecărui pas dacă știți obiectivul.

Mai întâi, creați un fișier HTML simplu și adăugați o legătură la foaia de stil (main.css) și la două fișiere JavaScript (mootools.js și main.js). Creați aceste fișiere în același director. Apoi mergeți la MooTools Core Builder. Selectați toate componentele, apoi faceți clic pe Descărcare. Acest lucru va descărca mootools-1.2-core.js. Copiați conținutul acelui fișier în fișierul mootools.js. Apoi ați ajuns la MooTools More Builder și selectați toate componentele și faceți clic pe Descărcare. Copiați conținutul din nou și lipiți-le în partea de jos a fișierului mootools.js.

(Notă: majoritatea site-urilor, inclusiv galeria foto, nu au nevoie de toate componentele. Cu toate acestea, folosirea tuturor la început și apoi tăierea celor pe care nu aveți nevoie să faceți o dezvoltare mult mai ușoară. la mijlocul unui proiect și ați realizat că doriți o altă caracteristică inclusă într-una din componentele pe care nu le-ați descărcat, va trebui să o descărcați din nou înainte de a continua. În acest fel, trebuie să o descărcați din nou numai după ce ați terminat.)

Pasul 2 - Creați aspectul

Acum trebuie să creăm aspectul pentru galeria foto folosind HTML și CSS. Adăugați următorul cod în etichetele corpului fișierului dvs. HTML.

 
Galerie foto
 
 
      
 
 
 
Derulați în sus
 
Deruleaza in jos
 
 
 
Stânga
 
Dreapta
 
 

Acest lucru creează un container pentru a înconjura tot codul din site, un titlu, o secțiune pentru imagini și comenzi pentru site. De ce toate etichetele goale img? În CSS de mai jos, le oferim dimensiuni și o culoare de fundal diferită, astfel încât să putem testa galeria fără a fi nevoie să adăugăm și să redimensionăm imaginile reale. Acum adăugăm CSS în fișierul principal.css.

* marja: 0; padding: 0; schiță: nici una;  .hide display: none;  corp background: # 000; Culoare: #fff; padding: 30px; font-familie: Arial, Helvetica, sans-serif;  #container width: 596px; height: 400px; fundal: # 111; overflow: ascuns; frontieră: 1px solid # 333;  h1 background: # 222; lățime: 592px; înălțime: 29px; padding-left: 7px; frontieră-fund: 1px solid # 333; font-size: 18px; line-height: 29px; font-weight: normal;  #picture_section padding: 7px 0 7px 7px; lățime: 590px; height: 332px; overflow: ascuns;  #inside width: 590px; height: 332px;  #picture_section img margine: 0; înălțime: 57px; lățime: 111px; plutește la stânga; fundal: # 333; margin-bottom: 7px; marja de-dreapta: 7px; cursor: pointer;  #controls_vert background: # 222; lățime: 600px; înălțime: 23px; frontieră: 1px solid # 333;  #controls_horz background: # 222; lățime: 600px; înălțime: 23px; frontieră: 1px solid # 333;  #up height: 10px; lățime: 10px; marja de-dreapta: 7px; fundal: url (up.jpg) no-repeat; text-liniuță: -9999px; plutește la stânga; margin: 7px; margin-bottom: 6px; cursor: pointer;  #down height: 10px; lățime: 10px; fundal: url (down.jpg) no-repeat; text-liniuță: -9999px; plutește la stânga; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: pointer;  #left height: 10px; lățime: 10px; fundal: url (left.jpg) no-repeat; text-liniuță: -9999px; plutește la stânga; margin: 7px; margin-bottom: 6px; cursor: pointer;  #right height: 10px; lățime: 10px; fundal: url (right.jpg) no-repeat; text-liniuță: -9999px; plutește la stânga; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: pointer;  div # up.deactivat opacitate: 0,2; Filtru: alpha (opacitatea = 20); cursor: implicit;  div # jos.deactivat opacitate: 0,2; Filtru: alpha (opacitatea = 20); cursor: implicit;  div # dreapta.deactivat opacitate: 0,2; Filtru: alpha (opacitatea = 20); cursor: implicit;  div # left.deactivated opacitate: 0,2; Filtru: alpha (opacitatea = 20); cursor: implicit; 

Iată cum arată acest lucru.

Deoarece galeria începe din partea de sus, săgeata în sus este dezactivată automat. De asemenea, săgețile stânga și dreapta sunt ascunse automat, deoarece acestea vor fi afișate numai când imaginea mare este arsă. De asemenea, sunt afișate numai vârfurile imaginilor din rândul al șaselea, pentru a permite utilizatorului să afle că mai sunt mai multe.

Acum, să adăugăm suprapunerea care va afișa imaginile mari. Mai întâi, adăugați următorul cod chiar înainte de eticheta organismului de închidere din fișierul HTML.

 
Faceți clic pe imagine pentru a reveni la galerie.
 
A

Adăugați următoarele la sfârșitul fișierului dvs. CSS pentru a face divs să apară ca o suprapunere peste miniaturi.

#display_picture_container position: absolute; top: 0; stânga: 0; lățime: 700 de pixeli; height: 400px; padding-top: 16px;  #display_picture position: absolute; top: 61px; stânga: 31px; lățime: 596px; height: 330px; fundal: # 000; opacitate: 0,8; Filtru: alpha (opacitate = 80); text-align: center; font-size: 11px; padding-top: 16px;  #display_picture_img position: absolute; top: 108px; stânga: 65px; height: 272px; lățime: 530px; cursor: pointer; 

Acest lucru creează acest efect:

Imaginea mare va apărea acolo unde este (acum invizibil) display_picture_img div (sub clic pe imagine pentru a reveni la textul galeriei).

Pasul 3 - Colectați și redimensionați fotografiile

Acesta este momentul potrivit pentru a colecta toate imaginile și pentru a le redimensiona. Mai întâi, creați un dosar "imagini" și un dosar "thumbs". Adăugați toate fotografiile în dosarul de imagini și denumiți-le 1.jpg, 2.jpg, 3.jpg, etc. Redimensionați-le pe toate la dimensiunea display_picture_img div: 530 pixeli lățime și 272 pixeli înălțime. Apoi copiați aceste fișiere în directorul thumbs și redimensionați aceste copii la lățimea de 111 pixeli cu 57 pixeli înălțime. Nu contează cât de multe poze aveți. Cu toate acestea, aș recomanda utilizarea peste 26 pentru acest tutorial, astfel încât să puteți utiliza derulare verticală.

Pasul 4 - Adăugați funcționalitate cu MooTools

Primul lucru pe care trebuie să-l eliminați este să eliminați toate tag-uri în fișierul HTML. Aceștia erau numai substituenți; vom adăuga mai târziu fișierele reale cu JavaScript. Acum vom face ca suprapunerea să dispară atunci când pagina se încarcă. Adăugați următorul cod în fișierul principal.js

var numărul_piclurilor = 32; funcția show_pictures () var while_pictures = 1; în timp ce (while_pictures <= number_of_pictures)  var new_image = new Element('img',  'src': 'thumbs/' + while_pictures + '.jpg', 'id': 'image_' + while_pictures, 'events':  'click': function() $('display_picture_img').innerHTML = ""('display_picture_container'), fade (1), $ ('big_picture'), fade (.999999); $ ('controls_vert'). .replace ('image _', ') == 1) $ (' stânga ') set (' class ',' dezactivat '); . $ ( 'Dreapta') șterge ( 'clasa');  altceva dacă (this.id.replace ('image _', ') == number_of_pictures) $ (' left ') șterge (' class '); '); altceva $ (' left ') set (' class ',' activat '); $ (' right '). ',' block '), $ (' left '), tween (' margin-left ',' 286px ');); imagini var preload_image = new Element ('img', 'src': 'images /' + while_pictures + '.jpg', 'class': 'hide'); preload_image.inject ($ ('container')); // NOTĂ: Nu am creat un alt atribut deoarece nu va fi văzut de oricine aici oricum. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ("ascunde"););

Iată cum arată:

Pentru a explica acest lucru, să începem în partea de jos. În MooTools, codul window.addEvent execută codul interior atunci când DOM este gata să facă elemente. Fade ('ascunde') $ ('display_picture_container'); ascunde display_picture_container div și tot conținutul său. Am folosit metoda fade ("ascunde") pentru că vom fi mai târziu. Nu creăm un afișaj: nici unul; declarație în fișierul nostru CSS sau JavaScript-l ascunde în acest fel; trebuie să fie ascuns de funcția pe care o vom folosi pentru ao arăta din nou mai târziu (estompa).

Acum pentru cea mai mare parte: funcția show_pictures. Mai întâi de toate, setăm variabila number_of_pictures. Acest lucru spune funcția de a adăuga miniaturi din folderul thumbs folosind fiecare număr întreg de la 1 la numărul dat. Pentru a adăuga mai multe imagini la această prezentare de diapozitive, tot ce trebuie să faceți este să le adăugați la foldere, să le redimensionați și să creșteți valoarea number_of_pictures. Am folosit 32.

Următoarea parte este funcționarea internă a show_pictures. Acest lucru, după cum sugerează și numele, arată toate imaginile. De asemenea, preloads imaginile mai mari în fundal. În interiorul funcției, while_pictures este definită ca 1. Aceasta este variabila pe care o vom folosi ca punct de pornire pentru afișarea tuturor imaginilor. Următoarea declarație în timp indică faptul că codul din interior va fi executat o singură dată pentru fiecare imagine, începând cu una și mergând până la numărul total de imagini (number_of_pictures). Observați că while_pictures ++; este la sfârșitul bucla în timp, pentru a avea o creștere de câte unul de fiecare dată când bucla repetă.

Apoi, vom crea o instanță Element pentru un element img. Putem adăuga src, id, clasă, eveniment și alte atribute. Cu toate acestea, avem nevoie doar de src, id și evenimente. Folosind 'src': 'thumbs /' + while_pictures + '.jpg', afirmăm că vrem ca src a imaginii să fie oricare ar fi numărul curent sau în interiorul folderului thumbs. ID-urile pentru toate miniaturile noastre vor fi image_1, image_2, etc.

Acum, dorim să apară o imagine mare după ce faceți clic pe o miniatură, pentru a crea un eveniment de clic. Prima linie sub aceasta face ca display_picture_img div constante imaginea mare cu un id de big_picture și o clasă a id-ului miniaturii (image_1, image_2, etc.). Rețineți că, în acest moment, display_picture_img div este ascuns.

Acum folosiți metoda .fade (1) pentru a decolora în div display_picture_container div și tot conținutul său. 1 reprezintă nivelul de opacitate (1 este 100%, 5 este 50%, etc.). Cu toate acestea, acest lucru cauzează o eroare în toate browserele, cu excepția celor mai noi browsere, cum ar fi Firefox 3 și Safari. Ele se estompează corect, dar ceilalți doar pop în imagine și se estompează zona întunecată din jurul lui. După multă experimentare, am aflat că dacă aveți o imagine mare (care are big_picture ca id-ul său) se estompează cu metoda proprie de decolorare, funcționează - dar numai dacă decolorul nu este setat la 1. Cu toate acestea, vrem imaginea să fie la 100% opacitate. Prin urmare, am pus-o la .999999, care nu are o transparență vizibilă.

Deci acum imaginea mare este pe ecran. Cu toate acestea, dorim ca și comenzile să se mute în centru și să devină săgeți stânga și dreapta, în loc săgețile în sus și în jos. Mai întâi, ascundem comenzile verticale (controls_vert). Putem folosi afișarea: niciuna; pentru asta, pentru că nu o să scădem înăuntru sau în afară. Apoi vom folosi o instrucțiune dacă, dacă altceva, și altceva, pentru a determina dacă imaginea pe care a fost făcută clic a fost prima sau ultima din galeria noastră. Dacă a fost prima, nu vrem să se poată merge în stânga, pentru că nu există unul anterior. Același lucru este necesar la dreapta. Mai târziu, când avem săgețile stânga și dreaptă care funcționează, o vom determina dacă are sau nu o clasă dezactivată. Aceasta va determina dacă evenimentul clic va funcționa pentru el. (De asemenea, verificați CSS, care stabilește imaginea săgeată la 20%, ceea ce economisește necesitatea de a avea 8 imagini direcționale în loc de 4)

Apoi, afișăm comenzile orizontale prin setarea stilului de afișare pentru blocare. Deci, ascunzând comenzile verticale și afișând comenzile orizontale, tocmai le-am oprit. Cu toate acestea, dorim ca centurile de control orizontale să fie centrate. Am realizat acest lucru creând un tween care animă o creștere în marginea stângă la 286px, care este centrul galeriei.

Acum, când am creat noua noastră imagine, trebuie să o punem în interiorul documentului. Metoda de injectare ne permite să inserăm noul element img făcut în interiorul div.

De asemenea, dorim să preîncărcați fiecare dintre ele, astfel încât nu va exista o întârziere atunci când oamenii fac clic pe imagini pentru a le distruge. Creați un element img nou pentru fiecare imagine care are dimensiune completă. Cu toate acestea, utilizează clasa de ascundere, care, în CSS, folosește display: none; pentru a ascunde conținutul. Apoi vom injecta imaginea preloader ascunsă în containerul div.

Iată cum arată după ce faceți clic pe o miniatură:

Acum trebuie să facem ca imaginea să dispară când faceți clic pe ea. Introduceți următorul cod după ce $ ('display_picture_container'). Fade ('ascunde'); declarație în main.js.

$ ('display_picture_img') addEvent ('click', functie () $ ('display_picture_container'). ('display', 'block'); $ ('control_vert'); $ ('control_horz'); setStyle stânga ') setStyle (' margine-stânga ',' 7px '); $ (' sus ').

Acest lucru adaugă un eveniment clic la div care conține imaginea mare. Atunci când se face clic pe acesta, recipientul se estompează la nimic și, din cauza bugului menționat mai sus, imaginea însăși este decolorată și la 0. Apoi am setat div ascuns pentru a avea aceeași margine mai mare stânga ca stânga div. Apoi vom comuta instantaneu comenzile orizontale înapoi la comenzile verticale și apoi, după ce am setat divul stânga ascunsă la marginea stângă inițială, animăm marginea stângă a săgeții sus înapoi la versiunea originală 7px utilizând o altă modificare. Acum puteți face clic pe miniaturi pentru a le arunca în aer și apoi faceți clic pe imaginea mare pentru ao ascunde din nou. Aproape gata!

Acum, luați următorul cod și lipiți-l deasupra codului pe care tocmai l-ați introdus.

var vertical_moves = 0; var rows = Math.ceil (număr de imagini / 5); dacă (rânduri> 5) $ ('up') addEvent ('click', function (event) if (! ("vertical_moves == 0") "$ (" vertical ")," $ " ('up') set ('class', 'dezactivat');); $ ('down') addEvent ('click', functie (eveniment) if (! ), $ (('înăuntru')) tween ('margin-top', '-' + (64 * vertical_moves) + 'px' .set ('class', 'dezactivat'););  altceva $ ('up') set ('class', 'deactivated'); $ ('jos') set ('clasă', 'dezactivat');  var actual_id = 1; $ (('left')) addEvent ('click', function () if (! $ ('left'). ('big_picture'). set ('src', 'pictures /' + current_id + '). jpg '); $ (' big_picture '); fade (1); $ (' big_picture ') set (' class ',' image_ '+ current_id) . () () () () () () () () .addEvent ('click', functie () if (! $ ('right') hasClass ('dezactivat')) current_id = $ ('big_picture' , '' ('big_picture'), set ('src', 'images /' + current_id + '.jpg'); $ ('big_picture' ') .fade (1); $ (' big_picture ') set (' class ',' image_ '+ current_id);  dacă (current_id == number_of_pictures) $ ('right') set ('class', 'deactivated'););

Primul lucru pe care îl vom face este setarea derulării verticale. În primul rând, vom crea o variabilă numită vertical_moves cu o valoare de 0. Aceasta ne va spune câte rânduri sa mutat în jos. Apoi aflăm câte rânduri de imagini avem, cu 5 imagini la rând. Funcția Math.ceil rotunjește orice număr care are o zecimală la un număr întreg. De exemplu, am 32 de imagini. 32 împărțit la 5 este de 6,4, ceea ce ar fi rotunjit la 6. Cu toate acestea, dorim încă să afișăm imaginile suplimentare; chiar dacă pe ultimul rând există doar două imagini, dorim ca acesta să fie considerat un rând întreg. Din moment ce Math.ceil rundă totul, cantitatea de rânduri devine 7.

În continuare, detectăm dacă există mai mult de cinci rânduri. Dacă nu există, dezactivați săgețile în sus și în jos. Cu cinci rânduri sau mai puțin, toate imaginile sunt afișate fără a fi nevoie de butoanele de defilare. Cu toate acestea, dacă există șase sau mai multe, vrem să le adăugăm evenimente. Pentru săgeata sus div, adăugăm un eveniment și apoi detectăm dacă acesta a fost etichetat ca dezactivat sau nu. Dacă este dezactivată, va apărea cu doar opacitate de 20%, iar când faceți clic pe ea, nu va face nimic. În plus, nu va mai avea un cursor ca cursor. Cu toate acestea, dacă nu are clasa respectivă, aceasta continuă. Dacă mergeți în sus, scade cantitatea de rânduri pe care ați parcurs-o, astfel că vertical_moves scade cu un rând. Apoi șterge orice clasă pe care o are divulă în jos. Dacă se află pe rândul de jos și săgeata în jos este dezactivată, odată ce se mișcă un rând, se va putea muta din nou în jos. Prin urmare, oprește dezactivarea acesteia.

Apoi, toate miniaturile se deplasează prin detectarea a ceea ce este noul vertical_moves, înmulțind-l cu 64 și făcându-l negativ. Se folosește numărul 64 deoarece este înălțimea unui rând de miniaturi plus marginea de sub acesta. Apoi, această valoare se aplică marjei de top. De exemplu, dacă marginea de început a fost inițial -128px, s-ar mișca în sus, deoarece noul margine-top ar fi doar -64px. Metoda tween face să se estompeze la noua sa poziție. În interiorul fișierului principal.css, diviziunea picture_section ascunde depășirea acestuia. Acest lucru este astfel încât, atunci când aplicați o margine negativă în partea superioară, îl ascundeți în loc să lipiți. Atunci determină dacă se află în partea de sus a galeriei. Dacă este, dezactivează săgeata în sus, astfel încât să nu poată merge mai departe. Săgeata în jos are aceleași acțiuni aplicate, cu excepția invers.

Acum vom face butoanele stânga și dreapta să funcționeze corect. Mai întâi de toate, am setat current_id egal cu unul pentru a crea variabila. Acest lucru ne va ajuta să determinăm ce imagine mare este afișată (rețineți că butoanele din stânga și din dreapta apar doar când se afișează o imagine mare). Apoi adăugăm un eveniment clic în partea din stânga div și verificăm dacă este dezactivat sau nu. Dacă nu este, vom detecta clasa img cu id-ul big_picture. Acest lucru a fost setat mai devreme ca image_ (introduceți numărul imaginii curente aici). Folosim metoda get pentru a găsi acest lucru și metoda de înlocuire pentru a elimina prefixul imagine_. Apoi îl scădem cu unul, deoarece, mutându-ne spre stânga, ne întoarcem la o imagine cu un id de mai puțin.

Apoi, ascundem instantaneu imaginea, apoi schimbăm imaginea precedentă. Apoi am decolorat imaginea la 100% opacitate. După aceasta, schimbăm clasa imaginii în noua sa valoare, ceea ce permite unui utilizator să meargă în stânga în mod repetat. Apoi detectăm dacă este la prima fotografie. Dacă da, nu mai putem pleca la stânga, așa că dezactivați butonul din stânga. Dacă este ultima imagine după ce faceți clic pe stânga, înseamnă că a fost doar pe ultima imagine, în care butonul drept ar fi dezactivat. Dacă este cazul, activați butonul drept pentru a putea continua. Aproape acțiunile identice sunt aplicate butonului din dreapta, cu excepția, din nou, în sens invers.

Pasul 4 - Testarea și Optimizare

Acum e vorba de asta. Imaginea mare se estompează când faceți clic pe o miniatură, puteți să vă mutați la stânga și la dreapta, să reveniți la galeria principală făcând clic pe imaginea mare și să derulați în sus și în jos. Dar asteapta! După dezvoltarea într-un browser bun, cum ar fi Firefox, trebuie să îl testați în alte browsere populare, cum ar fi Safari, IE6 și IE7. Le-am testat pe toate și toate au lucrat, cu excepția surprinderii! -Internet Explorer 6. Când faceți clic pe o imagine și controalele orizontale se scot afară, acestea alunecă prea mult în IE6. Din anumite motive, IE6 crede că ceea ce orice alt browser crede că are 286 pixeli este de numai 143 de pixeli. Deci, modificați următorul cod:

$ ('stânga'). tween ('margin-left', '286px');

La acest:

dacă (Browser.Engine.trident4) $ ("stânga") tween ('marginea-stânga', '143px');  altceva $ ('left'). tween ('margin-left', '286px'); 

Browser.Engine.trident4 revine la adevărat dacă browserul este IE6. În caz contrar, returnează false și execută codul original. Și următorul cod:

$ ('sus'). setStyle ('marginea-stânga', '286px');

La acest:

dacă (Browser.Engine.trident4) $ ('sus') setStyle ('marginea-stânga', '143px');  altceva $ ('up'). setStyle ('margin-left', '286px'); 

Acum funcționează pe toate browserele. În acest moment, puteți să accesați site-ul MooTools și să selectați numai componentele pe care le-ați utilizat. Chiar dacă mootools.js, main.js, main.css și fișierul HTML utilizează mai puțin de 100kb împreună, puteți reduce întotdeauna dimensiunea pentru a optimiza experiența utilizatorilor cu o conexiune la internet mai lentă. Cu toate acestea, am lăsat întreaga bibliotecă MooTools în codul sursă pentru aceasta, astfel încât oamenii care doresc să schimbe lucrurile în galerie pot folosi toate componentele.

.