Share
Următoarea sesiune Premium Pixels este Orman's Image Slider Controls. Vom lua PSD-ul, îl vom reconstrui pentru browser, apoi vom face întregul lucru funcțional folosind genialul Plugin al java Slider Nivo.
Pentru a păstra totul ordonat, vom crea mai întâi structura noastră de directoare. Continuați și creați trei dosare numite "css", "images" și, respectiv, "js". Dosarul CSS va conține foaia de stil. Imaginile sunt pentru, imagini de bine, iar js va conține pluginurile noastre jQuery - slider Nivo în acest caz!
Bine, avem structura noastră de dosare, acum avem nevoie pentru a crea documentul html. Creați-o în cadrul rădăcinii proiectului dvs. Vom folosi un șablon de bază HTML5 simplu, în timp ce vom face legătura cu biblioteca jQuery găzduită de Google.
Controalele pentru glisorul imaginii
Vom schimba lucrurile cu unele stiluri de resetare:
html, body, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, h6, p, bloc, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, formular, etichetă, legenda, tabel, caption, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, embage, fig figtion, footer header hgroup meniu nav, secțiune, sumar, timp, marcă, audio, video marja: 0; umplutura: 0; frontieră: 0; font: inherit; aliniere verticală: linia de bază; / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: ";
Acum, înainte de a intra în cursă, vom adăuga un fundal paginii. Dacă ați descărcat PSD înainte de a vedea că există un strat cu un gradient radial care sugerează o iluminare subtilă. Vom crea acest lucru având un model repetabil, ușor mai ușor decât PSD. După aplicarea fundalului, vom folosi niște umbre de inserție în eticheta html pentru a încerca să reproducem lumina în centru.
html -webkit-box-shadow: inset 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); -moz-box-shadow: inset 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); box-shadow: inset 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); lățime: 100%; înălțime: 100%; corp background: url (... /images/bg.jpg) repeta; font-size: 100%;
Acum putem începe în cele din urmă glisorul nostru! Nivo Slider este opera lui Gilbert Pellegrom și Michael Wright, împreună cunoscute sub numele de Dev7studios și chums profesionale cu Orman.
Aceasta ne permite să creăm cursorul nostru folosind o cantitate minimă de marcare posibilă. Tot ce trebuie să faceți este să creați un div cu un ID de ceea ce vă place; Folosesc "slider" în acest caz și o clasă de "nivoSlider". Tot ce trebuie să faceți este să plasați imaginile în div, asta este!
Controalele pentru glisorul imaginii 
Apoi ne vom concentra glisorul în mijlocul paginii, dacă ați urmat ultimul meu tutorial, ați trecut prin procesul de realizare a acestui lucru. Dacă doriți mai multe informații, consultați acest articol pe CSS Tricks.
De asemenea, am mers în față și am adăugat niște umbre de box la cursor, în timp ce amintim prefixele browserului. Rețineți că am adăugat și alte CSS-uri care sunt necesare pentru ca nivoSlider să funcționeze.
#slider poziție: absolut! important; top: 50%; stânga: 50%; lățime: 650 de pixeli; height: 350px; margin-top: -175px; margin-left: -325px; -webkit-box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); -moz-box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); .nivoSlider img poziție: absolută; top: 0; stânga: 0; display: none; .nivoSlider a frontieră: 0; display: block; . nivo-slice afișare: bloc; Poziția: absolută; z-index: 5; înălțime: 100%; .nivo-box display: bloc; Poziția: absolută; z-index: 5;
Este timpul să se integreze Sliderul Nivo. Începeți prin rubrica http://nivo.dev7studios.com/pricing/ și descărcați pluginul jQuery. Odată descărcate și despachetate, copiați fișierul jquery.nivo.slider.js în folderul js creat înapoi în Pasul 1.
Apoi, va trebui să conectăm acest fișier în documentul nostru html.
Controalele pentru glisorul imaginii
Acum, când plugin-ul nostru a fost descărcat și legat, va trebui să-l conectăm la glisorul nostru, definind în același timp unii parametri opționali. Consultați documentația Nivo pentru detalii despre toate opțiunile disponibile.
Accentsconagua
