Share
Neste oppe i Premium Pixels-økten er Ormans bildeskjermkontroller. Vi tar PSD, gjenoppbygger den til nettleseren, og gjør det hele funksjonelt ved hjelp av den strålende Nivo Slider jQuery Plugin.
For å holde alt ryddig oppretter vi først mappestrukturen vår. Gå videre og opprett tre mapper kalt "css", "bilder" og "js" henholdsvis. CSS-mappen inneholder vårt stilark. Bildene er for, godt bilder, og js inneholder våre jQuery-plugins - Nivo-glidebryteren i dette tilfellet!
Ok, vi har vår mappestruktur, nå må vi lage vårt html-dokument. Opprett dette i roten til prosjektet ditt. Vi bruker en enkel HTML5-basemaler, samtidig som du kobler til jQuery-biblioteket som hostes av Google.
Bilde Slider kontroller
Vi slår ting av med noen tilbakestillede stiler:
html, html, html, html, ht, p, blockquote, pre, a, abbr, akronym, adresse, stor, sitere, kode, del, dfn, em, img, ins, kbd, q, s, samp, liten, streik, sterk, sub, sup, tt, var, b, du, midt, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legenden, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, artikkel, til side, lerret, detaljer, embed, figur, figcaption, footer, header, hgroup, meny, nav, output, ruby, seksjon, sammendrag, tid, merke, lyd, video margin: 0; polstring: 0; grense: 0; skrifttype: arve; vertikaljustering: basislinje; / * HTML5 display-rolle reset for eldre nettlesere * / artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block; kropp linjehøyde: 1; ol, ul listestil: ingen; blockquote, q quotes: none; blockquote: før, blockquote: etter, q: før, q: etter innhold: "; innhold: ingen; tabell grensekollaps: kollaps; grenseavstand: 0; a tekstdekorasjon: ingen;
Nå, før vi hopper inn i skyveknappen selv, legger vi til en bakgrunn til siden. Hvis du har lastet ned PSD før du ser det, er det et lag med en radial gradient som tyder på litt subtil belysning. Vi lager dette ved å ha et repeterbart mønster, gjort litt lettere enn PSD. Etter å ha brukt bakgrunnen bruker vi noen innboks boks-skygger på html-taggen for å prøve å kopiere lyset i midten.
html -webkit-boks-skygge: innspill 250px 250px 250px rgba (0,0,0, .25), innspill -250px -250px 250px rgba (0,0,0, .25); -moz-boks-skygge: innsett 250px 250px 250px rgba (0,0,0, .25), innspill -250px -250px 250px rgba (0,0,0, .25); boks-skygge: innspill 250px 250px 250px rgba (0,0,0, .25), innspill -250px -250px 250px rgba (0,0,0, .25); bredde: 100%; høyde: 100%; kropp bakgrunn: url (... /images/bg.jpg) gjenta; font-size: 100%;
Nå kan vi endelig begynne vår skyveknapp! Nivo Slider er arbeidet til Gilbert Pellegrom og Michael Wright, sammen kjent som Dev7studios og profesjonelle chums med Orman.
Det gjør at vi kan lage vår glidebryter ved hjelp av minimal oppmåling som mulig. Alt vi trenger å gjøre er å lage en div med en ID av hva du liker; Jeg bruker "glidebryter" i dette tilfellet, og en klasse av "nivoSlider". Så alt du trenger å gjøre er å plassere bildene dine i div, det er det!
Bilde Slider kontroller 
Deretter setter vi vår glidebryter midt på siden, hvis du fulgte min siste opplæring, har du gått gjennom prosessen på hvordan du oppnår dette. Hvis du vil ha mer info, sjekk ut denne artikkelen på CSS Tricks.
Vi har også gått videre og lagt til noen bokseskygger til skyveknappen, mens du husker nettleserprefiksetene. Merk at vi også har lagt til noe mer CSS som er nødvendig for at nivoSlider skal fungere.
#slider posisjon: absolutt! viktig; topp: 50%; venstre: 50%; bredde: 650 piksler; høyde: 350 piksler; margin-top: -175px; margin-left: -325px; -webkit-boks-skygge: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); -moz-boks-skygge: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); boksskygge: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); .nivoSlider img posisjon: absolutt; topp: 0; venstre: 0; display: none; .nivoSlider en border: 0; display: block; .nivo-skive display: block; stilling: absolutt; z-indeks: 5; høyde: 100%; .nivo-box display: block; stilling: absolutt; z-indeks: 5;
Tid til å integrere Nivo Slider. Start med å gå til http://nivo.dev7studios.com/pricing/ og laste ned jQuery-plugin-modulen. Når du er lastet ned og pakket ut, kopier du jquery.nivo.slider.js-filen til js-mappen din, opprettet i trinn 1.
Deretter må vi koble til denne filen i vårt html-dokument.
Bilde Slider kontroller
Nå har vi vårt plugin lastet ned og koblet til, vi må koble det opp til skyveknappen vår, mens du definerer noen valgfrie parametere. Ta en titt på Nivo dokumentasjonen for detaljer om alle tilgjengelige alternativer.
Accentsconagua
