Share
În acest tutorial, vom crea o galerie care afișează toate fișierele imagine într-un director dat. Un cursor este utilizat pentru a naviga ușor prin imagini.
Configurați un nou document Flash AS3 și un fișier ActionScript gol. Vom crea mai întâi clasa principală; denumiți-o "Galerie" și salvați-o ca "Gallery.as". Mai jos este codul pentru a configura prima clasă:
pachet public class Gallery functie publica Galerie (): void
În Flash, putem seta acum această clasă de bază introducând numele în caseta de intrare din Setări publicare a documentului. Puteți încerca o "urmă" ("salut lume") "în funcția Galerie pentru a testa dacă funcționează.
Înainte de a continua cu clasa principală, este mai bine să începeți cu glisorul. Codul este destul de ușor de înțeles și ar putea străluci o lumină asupra felului în care lucrurile se fac în AS3.
Creați două filme noi: un cursor și un mâner pentru cursor. Glisorul sau căutătorul nu trebuie exportat pentru ActionScript, deoarece trebuie doar să aplicăm anumite funcții mânerului. Setați clasa pentru mâner ca "Mâner". Acum putem crea o nouă clasă numită "Handle" și, dacă este salvată în același director, Flash va folosi automat această clasă pentru mâner. Dați atât un nume de instanță, cum ar fi "cursorul" și "ghidul".
Următorul este codul complet al mânerului pe care îl voi explica în pași. Ar trebui salvat ca "Handle.as" în același director ca fișierul .fla. În acest fel, Flash va executa codul odată ce se folosește o instanță cu numele de clasă "Handle".
Accentsconagua
pachet import flash.display.MovieClip; importul flash.events.MouseEvent; importul flash.events.Event; clasa publică Handle extinde MovieClip public var goToX: Number = x; privat var slider: MovieClip = MovieClip (părinte) .slider; private var mousePos: Număr = 0; funcția publică Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); funcția privată moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); funcția privată stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle); funcția privată followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Număr = x; dacă (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - lățime) goToX = (slider.x + slider.width) - lățime; altceva goToX = newPos; x = goToX; dacă (goToX! = orgX) dispatchEvent (eveniment nou ("alunecare", adevărat)); În primele câteva linii vom crea câteva variabile care să dețină datele pe care le putem folosi în fiecare funcție din această clasă. Variabila cursorului deține o referință la instanța numită "cursor" pe părinte. Avem nevoie de calcularea corectă a poziției x la care trebuie mutat mânerul. În constructor am setat "buttonMode" la adevărat, astfel încât să apară un cursor de mână atunci când se deplasează peste mâner. În plus, adăugăm două evenimente pentru a asculta evenimentele mouse-ului.
clasa publică Handle extinde MovieClip public var goToX: Number = x; privat var slider: MovieClip = MovieClip (părinte) .slider; private var mousePos: Număr = 0; funcția publică Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle);
După ce apare un eveniment cu mouse-ul jos, se adaugă un ascultător suplimentar. Acest ascultător rămâne activ atât timp cât mișcarea de tragere nu este oprită și sună funcția "followHandle". Se elimină din nou când clicul mouse-ului se termină.
funcția privată moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); funcția privată stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);
Această ultimă funcție de fapt mișcă mânerul în jur. Variabila "newPos" stochează noua poziție la care trebuie să se miște mânerul. Dacă, totuși, această poziție este mai departe decât extrema stângă sau dreaptă a cursorului, poziția trebuie setată la valoarea maximă posibilă. Dacă mânerul este mutat, vom expedia un nou eveniment personalizat numit "alunecare", pe care îl vom putea folosi ulterior pentru a vă deplasa în jurul imaginilor.
funcția privată followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Număr = x; dacă (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - lățime) goToX = (slider.x + slider.width) - lățime; altceva goToX = newPos; x = goToX; dacă (goToX! = orgX) dispatchEvent (eveniment nou ("alunecare", adevărat)); Dacă totul a mers bine până acum, ar trebui să aveți un slider frumos ca cel de mai jos. Adăugați un câmp text dinamic sub el, care va menține numărul imaginii. Dați-i un nume de instanță ca "countTxt", astfel încât să îl putem adresa mai târziu în ActionScript. Deoarece nu există nimic de afișat, l-am completat cu textul "Încărcare", care va fi afișat și în timp ce scriptul va încărca prima imagine.
Apoi vom crea scriptul php backend. Flash nu poate citi conținutul unui director local, așa că trebuie să trecem informațiile din php în Flash. Vom folosi XML, deoarece este ușor de realizat cu php și chiar mai ușor de citit din nou în AS3.
Următorul este codul backend al php, salvați-l ca "backend.php". Codul buclele prin directorul "img" și scrie o linie de XML pentru fiecare fișier acolo. Înainte de imprimare trebuie să filtrați "." și "..." directoare. Deoarece directorul conține numai imagini, nu mai este nevoie de verificări suplimentare.
"$ nume fișier."\ n ";?>
Aceasta se va realiza de exemplu:
file1.jpg
file2.jpg
file3.jpg
Înainte de a încărca acest lucru în Flash, să creăm o clasă pentru a ține imaginile noastre în mod individual. În același mod în care am creat clasa Handle, putem crea acum o clasă Img. Începeți cu crearea unui videoclip despre dimensiunea dorită a imaginilor dvs. Dați-i o marjă de câțiva pixeli și salvați un spațiu în partea de jos a textului descriptiv. Adăugați un câmp text dinamic pentru descriere și dați-i un nume de instanță "descr". Asigurați-vă că ați setat punctul de înregistrare al filmului în centru, astfel încât să îl putem scala ușor mai târziu. Exportați-o pentru ActionScript sub numele de clasă "Img". Acum, ștergeți instanța din scenă, așa cum o vom numi direct din bibliotecă.
Apoi vom încărca informațiile care revin în fișierul php în proiectul Flash folosind ActionScript. Deschideți din nou clasa Galerie. Următorul cod adaugă două funcționalități proiectului nostru. În primul rând, creează "imagesClip", un movieclip gol în care vom stoca imaginile reale mai târziu. Folosind "addChild" aici se adaugă movieclip la scenă. Orice adăugat la imaginiClip mai târziu va apărea, de asemenea, pe scenă. Pentru a încărca datele xml, creăm un "URLLoader". Această clasă poate prelua rezultatele și poate executa o funcție când rezultatele sunt înăuntru.
pachet import flash.display.MovieClip; importul flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class Gallery extinde MovieClip private backend: String = 'http: // localhost / ... / backend.php'; privat var xmlLoader: URLLoader = nou URLLoader; privat var xdata: XML; imagini public var: Array = Array nou (); public var imaginiClip: MovieClip = nouClipClip; funcția publică (): void imagesClip.y = 180; addChild (imagesClip); xmlLoader.load (noua adresă URLRequest (backend + "?" + nouă dată (). valueOf ())); xmlLoader.addEventListener (eveniment.COMPLETE, loadImages); funcția privată loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Număr = 0; pentru fiecare (var img: XML în xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (imagini [i]);
Aici folosim funcția de încărcare a clasei URLLoader. Pentru a preveni cachearea rezultatelor, putem adăuga o dată simplă la sfârșitul adresei URL. Eventlistener verifică când URLLoader este terminat și apoi rulează funcția loadImages.
xmlLoader.load (noua adresă URLRequest (backend + "?" + nouă dată (). valueOf ())); xmlLoader.addEventListener (eveniment.COMPLETE, loadImages);
Această funcție viitoare trece prin toate
funcția privată loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Număr = 0; pentru fiecare (var img: XML în xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (imagini [i]);
Pentru a oferi instanțelor noastre mai multe funcționalități, creați o clasă Img și salvați-o ca "Img.as". În mod similar cu încărcarea XML, putem încărca imaginea în sine și afișa-o în interiorul Img movieclip. Încărcarea nu ar trebui să apară în constructor sau toate imaginile ar încerca să se încarce în același timp; vom crea o funcție separată pentru a face acest lucru.
public class Img extinde MovieClip public var id: Number; privat var src: String; private var imagineLoader: Loader = încărcător nou (); privat var principal: Galerie; private var orgWidth: Număr = 0; private var orgHeight: Number = 0;
În constructor, am stabilit o referință la clasa principală a Galei, astfel încât să putem accesa mai târziu elementele de pe scena sau variabilele publice și funcțiile clasei principale. Șirul "încărcare" va conține calea spre imaginea pe care a returnat php-ul, o vom salva la o variabilă, astfel încât să putem accesa mai târziu.
funcția publică Img (sarcină: String, m: Galerie): void orgWidth = width; orgHeight = înălțime; main = m; src = sarcină;
Funcția "loadImage" încarcă imaginea și la terminare rulează funcția "displayImage".
funcția publică funcțiaImage (): void imageLoader.load (noua adresă URLRequest ("img /" + src)); imageLoader.contentLoaderInfo.addEventListener (eveniment.COMPLETE, displayImage); Funcția displayImage verifică matricea de imagini pe care am creat-o și încărcăm următoarea imagine. Setează netezirea la adevărat pe Loader (implicit, netezirea este setată la false pe imaginile încărcate dinamic). Odată ce începeți să scalați sau să rotiți o imagine, este important să setați netezirea, astfel încât imaginea să rămână calitativă. Pe măsură ce punctul de înregistrare al Img movieclip este în centru, trebuie să calculam pozițiile x și y de unde să plasăm imaginea în sine. În exemplul meu am folosit un director de imagini cu aceeași lățime și înălțime. Dacă lățimea și înălțimea imaginii încărcate sunt variabile, acesta este locul pentru redimensionarea acesteia în zbor. Chiar înainte de a adăuga-o în calitate de copil, setăm textul descrierii la "src", care conține numele imaginii.
funcția privată displayImage (_e: Event): void if (main.images [id + 1]! = null &&! main.images [id + 1]. Bitmap (imagineLoader.content) .smoothing = true; imageLoader.x = main.space între / 2 - (orgWidth / 2); imageLoader.y = main.space Între / 2 - (orgHeight / 2); descr.text = src; addChild (imagineLoader);
După modificările aduse clasei Img trebuie să actualizăm modul în care instanțele sunt numite în funcția loadImages din clasa Galerie. Acum trebuie să trecem două argumente atunci când sunăm noi Img ().
Primul este numele căii care trebuie încărcat, obținem din xml. Al doilea este o referință la clasa principală a Galeriei; putem folosi "acest" care indică clasa în care lucrăm în prezent. În loc să adăugăm imaginile cu addChild în containerul imagesClip vom crea o nouă funcție "goTo". Această funcție va determina imaginile pe care să le plasați pe ecran. Argumentul pe care trebuie să-l transmitem este numărul de identificare al imaginii, același număr ca și cheia index în matricea de imagini. Atunci când imaginile sunt încărcate pentru prima dată, vom stabili focalizarea pe prima imagine, numărul cărora este zero.
funcția privată loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Număr = 0; pentru fiecare (var img: XML în xdata.img) images [i] = Img nou (img, acest); imagini [i] .x = 200 * i; imagini [i] .id = i; i ++; goTo (0);
Pentru a folosi funcția goTo trebuie să declare mai întâi o variabilă "imagesToShow". Acest lucru va seta cantitatea de imagini pe care dorim să le încărcăm o dată pe ecran. Pentru a determina direcția în care derulează utilizatorul, pur și simplu verificăm dacă imaginea pe care o vom avea un număr de identificare mai mare sau mai mic decât cea din ultima.
funcția privată goTo (imgId: Număr): void var direction: Number; dacă (orgImgId! = imgId) dacă (imgId> orgImgId) direcția = 1; altă direcție = -1;
Următorul "pentru buclă" buclează toate imaginile necesare pe ecran. De exemplu, dacă setăm imaginileToShow la 5, se va rupe de la -2 la 2. Aceasta înseamnă că dacă trecem valoarea lui i la clasa Img putem determina unde să fie poziționat pe ecran (-2 fiind departe , 0 centru și 2 în dreapta). Prin urmare, putem scala imaginile mai mari cu cât sunt mai poziționate în centru.
Există o verificare suplimentară inclusă pentru a nu activa imaginile existente (se oprește la prima și ultima). Pentru fiecare dintre imaginile active vom rula funcția "makeActive", pe care o vom crea mai târziu.
pentru (var i: Number = - Math.floor (imagesToShow / 2); <= Math.floor(imagesToShow/2); i++ ) if( imgId + i < images.length && imgId + i >= 0) imagini [imgId + i] .makeActive (i, direcție);
Imediat după plasarea imaginilor de pe ecran, vom verifica care dintre ele nu ar trebui să mai fie acolo și să le scoatem pe scenă. Din moment ce toate imaginile sunt adăugate la containerul de imaginiClip, putem ușor să bucle prin toți copiii din acest film. Dacă id-ul lor nu se află în interiorul celor care ar trebui să fie activi, conducem "deActive".
pentru (var j: număr = 0; j < imagesClip.numChildren; j++ ) var tile : Img = imagesClip.getChildAt(j) as Img; if ( tile.id < imgId - Math.floor(imagesToShow/2) || tile.id > imgId + Math.floor (imaginiToShow / 2)) tile.deActive (direcție);
Următoarea linie actualizează textul câmpului de text dinamic pe care l-am creat mai devreme. Din moment ce ID-urile imaginilor încep să le numere la 0, adăugăm + 1 la imgId, astfel că prima imagine este de fapt numărul 1 etc. Putem obține numărul total de imagini să acceseze lungimea matricei de imagini.
countTxt.text = imgId + 1 + "/" + imagini.length;
În cele din urmă, vom seta "orgImgId", astfel încât data viitoare când funcția este executată, direcția de derulare poate fi determinată.
orgImgId = imgId;
Acum avem nevoie de funcțiile "makeActive" și "deActive" din clasa Img. Acestea vor adăuga imaginea pe scenă sau o vor scoate. Pentru moment, le vom adăuga și le vom plasa corect. Mai târziu, le vom adăuga și în locul lor corect.
Funcția makeActive verifică mai întâi dacă este deja adăugată la imaginiClip. Dacă nu există nici un părinte găsit, se adaugă la containerul imagesClip. Parintele este apoi imagineaClip. Apoi, setăm proprietatea vizibilă la true. Când dezactivați, l-am setat la fals, deci este normal să ne dorim ca imaginea să apară din nou când este activă.
funcția publică makeActive (poziție: număr, direcție: număr): void if (parent == null) main.imagesClip.addChild (this); visible = true;
Există o șansă ca imaginea însăși să nu fi încărcat încă. Pentru a verifica acest lucru, am verificat dacă numărul de copii este mai mic de 3. Acest număr poate depinde de numărul de forme sau de alte mărimi din Img. Dacă vă simțiți nesigur în legătură cu această metodă, o opțiune mai sigură ar fi să declarați un boolean la început și să-l setați la adevărat în funcția displayImage.
dacă (numChildren < 3 ) loadImage();
Nu există o adâncime în AS3, dar odată ce începem să scalăm și să ne rotim imaginile, trebuie să ne asigurăm că imaginea din centru se află pe partea superioară a celorlalte. Pentru că am trecut poziția ca argument în funcția goTo putem folosi acum pentru a seta indexul imaginii în imagineaClip. Indicele unui copil poate fi comparat cu o adâncime, dar nu va exista probleme atunci când îl schimbi, de vreme ce alte filme vor muta un index în sus sau în jos. Acest pas nu este necesar dacă nu intenționați să suprapuneți imaginile.
parent.setChildIndex (aceasta, (parent.numChildren-1) - Math.abs (poziție));
În cele din urmă, determinăm poziția imaginii. Variabila "extra" este utilizată aici pentru a afla dacă imaginea curentă este departe de centru. "DefaultWidth" și "spaceBetween" sunt variabile publice stabilite în clasa principală a Galei, astfel încât să le putem accesa de oriunde. Deoarece toate imaginile din directorul meu au aceeași lățime, am setat defaultWidth la 195 și spaceBetween la 20. Pentru a muta de fapt imaginea în noua poziție am setat proprietatea x la valoarea nou găsită x.
var extra: Număr = Math.round (poziția * (main.defaultWidth + main.spaceBetween)); var newX: Number = Math.round ((main.stageWidth / 2)) + extra; x = newX;
Funcția deActive este destul de dreaptă, schimbă vizibilitatea la falsă. Direcția este deja stabilită ca argument, deoarece vom avea nevoie mai târziu să știm în ce direcție să trimitem imaginea când o scoatem de pe scenă.
funcția publică deActive (direcția: Număr): void visible = false;
Până acum, primele imagini ar trebui să apară pe scenă. Există doar o singură funcționalitate care lipsește. Glisorul nu este încă conectat la funcția goTo. Cu toate acestea, deoarece deja expediem un eveniment personalizat odată ce mânerul este tras, nu este foarte greu să le conectați.
Adăugați următoarea linie la funcția constructor Galerie. Acest eventlistener va rula funcția diapozitiv de fiecare dată când evenimentul "alunecare" este apelat de mâner.
theHandle.addEventListener ("alunecare", diapozitiv); Tot ce avem nevoie de funcția diapozitiv este de a calcula imaginea care ar trebui afișată în centru în funcție de locul unde se află mânerul. În funcția "glisorul" și "mâna" sunt numele de instanțe pe care le-am setat mai devreme pe movieclips de pe scenă. Pentru a afla ce imagine să mergem, determinăm mai întâi procentul poziției mânerului pe lungimea cursorului. Apoi, înmulțind-o cu totalul imaginilor ne aduce la id-ul de imagine corect.
funcția privată (_e: Eveniment): void var procente: număr = (TheHandle.goToX - slider.x) / (slider.width --Handle.width); var imgId: Număr = Math.round (procent * (imagini.length - 1)); goTo (imgId);
Dacă ați reușit să urmați acest lucru și să vedeți ce clase să importați și care variabile să declarați (sau să urmați fișierele sursă), ar trebui să aveți acum un exemplu de lucru.
Pentru a termina acest tutorial, vom adăuga adăugarea la imagini utilizând TweenLite, un motor gratuit și ușor de tweening. Clasele standard de tweening oferite de Adobe nu funcționează bine atunci când se întâmplă multe lucruri. Când am încercat aceste lucruri, acestea au rănit sau au înghețat foarte mult, în timp ce încă nu am descoperit astfel de probleme cu TweenLite. Sintaxa lui TweenLite este foarte ușoară. Voi demonstra acest lucru comparându-l cu un Flash normal; adăugând un obiect din actualul lui x la 100 și schimbând alfa la 0:
noul Tween (obiect, 'x', Linear.easeOut, object.x, 100, 2, true); noul Tween (obiect, 'alfa', Linear.easeOut, object.alpha, 0, 2, true);
Acum este sintaxa alternativă TweenLite:
TweenLite.to (obiect, 2, x: 100, alfa: 0, relaxare: Linear.easeOut);
Să creăm o nouă funcție în care să putem plasa toate acțiunile de îmbunătățire. Denumiți-o "flyTo" și plasați-o în clasa Img.
funcția privată flyTo (newX: Number, removeAfter: Boolean, scară: Number = 1): void var tweeningOptions: Object = Object new; tweeningOptions.x = newX; dacă (removeAfter) tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = adăugareOptions.scaleY = 0.3; tweeningOptions.visible = false; altceva tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scară; tweeningOptions.rotation = (Math.random () * 20) - 10; TweenLite.to (acest lucru, 0,4, modificări de opțiuni);
Există 3 argumente necesare pentru această funcție: valoarea x pe care am calculat-o mai devreme, dacă ar trebui să fie eliminată după adăugare și scară. Parametrul "removeAfter" va fi utilizat în funcția deActive, astfel încât vizibilitatea imaginii poate fi setată la falsă odată ce ajunge la sfârșitul etapei. Parametrul de scalare este utilizat numai pentru imaginea centrului; o vom afișa puțin mai mare decât restul.
Să verificăm opțiunile de îmbunătățire pentru momentul în care imaginea este eliminată din scenă. Mai întâi alegem o opțiune de relaxare, în acest caz "Linear.easeIn", care dă o mișcare liniară normală. În al doilea rând, vom estompa valoarea alfa la zero, astfel încât imaginea se estompează. Apoi, vom scala-l la doar un mic procent din lățimea și înălțimea sa, astfel încât acesta devine mai mic pe măsură ce atinge sfârșitul. În cele din urmă, atunci când tween-ul este completat, setăm vizibilitatea la false.
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = adăugareOptions.scaleY = 0.3; tweeningOptions.visible = false;
Atunci când o imagine este activă, opțiunile de îmbunătățire sunt diferite. Am stabilit relaxarea la "Back.easeOut", astfel încât imaginile par să zboare puțin prea departe și apoi sări înapoi; un efect foarte subtil. Apoi vom schimba alfa înapoi la 1 și vom scala imaginea la valoarea scării pe care am trecut-o la funcție. În cele din urmă, am setat o rotație aleatoare de -10 la 10 grade. Dacă textul descrierii nu se încarcă după această acțiune, trebuie să vă asigurați că fontul este încorporat.
tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scară; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);
Acum trebuie să actualizăm funcțiile makeActive și deActive astfel încât să se folosească de noua funcție flyTo.
În funcția makeActive trebuie să adăugăm o valoare x imaginii, astfel încât aceasta să poată fi adăugată de la valoarea inițială. Valoarea implicită trebuie să fie setată în clasa principală a Galeriei și să conțină lățimea scenei.
funcția publică makeActive (poziție: număr, direcție: număr): void deactivating = false; dacă (părinte == null) x = (direcția == 1? main.stageWidth + main.defaultWidth * 2: - main.defaultWidth * 2); alfa = 0; main.imagesClip.addChild (acest); visible = true; dacă (numChildren < 3 ) loadImage(); parent.setChildIndex(this, ( parent.numChildren-1 ) - Math.abs( position ) ); var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) ); var newX : Number = ( Math.round( ( main.stageWidth / 2 ) /* - ( main.defaultWidth / 2 )*/ ) + extra ); flyTo( newX, false, ( position == 0 ? 1.2 : 1 ) );
În funcția deActive tot ce trebuie să adăugăm este o valoare moveTo care conține valoarea x la care imaginea ar trebui să fie adăugată. Dacă găsim acest lucru în afara lățimii scenei, imaginea va dispărea chiar în afara scenei.
funcția publică deActive (direcția: Număr): void if (! deactivating) active = false; var moveTo: Numărul = (direcția! = 1? main.stageWidth + main.defaultWidth * 2: parent.x - main.defaultWidth * 2); flyTo (moveTo, true); deactivating = true;
După actualizarea tuturor, acum avem o galerie funcțională. Pentru a vedea cum dispar scenele din scenă, verificați versiunea completă.
Versiunea finală este încă slabă în ceea ce privește funcționalitatea. Imaginile încărcate trebuie să aibă aceeași dimensiune și nu au o previzualizare mai mare. Puteți adăuga o funcție de redimensionare și o opțiune pentru a vizualiza o previzualizare mai mare a imaginii când ați făcut clic. Mai mult, ar putea fi adăugată o opțiune de navigare la stânga sau la dreapta cu butoane sau cu un eveniment de tastatură.
Odată ce înțelegeți conceptul de folosire a claselor pentru a vă separa și structura codul, veți ajuta la dezvoltarea și veți face lucrurile mai ușoare pe termen lung. Sper că ți-a plăcut să urmezi!
