Share
I cursori jQuery offrono un modo semplice ed elegante per visualizzare i contenuti senza rinunciare a preziosi immobili sulla tua pagina web. Sono saliti alle stelle in popolarità e possono essere utilizzati in vari modi. Andiamo oltre gli stili popolari, scegliendo uno slider e integrandolo in un sito demo.
Una volta sul web, un'immagine sul Web aveva solo un modo per mostrarsi: come JPG piatto, GIF o PNG. Qualche tempo fa, le immagini hanno iniziato a imparare nuovi trucchi; Si sono raggruppati e hanno iniziato a comparire in slider jQuery per l'applauso dei visitatori tutto intorno.
Da allora, hanno imparato una miriade di nuovi trucchi che li rendono il materiale principale per qualsiasi web designer. Che li abbiate usati prima o no, questo tutorial vi darà un'idea dei diversi sapori dei cursori, quando usarli in un design e vi guideremo anche attraverso un'installazione di uno.
Se c'è una cosa che i cursori jQuery non hanno, è un nome coerente. Il cursore utilizza una vasta gamma di alias: galleria, carosello, promo e rotatori, ma tutti forniscono la stessa funzione generale: visualizza più elementi di contenuto in uno spazio condiviso nella pagina. Ai fini di questo articolo, mi riferirò a tutti loro come a un "cursore".
I cursori jQuery possono essere utilizzati praticamente per qualsiasi cosa, ma la maggior parte viene utilizzata per visualizzare una serie di foto in un formato di presentazione in un modo precedentemente gestito da Adobe Flash. Molti offrono un numero di effetti di transizione tra le diapositive e possono essere controllati dai pulsanti precedente / successivo, dalla navigazione a schede o miniatura.
Il numero e la varietà di cursori continua a crescere costantemente, quindi trovare un dispositivo di scorrimento adatto alle proprie esigenze non è mai stato così semplice. Sono disponibili in tutte le forme, dimensioni e dimensioni, alcune delle quali sono gratuite, il che significa che quando paghi un cursore, di solito è caricato con ottime funzionalità.
Passiamo attraverso alcuni degli stili di slider più popolari qui sotto. Tenete a mente, la maggior parte degli esempi mostrati provengono da versioni demo senza stile e tutti possono essere personalizzati con alcune conoscenze di base su CSS e leggendo la documentazione.
Uno slider molto popolare è il dispositivo di scorrimento delle foto. Molti accettano un'immagine e alcuni metadati come una didascalia, spesso estratti automaticamente dal tag alt o title.
vantaggi: In genere è più facile iniziare per i principianti. L'attenzione è posta direttamente su una grande immagine scelta. Molti hanno più effetti di transizione tra le diapositive da scorrimento, dissolvenze, zoom e altro.
svantaggi: Se hai una grande varietà di contenuti che devi mostrare come HTML, immagini o video, un dispositivo di scorrimento di contenuto misto può essere una scelta migliore - la maggior parte richiede di attenersi alle immagini.
Mentre è simile al dispositivo di scorrimento fotografico, i cursori di contenuto misto ti consentono di utilizzare più di semplici immagini. Verifica tutte le opzioni quando scegli un dispositivo di scorrimento immagine, alcune consentono HTML ma potrebbero non essere elencate nell'elenco delle funzioni principali.
vantaggi: Perfetto per la visualizzazione di video, HTML e contenuti di immagini all'interno dello stesso cursore, se necessario.
svantaggi: I cursori di contenuto misto possono essere un po 'più avanzati rispetto al tuo dispositivo di scorrimento fotografico standard.
Lo stile della galleria è spesso usato nelle applicazioni fotografiche. La navigazione è spesso composta da miniature per sfogliare le immagini della tua collezione.
vantaggi: Molto facile per gli utenti di navigare tra le immagini che vogliono vedere rapidamente.
svantaggi: Spesso i tempi occupano più spazio sulla pagina rispetto a un cursore standard per adattarsi all'immagine e a tutte le anteprime.
Pensa al cubo di Rubik, costruito sul web, senza tutti i grattacapi. Questo è fondamentalmente ciò che è un 3D Block Slider: è incredibilmente impressionante dal punto di vista visivo e può essere perfetto per aggiungere quel tocco di eccitazione a un sito.
vantaggi: Uno dei cursori più visivamente sorprendenti là fuori. Se i visitatori non l'hanno visto prima, le loro mascelle potrebbero colpire il pavimento.
svantaggi: Mentre il resto dei cursori in questo tutorial sono jQuery, la maggior parte degli Slider di blocchi 3D sono costruiti in una combinazione di Adobe Flash e XML ... che non è il formato più "standard" da utilizzare. Questi cursori possono richiedere un po 'più di tempo per "precaricare"; Poiché sono costruiti con Flash, significa anche che possono essere un po 'più complicati da installare se non si ha familiarità con esso.
Ispirato dall'effetto di scorrimento della copertura di Apple, questo effetto di scorrimento è un modo straordinario per mostrare il tuo lavoro. Se abbinato a un sito di stile minimale, questo dispositivo di scorrimento può sentirsi a casa.
vantaggi: Questo stile può essere un modo molto impressionante e molto interattivo per consentire agli utenti di sfogliare una galleria di immagini che mostrano il tuo lavoro.
svantaggi: Molti hanno una piccola barra di scorrimento o usano la rotellina del mouse o la tastiera per visualizzare le immagini che possono risultare un po 'scomode con alcuni scorrimenti involontari.
Lo slider a grandezza naturale è quello che sembra: un dispositivo di scorrimento che occupa l'intera pagina per mostrare il tuo lavoro in un modo che non può essere perso.
vantaggi: Se hai uno stile "vai alla grande o vai a casa", in realtà non diventa molto più grande di così.
svantaggi: Possono essere un po 'difficili da integrare in un sito poiché sono progettati per riempire lo schermo con il tuo lavoro. Le immagini utilizzate devono essere abbastanza grandi da riempire i nuovi schermi ad alta risoluzione.
A volte potresti trovarti in una situazione in cui desideri visualizzare una griglia di immagini e consentire una rapida navigazione senza che l'utente carichi una seconda o terza pagina.
Alcuni cursori hanno la capacità di mostrare più immagini per diapositiva o più diapositive contemporaneamente, quindi controllare l'elenco delle caratteristiche. In jCarousel Lite, sopra descritto, "visible" è impostato su 3, mostrando tre diapositive alla volta.
vantaggi: Ti consente di scorrere più elementi contemporaneamente per le volte in cui non è necessaria un'immagine o un contenuto di grandi dimensioni. Ottimo per gruppi di oggetti o quando hai la stanza sul sito.
svantaggi: Non ci sono molti svantaggi in questo stile se non quello di essere un po 'più complesso da configurare rispetto al dispositivo di scorrimento fotografico standard.
Lo stile della fisarmonica rende la navigazione attraverso gli oggetti in evidenza un po 'come sfogliare le pagine di un libro. Questo usa un classico comportamento "nascondi e rivela" mostrando semplicemente uno snippet del contenuto prima di far scorrere l'intera scatola della fisarmonica.
vantaggi: Un modo davvero unico e divertente per mostrare i tuoi oggetti. Lo stile a gradini può aiutare a rafforzare il senso dell'ordine se si utilizza un paradigma di contenuto "passo 1, passo 2, passo 3".
svantaggi: Non eccezionale per dozzine di diapositive e può essere un po 'difficile per i nuovi utenti web far funzionare gli oggetti che si aprono accidentalmente, aprendo e chiudendo con un passaggio del mouse. Considerare un clic per aprire lo stile o l'impostazione della scheda, se disponibile.
La sensazione che si ottiene quando si utilizza il grande cursore a schede è un senso di semplicità - passaggio 1, passaggio 2, passaggio 3. Un ottimo modo per mostrare cambiamenti progressivi, funzionalità o opzioni di prodotto.
vantaggi: Un'attenzione molto accattivante con uno stile adeguato. Come la fisarmonica, questo slider mostra un suggerimento su cosa c'è all'interno di ogni diapositiva, che può essere ottimo per i visitatori che cercano informazioni specifiche.
svantaggi: Potrebbe essere necessario limitare il numero di elementi che si desidera includere a meno che non si utilizzi un dispositivo di scorrimento a schede come iTunes Music Store.
Sebbene la varietà e la quantità di cursori aumenti costantemente, a volte non riesci a trovare una soluzione per la tua situazione unica.
Se stai usando molti cursori nei tuoi progetti, vale la pena di approfondire e imparare davvero come funzionano e costruirne uno tu stesso. Il miglior modo per imparare è con l'esempio.
Sezionare i cursori esistenti, vedere come funzionano e imparare da esso. Non rubare il codice di altri sviluppatori, ma concentrati su ciò che stanno facendo: animazioni, modifica dell'opacità e rivedere le impostazioni che offrono e scriverlo a modo tuo.
Con strumenti come Firebug, puoi "ispezionare" un cursore in tempo reale, guardandolo manipolare lo z-index, l'opacità o il posizionamento per spostare il contenuto da una diapositiva alla successiva.
Otterrai una maggiore comprensione di ciò che sta succedendo sotto il cofano, sarai in grado di eseguire personalizzazioni e trovare problemi più velocemente lungo la strada scavando nel maggior numero possibile di cursori per imparare come funzionano.
L'unica cosa più abbondante del numero di slider jQuery è il numero di siti che li mostrano. Piuttosto che cercare di elencarli tutti qui (ne escono di nuovi ogni settimana!), Vediamo come trovare quello giusto per te:
Una rapida ricerca su Google rivelerà che i cursori possono essere trovati in una varietà di luoghi:
Spesso intitolato "25 Utili slider di contenuti Content Slider": sono messaggi creati per raccogliere e rivedere i diversi slider disponibili al momento. Leggi i commenti e l'articolo per vedere le opinioni degli altri sulla raccolta.
I siti che offrono tutorial per la creazione di slider spesso includeranno il codice sorgente finale del progetto in modo da ottenere una guida dettagliata su come è costruito e sul risultato finale. Se non diversamente specificato, il progetto di origine è solo a scopo didattico, chiedi prima di utilizzare in qualsiasi progetto.
CodeCanyon offre un'intera categoria per i cursori premium. https://codecanyon.net/category/javascript/sliders
A volte ti capita di imbatterti in un sito con uno slider e vuoi vedere quale plugin possono aver utilizzato. Poiché JavaScript è uno script lato client, fai un view-source della pagina e guarda quali file JavaScript sono importati, le informazioni del plugin dovrebbero essere incluse nella parte superiore dello script sorgente del plugin con un URL per maggiori informazioni sul plugin da scaricare e documentazione.
Siate cortesi nello sforzo che altri hanno fatto, leggete e rispettate gli accordi di licenza inclusi e date credito laddove il credito è dovuto.
La scelta di un cursore dipende in gran parte dalla funzionalità e dalle opzioni di cui hai bisogno e dallo stile generale che stai cercando. Scegli il tipo di contenuto che desideri visualizzare, il modo in cui desideri che gli utenti lo attraversino e vedi quale dispositivo di scorrimento si adatta meglio alle tue esigenze.
Una volta che hai ristretto le tue scelte, confronta le dimensioni generali dello script e verifica se è compatibile con tutti i browser.
Alcuni cursori sono offerti in una versione "lite" come jQuery Cycle Lite se stai cercando di mantenere la dimensione complessiva del file nel tuo progetto. Spesso, la versione light manca solo gli effetti di transizione aggiuntivi, mantenendo le opzioni più popolari disponibili.
Se non sei un master di jQuery, scegli un dispositivo di scorrimento con eccezionali dimostrazioni dal vivo che puoi scaricare e documentazione per aiutarti a guidare le tue personalizzazioni.
Uno degli aspetti positivi dell'utilizzo di un dispositivo di scorrimento predefinito è che la maggior parte di essi è incredibilmente facile da riprogettare in base alle proprie esigenze. Questo processo (di solito chiamato semplicemente "skinning") non è così difficile come potrebbe sembrare. Di solito richiede solo la modifica di un semplice file CSS - la skinatura più complessa che solitamente si ottiene è quella di scambiare i grafici con cui hai creato la grafica predefinita (come sfondi e pulsanti).
Oltre agli slider di skinning, vale la pena notare che con la maggior parte degli slider, è facile cambiare la dimensione per adattarla al sito Web che stai progettando.
Posizionare un dispositivo di scorrimento in un progetto esistente non è un processo a singolo passaggio, ma la maggior parte degli script di scorrimento è fornita con una pagina di esempio di base per iniziare, l'importazione di jQuery, CSS, contenuti di esempio e l'inizializzazione del plugin con le impostazioni predefinite.
Importiamo jQuery Cycle in un rapido sito di esempio creato per lo scopo di questo tutorial.
Scarica i siti prima e dopo per seguirli.
Il sito demo è costituito da HTML di base, CSS e un'immagine che sarà il punto di partenza per l'integrazione del cursore.
Integreremo il plugin jQuery Cycle per questa demo.
Importa la libreria jQuery e il plugin Cycle nel
del tuo sito aggiungendo questo codice:Il primo script dovrebbe essere l'ultima versione di jQuery. Puoi scaricarlo da jquery.com o caricarlo dalle librerie di Google come abbiamo fatto sopra.
Il secondo script è il sorgente del plugin che abbiamo inserito nella cartella / js /.
Scambia l'attuale immagine sample_water.jpg statica utilizzata nel sito demo con un elenco non ordinato di diapositive:
Utilizzeremo solo tre immagini per iniziare, si noti l'attributo, lo useremo in seguito per comunicare al nostro plugin che questo è il contenitore delle nostre diapositive. Poiché le diapositive sono essenzialmente solo un elenco di contenuti correlati, un tag UL è una buona scelta.
Sotto la lista non ordinata di promozioni che abbiamo aggiunto sopra, aggiungeremo la navigazione per controllare le diapositive. Il plugin creerà dinamicamente i singoli collegamenti di navigazione in fase di runtime mentre aggiungi e rimuovi le diapositive dall'elenco.
Diapositiva successiva
La classe del pulsante della diapositiva successiva corrisponde al parametro "successivo" che useremo per far avanzare le diapositive manualmente.
L'indice promo è generato automaticamente se il parametro 'pager' è impostato nelle opzioni. Inserendolo manualmente, possiamo controllare dove va sulla pagina nel caso in cui lo voleste in un luogo diverso da quello in cui il plugin lo posiziona.
Aggiungiamo CSS per modellare l'elenco dei cursori. Alcuni slider come Nivo Slider hanno un foglio di stile personalizzato che puoi scaricare e iniziare ma per questa demo, aggiungiamo i nostri CSS personalizzati direttamente alla fine del file screen.css principale del sito.
/ * Rimuovi la formattazione della lista da Promo UL / LI * / #promo, #promo li margine: 0; padding: 0; list-style-type: none; / * Stili per il contenitore di navigazione promozionale opzionale * / #promonav padding: 4px; sfondo: #eee; border: 1px solid # e0e0e0; margin-top: 1px; / * Tieni premuto il pulsante successivo sul lato destro * / #promonav .next float: right; / * Stili di collegamento nella navigazione promozionale * / #promonav a padding: 0 3px; border: 1px solid #eee; text-decoration: none; contorno: 0; color: # 777; / * Stile applicato al passaggio del mouse sui link di navigazione promozionale * / #promonav a: hover color: # 000; / * L'indice ottiene automaticamente una classe activeSlide, usa questo per indicare la diapositiva corrente * / #promoindex a.activeSlide font-weight: bold; sfondo: #fff; border-color: #ccc;
A questo punto, abbiamo jQuery e il plugin importato, ma nulla dice al plug-in quale elemento della pagina è il nostro cursore o quali opzioni includere - deve essere inizializzato.
Crea un file chiamato setup.js e posizionalo nella directory / js /.
Importalo sotto gli script jQuery e Cycle importati in
area del sito in precedenza nel tutorial.È importante importare jQuery, jQuery Cycle e quindi setup.js nell'ordine esatto altrimenti il plugin non funzionerà.
All'interno di setup.js aggiungi il seguente codice:
Accentsconagua
$ (document) .ready (function () $ ('# promo'). cycle (fx: 'scrollHorz', timeout: 4000, velocità: 800, successivo: '#promonav .next', cercapersone: '#promoindex ', altezza: 200, pausa: 1);); Lasciami spiegare cosa sta succedendo nel codice qui sopra.
Iniziamo controllando se il documento è pronto con il documento. Già, altrimenti il plugin può provare a modificare elementi sulla pagina che non sono disponibili o pronti.
La prossima riga sta dicendo al plugin Cycle quale elemento stiamo usando come contenitore degli articoli che vogliamo scorrere. Nel nostro caso, il contenitore ha un ID promozionale, quindi inseriamo #promo.
Gli elementi elencati da fx in pausa sono le opzioni che stiamo passando nel plug-in. Se non ne includiamo e usiamo semplicemente: $ ('# promo'). Cycle (); il plugin userebbe le sue impostazioni predefinite. Le opzioni sono elencate in un elenco separato da virgole. Il numero e il tipo di opzioni variano in base al plug-in, ma per jQuery Cycle è disponibile all'indirizzo http://jquery.malsup.com/cycle/options.html
Le opzioni next e pager si riferiscono alla navigazione che abbiamo creato nel passaggio 5 sopra e possono essere rimosse se non si desidera includere la navigazione sul cursore.
Scarica i siti prima e dopo per seguirli.
I cursori non hanno bisogno di essere grandi cursori fotografici che si estendono su una pagina del tuo sito. Usali per visualizzare sezioni di contenuti rotanti come testimonianze, i tuoi ultimi tweet o articoli di blog popolari in aree del sito che potrebbero beneficiare della stanza in più.
Grazie per aver letto!
