Share
De volgende stap in de Premium Pixels-sessie is Orman's Image Slider Controls. We nemen de PSD, herbouwen deze voor de browser en maken het hele ding functioneel met behulp van de briljante plug-in voor Nivo Slider jQuery.
Om alles netjes te houden, maken we eerst onze mappenstructuur. Ga je gang en maak drie mappen genaamd "css", "images" en "js" respectievelijk. De CSS-map bevat ons stylesheet. Afbeeldingen zijn voor, well images, en js zal onze jQuery plug-ins bevatten - Nivo slider in dit geval!
Oké, we hebben onze mappenstructuur, nu moeten we ons html-document maken. Maak dit binnen de root van uw project. We gebruiken een eenvoudige HTML5-basissjabloon en koppelen ook aan de jQuery-bibliotheek die door Google wordt gehost.
Beeldschuifregelaar
We beginnen met een aantal resetstijlen:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acroniem, adres, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dd, ol, ul, li, fieldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, embed, figuur, figcaption, footer, header, hgroup, menu, navigatie, uitvoer, robijn, sectie, samenvatting, tijd, markering, audio, video margin: 0; opvulling: 0; rand: 0; lettertype: inherit; vertical-align: basislijn; / * HTML5 weergave-rol reset voor oudere browsers * / artikel, opzij, details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block; body line-height: 1; ol, ul lijststijl: geen; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; a text-decoration: none;
Voordat we in de schuifregelaar springen, voegen we nu een achtergrond toe aan de pagina. Als je de PSD hebt gedownload voordat je ziet, is er een laag met een radiale kleurovergang die enige subtiele belichting suggereert. We maken dit door een herhaalbaar patroon te hebben, iets lichter gemaakt dan de PSD. Nadat we de achtergrond hebben toegepast, gebruiken we een paar ingevoegde doosschaduwen op de html-tag om te proberen het licht in het midden te repliceren.
html -webkit-box-shadow: inzet 250px 250px 250px rgba (0,0,0, 0,25), inzet -250px -250px 250px rgba (0,0,0, 0,25); -moz-box-shadow: inzet 250px 250px 250px rgba (0,0,0, 0,25), inzet -250px -250px 250px rgba (0,0,0, 25); vakschaduw: inzet 250px 250px 250px rgba (0,0,0, 0,25), inzet -250px -250px 250px rgba (0,0,0, 25); Breedte: 100%; height: 100%; body background: url (... /images/bg.jpg) herhalen; font-size: 100%;
Nu kunnen we eindelijk onze slider starten! De Nivo Slider is het werk van Gilbert Pellegrom en Michael Wright, samen bekend als Dev7studios en professionele vrienden met Orman.
Hiermee kunnen we onze schuifregelaar maken met zo min mogelijk markeringen. Het enige wat we moeten doen is een div maken met een ID van wat je maar wilt; Ik gebruik in dit geval de "schuifregelaar" en een klasse "nivoSlider". Dan hoef je alleen maar je afbeeldingen in de div te plaatsen, dat is alles!
Beeldschuifregelaar 
Vervolgens centreren we onze schuifregelaar in het midden van de pagina. Als je mijn laatste zelfstudie hebt gevolgd, heb je het proces doorlopen om dit te bereiken. Als je meer informatie wilt, bekijk dan dit artikel over CSS-trucs.
We zijn ook doorgegaan en hebben wat vakschaduwen aan de schuifregelaar toegevoegd, terwijl we de voorvoegsels van de browser hebben onthouden. Merk op dat we ook wat meer CSS hebben toegevoegd die nodig is om nivoSlider te laten werken.
#slider positie: absoluut! belangrijk; boven: 50%; Links: 50%; Breedte: 650 pixels; Hoogte: 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); vakschaduw: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); .nivoSlider img position: absolute; top: 0; left: 0; Geen weergeven; .nivoSlider a border: 0; display: block; . nivo-slice display: block; positie: absoluut; z-index: 5; height: 100%; .nivo-box display: block; positie: absoluut; z-index: 5;
Tijd om de Nivo Slider te integreren. Begin door naar http://nivo.dev7studios.com/pricing/ te gaan en de jQuery-plug-in te downloaden. Eenmaal gedownload en uitgepakt, kopieert u het bestand jquery.nivo.slider.js naar uw js-map die u in stap 1 hebt gemaakt..
Vervolgens moeten we naar dit bestand linken in ons html-document.
Beeldschuifregelaar
Nu we onze plug-in hebben gedownload en gekoppeld, moeten we deze koppelen aan onze schuifregelaar, terwijl we enkele optionele parameters definiëren. Bekijk de Nivo-documentatie voor meer informatie over alle beschikbare opties.
Accentsconagua
