JavaScript-biblioteker, som MooTools, kan spare mye tid når du utvikler et nettsted. I denne opplæringen vil jeg vise deg hvordan du kan kombinere mange av MooTools funksjoner for å skape et fint fotogalleri.

Trinn 1 - Oppsett HTML, CSS og MooTools

Før du starter, ta en titt på demoen. Det vil være lettere å forstå formålet med hvert trinn hvis du vet målet.

Først opprett en enkel HTML-fil, og legg til en lenke til stilarket (main.css) og til to JavaScript-filer (mootools.js og main.js). Lag disse filene i samme katalog. Deretter går du til MooTools Core Builder. Velg alle komponentene, og klikk deretter Last ned. Dette vil laste ned mootools-1.2-core.js. Kopier innholdet til den filen til mootools.js-filen. Så kom til MooTools More Builder og velg alle komponentene og klikk Last ned. Kopier innholdet på nytt og lim dem inn i bunnen av mootools.js.

(Merk: De fleste nettsteder, inkludert dette fotogalleriet, trenger ikke alle komponentene. Men ved å bruke dem alle i begynnelsen, og deretter kutte ut de du ikke trenger, gjør utviklingen mye enklere. Hvis du var i midt i et prosjekt og innså at du ville ha en annen funksjon som følger med i en av komponentene du ikke lastet ned, må du laste den ned igjen før du fortsetter. På denne måten må du bare laste den ned igjen etter at du er ferdig.)

Trinn 2 - Lag oppsettet

Nå må vi lage oppsettet for vårt fotogalleri ved hjelp av HTML og CSS. Legg til følgende kode inne i kroppstemmerkene til HTML-filen din.

 
Fotogalleri
 
 
      
 
 
 
Bla opp
 
Bla nedover
 
 
 
Venstre
 
Ikke sant
 
 

Dette skaper en beholder som omgir all koden på nettstedet, en tittel, en seksjon for bilder og kontroller for nettstedet. Hvorfor alle de tomme img-kodene? I CSS nedenfor gir vi dem størrelser og en annen bakgrunnsfarge, så vi kan teste galleriet uten å måtte legge til og endre størrelsen på faktiske bilder. Nå legger vi CSS til main.css filen.

* margin: 0; padding: 0; skissere: none;  .hide display: none;  kropp bakgrunn: # 000; farge: #fff; padding: 30px; font-familie: Arial, Helvetica, sans-serif;  #container width: 596px; høyde: 400 piksler; bakgrunn: # 111; flow: hidden; grense: 1px solid # 333;  h1 bakgrunn: # 222; bredde: 592px; høyde: 29px; padding-left: 7px; grensebunn: 1px solid # 333; font-size: 18 piksler; linje-høyde: 29px; font-vekt: normal;  #picture_seksjon polstring: 7px 0 7px 7px; bredde: 590px; høyde: 332px; flow: hidden;  #inside width: 590px; høyde: 332px;  #picture_seksjon img grense: 0; høyde: 57px; bredde: 111px; float: venstre; bakgrunn: # 333; margin-bottom: 7px; margin-right: 7px; Markøren: pekeren;  #controls_vert bakgrunn: # 222; bredde: 600 piksler; høyde: 23 pikslene; border-top: 1px solid # 333;  #controls_horz bakgrunn: # 222; bredde: 600 piksler; høyde: 23 pikslene; border-top: 1px solid # 333;  #up høyde: 10px; bredde: 10px; margin-right: 7px; bakgrunn: url (up.jpg) no-repeat; text-indent: -9999px; float: venstre; margin: 7px; margin-bottom: 6 piksler; Markøren: pekeren;  #down høyde: 10px; bredde: 10px; bakgrunn: url (down.jpg) no-repeat; text-indent: -9999px; float: venstre; margin: 7px; margin-left: 0; margin-bottom: 6 piksler; Markøren: pekeren;  #left height: 10px; bredde: 10px; bakgrunn: url (left.jpg) no-repeat; text-indent: -9999px; float: venstre; margin: 7px; margin-bottom: 6 piksler; Markøren: pekeren;  # rett høyde: 10px; bredde: 10px; bakgrunn: url (right.jpg) no-repeat; text-indent: -9999px; float: venstre; margin: 7px; margin-left: 0; margin-bottom: 6 piksler; Markøren: pekeren;  div # up.deaktivert opacity: 0.2; filter: alfa (opasitet = 20); markøren: default;  div # down.deaktivert opacity: 0.2; filter: alfa (opasitet = 20); markøren: default;  div # right.deactivated opacity: 0.2; filter: alfa (opasitet = 20); markøren: default;  div # left.deactivated opacity: 0.2; filter: alfa (opasitet = 20); markøren: default; 

Her er hvordan det ser ut som det som brukes.

Fordi galleriet starter øverst, blir opp-pilen automatisk deaktivert. Også de venstre og høyre pilene blir automatisk skjult, fordi de bare vises når det store bildet er blåst opp. Også bare toppen av bildene i sjette rad vises, for å la brukeren vite at det er mer under.

La oss nå legge til overlegget som viser de store bildene. Først legger du til følgende kode rett før den avsluttende kroppsmerket i HTML-filen din.

 
Klikk på bildet for å gå tilbake til galleriet.
 
en

Legg til følgende i slutten av CSS-filen for å få divsene til å vises som et overlegg over miniatyrbildene.

#display_picture_container posisjon: absolutt; topp: 0; venstre: 0; bredde: 700 piksler; høyde: 400 piksler; padding-top: 16px;  #display_picture posisjon: absolutt; top: 61px; venstre: 31px; bredde: 596px; høyde: 330px; bakgrunn: # 000; opacity: 0,8; filter: alfa (opasitet = 80); tekst-Justering: center; font-size: 11px; padding-top: 16px;  #display_picture_img posisjon: absolutt; top: 108px; venstre: 65px; høyde: 272px; bredde: 530px; Markøren: pekeren; 

Det skaper denne effekten:

Det store bildet vil vises der (nå usynlige) display_picture_img div er (under klikk på bildet for å gå tilbake til galleriteksten).

Trinn 3 - Samle inn og endre størrelse på bildene dine

Dette er en god tid å samle alle bildene dine og endre størrelsen på dem. Først og fremst lager du en "bilder" -mappe og en "tommelfinger" -mappe. Legg til alle bildene dine i bildemappen og navn dem 1.jpg, 2.jpg, 3.jpg, etc. Endre størrelsen på dem til størrelsen på display_picture_img div: 530 piksler bred og 272 piksler høy. Deretter kopiere disse filene til tommelen katalog og endre størrelsen på disse kopiene til 111 piksler bred med 57 piksler høye. Det spiller ingen rolle hvor mange bilder du har. Imidlertid vil jeg anbefale å bruke over 26 for denne opplæringen, slik at du kan bruke vertikal rulling.

Trinn 4 - Legg til funksjonalitet med MooTools

Det første du må gjøre er å fjerne alle tagger i HTML-filen. De var bare plassholdere; Vi legger til de faktiske filene med JavaScript senere. Nå vil vi gjøre overlegget forsvinne når siden laster. Legg til følgende kode i main.js-filen

var number_of_pictures = 32; funksjon show_pictures () var while_pictures = 1; mens (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'). setStyle ('display', 'ingen'); .replace ('image _', ') == 1) $ (' left '). sett (' klasse ',' deaktivert '); . $ ( 'Rett') sletter ( 'klasse');  ellers hvis (this.id.replace ('image _', ') == number_of_pictures) $ (' left '). slette (' klasse '); $ (' høyre '). '); else $ (' left '). sett (' klasse ',' aktivert '); $ (' høyre '). slette (' klasse '); $ (' controls_horz '). setStyle ',' blokk '); $ (' left '). tween (' margin-left ',' 286px ');); new_image.inject ($ (' inside ')); // forhåndsbelaste alle bilder var preload_image = nytt element ('img', 'src': 'pictures /' + while_pictures + '.jpg', 'class': 'skjul'); preload_image.inject ($ ('container')); // MERK: Jeg har ikke opprettet et alt attributt fordi det ikke vil bli sett av noen her uansett. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ('hide'););

Slik ser det ut:

For å forklare dette, la oss starte nederst. I MooTools kjører vinduet.addEvent-koden koden inni når DOM er klar til å gjengi elementer. $ ('Display_picture_container'). Fade ('skjul'); skjuler display_picture_container div og alt innholdet. Jeg brukte fade ("skjul") metoden fordi vi vil falme den senere. Vi lager ikke en skjerm: ingen; setning i vår CSS-fil eller har JavaScript gjemme det på den måten; det må være skjult av funksjonen vi skal bruke for å vise det igjen senere (visne).

Nå for den store delen: show_pictures funksjonen. Først av alt setter vi variabelen number_of_pictures. Dette forteller funksjonen å legge til miniatyrbilder fra tommelen mappen ved hjelp av hvert heltall fra 1 til det oppgitte nummeret. For å legge til flere bilder i denne lysbildeserien, er alt du trenger å gjøre ved å legge dem til mappene, endre størrelsen på dem og øke verdien value_of_pictures. Jeg brukte 32.

Den neste delen er den interne driften av show_pictures. Dette viser, som navnet antyder, alle bildene. Det forlaster også de større bildene i bakgrunnen. Inne i funksjonen er while_pictures definert som 1. Dette er variabelen vi skal bruke som utgangspunkt for visning av alle bildene. Følgende mens erklæring viser at koden innsiden vil bli utført en gang for hvert bilde, starter ved en og går opp til totalt antall bilder (number_of_pictures). Legg merke til at while_pictures ++; er på slutten av mens sløyfen, for å få den til å øke med en hver gang sløyfen gjentar.

Deretter oppretter vi en Element-forekomst for et img-element. Vi kan legge til src, id, klasse, hendelse og andre attributter. Vi trenger imidlertid bare src, id og events. Ved å bruke 'src': 'thumbs /' + while_pictures + '.jpg', opplyser vi at vi ønsker at bildet av bildet skal være uansett om det nåværende nummeret er, og inne i tommelen-mappen. Ids for alle våre miniatyrer vil være image_1, image_2 osv.

Nå vil vi ha et stort bilde som vises etter at du har klikket på et miniatyrbilde, så vi lager en klikkhendelse. Den første linjen under det gjør display_picture_img div fremmed det store bildet med et big_picture id og en klasse av miniatyrbildets id (image_1, image_2, etc.). Husk at, på dette tidspunktet, er display_picture_img div gjemt.

Bruk nå .fade (1) metoden til å falme i display_picture_container div og alt innholdet. Den 1 representerer nivået av opasitet (1 er 100%, .5 er 50%, etc.). Dette forårsaker imidlertid en feil i alle, men de nyeste nettleserne som Firefox 3 og Safari. De fades riktig inn, men de andre kommer bare i bildet og fader det mørkere området rundt det. Etter mye eksperimentering fant jeg ut at hvis du har det store bildet (som har big_picture som dets id), falmer inn med sin egen fade-metode, fungerer det-men bare hvis fade ikke er satt til 1. Men vi vil ha bildet å være 100% opasitet. Derfor satte jeg det til .999999, som ikke har merkbar gjennomsiktighet.

Så nå er det store bildet på skjermen. Vi vil imidlertid også at kontrollene skal bevege seg til sentrum og bli venstre og høyre piler, i stedet for opp og ned pilene. Først av alt skjuler vi de vertikale kontrollene (controls_vert). Vi kan bruke skjerm: ingen; for dette, fordi vi ikke kommer til å falme det inn eller ut. Deretter bruker vi en hvis, hvis ellers, og annet erklæring for å avgjøre om bildet som ble klikket på var den første eller siste i vårt galleri. Hvis det var den første, vil vi ikke at den skal kunne gå til venstre, fordi ingen tidligere eksisterer. Det samme er nødvendig til høyre. Senere, når vi har venstre og høyre piler, vil vi få det til å oppdage om den har en deaktivert klasse eller ikke. Dette vil avgjøre om klikkhendelsen vil fungere for det. (Også sjekke ut CSS. Den stiller pilbildet til 20%. Dette sparer behovet for å ha 8 retnings pilbilder i stedet for 4.)

Deretter viser vi de horisontale kontrollene ved å stille inn visningsstilen for å blokkere. Så, ved å gjemme de vertikale kontrollene og vise de horisontale kontrollene, har vi nettopp slått dem ut. Vi vil imidlertid at de horisontale kontrollene skal være sentrert. Jeg oppnådde dette ved å lage en tween som animerer en økning i venstre margin til 286px, som er sentrum av galleriet.

Nå som vi har laget vår new_image, må vi sette den inn i dokumentet. Injeksjonsmetoden tillater oss å sette inn det nyopprettede img-elementet inn i det indre div.

Vi ønsker også å forhåndsbelaste hver av bildene, så det vil ikke være noen forsinkelse når folk faktisk klikker på bildene for å fade dem inn. Vi lager et nytt img-element for hvert bilde som er i full størrelse. Imidlertid bruker den skjult klassen, som i vårt CSS bruker skjerm: ingen; å skjule innholdet. Deretter injiserer vi det skjulte preloaderbildet i container div.

Slik ser det ut etter at du har klikket på et miniatyrbilde:

Nå må vi få bildet til å forsvinne når vi klikker på det. Sett inn følgende kode etter $ ('display_picture_container'). Fade ('hide'); uttalelse i main.js.

$ ('display_picture_img'). addEvent ('klikk', funksjon () $ ('display_picture_container'). fade (0); $ ('big_picture'). fade (0); $ ('opp'). setStyle 'Small-left ',' 286px '); $ (' controls_horz '). setStyle (' display ',' none '); $ (' controls_vert '). setStyle left '). setStyle (' margin-left ',' 7px '); $ (' opp '). tween (' margin-left ',' 7px '););

Dette legger til et klikkhendelse til div som inneholder det store bildet. Når den klikkes, blir beholderen ut til ingenting, og på grunn av den nevnte feilen, blir bildet selvsagt falt til 0 også. Deretter setter vi den skjulte opp div for å ha samme høyere margin-venstre som venstre div har. Deretter skifter vi de horisontale kontrollene tilbake til de vertikale kontrollene øyeblikkelig, og deretter, etter å ha satt skjult venstre div tilbake til sin opprinnelige venstre margin, animerer vi pilens venstre margen tilbake til sin opprinnelige 7px ved hjelp av en annen tween. Nå kan du klikke på miniatyrer for å blåse dem opp og deretter klikke på det store bildet for å skjule det igjen. Nesten ferdig!

Ta nå følgende kode og lim den over torsken du nettopp har skrevet inn.

var vertical_moves = 0; var rader = Math.ceil (number_of_pictures / 5); hvis (rad> 5) $ ('opp'). addEvent ('klikk', funksjon (hendelse) if (! $ ('up'). hasClass ('deaktivert')) vertical_moves--; $ down '). slette (' klasse '); $ (' inne '). tween (' margin-top ',' - '+ (64 * vertical_moves) +' px '); ('opp'). sett ('klasse', 'deaktivert');); $ ('ned'). addEvent ('klikk', funksjon (hendelse) if (! $ ('ned'). hasClass ('deaktivert')) vertical_moves ++; $ ('up'). ), $ ('inne'). Tween ('margin-top', '-' + (64 * vertical_moves) + 'px'); .sett ('klasse', 'deaktivert'););  ellers $ ('opp'). sett ('klasse', 'deaktivert'); $ ('ned'). sett ('klasse', 'deaktivert');  var current_id = 1; $ ('left'). addEvent ('klikk', funksjon () if (! $ ('left'). hasClass ('deaktivert')) current_id = $ ('big_picture'). .replace ('image_', '); current_id--; $ (' big_picture '). fade (' hide '); $ (' big_picture '). sett (' src ',' pictures / '+ current_id +'. sett ('klasse', 'bilde_' + nåværende_id); hvis (current_id == 1) $ ('venstre'), $ ('big_picture'). .sett ('klasse', 'deaktivert'); hvis (current_id == (number_of_pictures-1)) $ ('høyre'). slette ('klasse');); $ ('høyre') .addEvent ('klikk', funksjon () if (! $ ('right'). hasClass ('deaktivert')) current_id = $ ('big_picture'). , '); current_id ++; $ (' big_picture '). fade (' hide '); $ (' big_picture '). sett (' src ',' pictures / '+ current_id +' .jpg '); ') .fade (1); $ (' big_picture '). sett (' klasse ',' bilde_ '+ nåværende_id); hvis (current_id == 2) $ (' left ').  hvis (current_id == number_of_pictures) $ ('right'). set ('class', 'deaktivert'););

Det første vi skal gjøre er å sette opp vertikal rulling. Først av alt vil vi opprette en variabel som kalles vertical_moves med en verdi på 0. Dette vil fortelle oss hvor mange rader den har flyttet ned. Deretter finner vi ut hvor mange rader bilder vi har, med 5 bilder på rad. Math.ceil-funksjonen runder opp et tall som har et desimal til et heltall. For eksempel har jeg 32 bilder. 32 delt med 5 er 6,4, som vil runde til 6. Men vi vil fortsatt at de ekstra bildene skal vises; Selv om det bare er to bilder på siste rad, vil vi at det skal telle som en hel rad. Siden Math.ceil runder det hele, blir mengden rader 7.

Deretter oppdager vi om det er mer enn fem rader. Hvis det ikke er det, deaktiverer vi opp- og nedpilen. Med fem rader eller mindre vises alle bildene uten behov for rulleknappene. Men hvis det er seks eller flere, vil vi legge til hendelser for dem. For opp pil div, legger vi til en hendelse og deretter oppdager om den har blitt merket som deaktivert eller ikke. Hvis den er deaktivert, vil den dukke opp med bare 20% opacity, og når du klikker på den, vil den ikke gjøre noe. I tillegg vil det ikke ha en peker som en markør lenger. Men hvis den ikke har den klassen, fortsetter den. Hvis du går opp, reduseres antallet av rader ned du har gått, så vertikale_moves reduseres med en rad. Det sletter deretter alle klasser som down div har. Hvis det er på nederste rad og nedpilen er deaktivert, når den beveger seg oppe på en rad, vil den kunne bevege seg ned igjen. Derfor stopper den det fra å bli deaktivert.

Deretter gjør det at alle miniatyrbildene beveger seg ved å oppdage hva de nye vertical_moves er, multiplisere det med 64, og gjøre det negativt. Tallet 64 brukes fordi det er høyden på en rekke miniatyrbilder pluss marginen under den. Det gjelder så denne verdien til margin-toppen. For eksempel, hvis margin-toppen var opprinnelig -128px, ville den bevege seg oppover, fordi den nye margin-toppen bare ville være -64px. Tween-metoden gjør at den falmer til sin nye posisjon. Inne i main.css-filen har den picture_section div gjemme overløpet. Dette er slik at når du bruker en negativ margin-topp, skjuler den den i stedet for å stikke seg. Da bestemmer den om den er øverst i galleriet. Hvis det er, deaktiverer den opp pilen, slik at den ikke kan gå lenger. Pil ned har samme tiltak, unntatt i omvendt.

Nå vil vi få venstre og høyre knappene til å fungere riktig. Først av alt setter vi current_id lik en til å opprette variabelen. Dette vil hjelpe oss med å bestemme hvilket stort bilde som skal vises (husk, venstre og høyre knapp vises bare når et stort bilde vises). Da legger vi til en klikkhendelse til venstre div og sjekker om den er deaktivert eller ikke. Hvis det ikke er det, oppdager vi klassen av img med big_picture id. Dette ble satt tidligere som image_ (skriv inn antall nåværende bilde her). Vi bruker get-metoden for å finne dette og erstatningsmetoden for å fjerne image_ prefixet. Da trekker vi det fra en, for ved å flytte til venstre går vi tilbake til et bilde med et id med en mindre.

Deretter skjuler vi bildet selv, og endrer det til et forrige bilde. Vi fade deretter bildet i til 100% opacity. Etter det endrer vi bildens klasse til sin nye verdi, noe som gjør det mulig for en bruker å gå til venstre flere ganger. Vi oppdager da om det er ved første bilde. I så fall kan vi ikke gå igjen lenger, så vi deaktiverer venstre knapp. Hvis det er neste til siste bilde etter å ha klikket til venstre, betyr det at det bare var på det siste bildet, der den høyre knappen ville være deaktivert. Hvis det er tilfelle, aktiverer vi den riktige knappen, slik at de kan fortsette fremover. Nesten de samme handlingene blir brukt til høyre knapp, bortsett fra, igjen, i omvendt.

Trinn 4 - Testing og optimalisering

Nå handler det om det. Det store bildet fades inn når du klikker på et miniatyrbilde, du kan flytte til venstre og høyre, gå tilbake til hovedgalleriet ved å klikke på det store bildet og bla opp og ned. Men vent! Etter å ha utviklet seg i en god nettleser som Firefox, må du teste den i andre populære nettlesere som Safari, IE6 og IE7. Jeg testet dem alle, og de alle jobbet, unntatt overraskelse! -Internet Explorer 6. Når du klikker på et bilde og de horisontale kontrollene glir ut, glir de ut altfor langt i IE6. Av en eller annen grunn mener IE6 at hva andre nettlesere mener er 286px, er bare 143px. Så, endre følgende kode:

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

Til dette:

hvis (Browser.Engine.trident4) $ ('left'). tween ('margin-left', '143px');  ellers $ ('left'). tween ('margin-left', '286px'); 

Browser.Engine.trident4 returnerer sant hvis nettleseren er IE6. Ellers returnerer den falsk og kjører den opprinnelige koden. Og følgende kode:

$ ('up'). setStyle ('margin-left', '286px');

Til dette:

hvis (Browser.Engine.trident4) $ ('up'). setStyle ('margin-left', '143px');  else $ ('up'). setStyle ('margin-left', '286px'); 

Nå fungerer det på alle nettlesere. På dette tidspunktet kan du også gå til MooTools-siden og bare velge de komponentene du brukte. Selv om mootools.js, main.js, main.css og HTML-filen bruker mindre enn 100kb sammen, kan du alltid redusere størrelsen for å optimalisere opplevelsen for brukere med en langsommere internettforbindelse. Imidlertid forlot jeg hele MooTools-biblioteket i kildekoden for dette, slik at folk som vil endre ting i galleriet, kan bruke alle komponentene.

.