Share
Il prossimo passo nella sessione Premium Pixels è Controlli Immagine di Orman's Slider. Prendiamo il PSD, lo ricostruiamo per il browser, quindi rendiamo tutto funzionante utilizzando il brillante Plugin jQuery di Nivo Slider.
Per mantenere tutto in ordine, per prima cosa creeremo la nostra struttura di cartelle. Vai avanti e crea tre cartelle denominate rispettivamente "css", "images" e "js". La cartella css conterrà il nostro foglio di stile. Le immagini sono per, beh immagini e js conterrà i nostri plugin jQuery - cursore Nivo in questo caso!
Ok, abbiamo la nostra struttura di cartelle, ora abbiamo bisogno di creare il nostro documento html. Crea questo all'interno della radice del tuo progetto. Utilizzeremo un semplice modello di base HTML5, mentre colleghiamo anche alla libreria jQuery ospitata da Google.
Controlli del cursore dell'immagine
Daremo il calcio d'inizio con alcuni stili di reset:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, sezione, riepilogo, ora, segno, audio, video margine: 0; padding: 0; confine: 0; font: inherit; vertical-align: baseline; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; 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;
Ora, prima di passare direttamente allo slider, aggiungeremo uno sfondo alla pagina. Se hai scaricato il PSD prima vedrai che c'è un livello con una sfumatura radiale che suggerisce una leggera illuminazione. Lo creeremo con uno schema ripetibile, reso leggermente più leggero del PSD. Dopo aver applicato lo sfondo, utilizzeremo alcune ombre di riquadri sul tag html per provare a replicare la luce al centro.
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); width: 100%; height: 100%; body background: url (... /images/bg.jpg) ripetizione; font-size: 100%;
Ora possiamo finalmente iniziare il nostro cursore! Il Nivo Slider è il lavoro di Gilbert Pellegrom e Michael Wright, conosciuti insieme come Dev7studios e compagni professionisti con Orman.
Ci consente di creare il nostro slider usando la quantità minima di markup possibile. Tutto ciò che dobbiamo fare è creare un div con un ID di qualsiasi cosa tu voglia; In questo caso sto usando "slider" e una classe di "nivoSlider". Quindi tutto quello che devi fare è posizionare le tue immagini all'interno del div, il gioco è fatto!
Controlli del cursore dell'immagine 
Successivamente centreremo il nostro cursore nel mezzo della pagina, se hai seguito il mio ultimo tutorial, avrai seguito il processo su come ottenere ciò. Se desideri maggiori informazioni, consulta questo articolo su CSS Tricks.
Siamo anche andati avanti e abbiamo aggiunto alcune ombre al cursore, mentre ricordavamo i prefissi del browser. Nota abbiamo anche aggiunto un po 'di CSS che è necessario per il funzionamento di nivoSlider.
#slider position: absolute! important; superiore: 50%; a sinistra: 50%; larghezza: 650 px; altezza: 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 position: absolute; top: 0; a sinistra: 0; display: none; .nivoSlider a border: 0; blocco di visualizzazione; .nivo-slice display: block; position: absolute; z-index: 5; height: 100%; .nivo-box display: block; position: absolute; z-index: 5;
È ora di integrare Nivo Slider. Inizia andando su http://nivo.dev7studios.com/pricing/ e scaricando il plugin jQuery. Una volta scaricato e scompattato, copia il file jquery.nivo.slider.js nella cartella js creata al punto 1.
Successivamente avremo bisogno di collegarci a questo file all'interno del nostro documento html.
Controlli del cursore dell'immagine
Ora abbiamo il nostro plugin scaricato e collegato, dovremo collegarlo al nostro cursore, mentre definiamo alcuni parametri opzionali. Dai un'occhiata alla documentazione di Nivo per i dettagli su tutte le opzioni disponibili.
Accentsconagua
