Come creare uno slideshow con NivoSlivder

tramite: O2O
Difficoltà: media
15

Introduzione

Se avete bisogno di utilizzare uno slideshow che sia semplice sia nell'installazione, sia nella configurazione che nell'utilizzo, allora il NivoSlivder è uno dei migliori attualmente consigliati ed anche utilizzati.
Indicato per tutti i siti web, appoggia al framework JQuery ed offre numerosi vantaggi nell'utilizzo tra cui, ad esempio, una vasta gamma di effetti grafici di transizione sulle immagini.
Vediamo insieme con questa breve e semplice guida come installarlo e come creare uno slideshow con il nuovissimo NivoSlider.

25

Occorrente

  • Computer
  • Connessione internet
  • Editor codice HTML
35

Il primo passo è scaricare il plugin in maniera semplice e veloce dal sito http://nivo.dev7studios.com che è aggiornato all'ultima versione disponibile ossia la 3.1.
Ciò significa che il nome del file sarà il seguente "nivo-slider3.1. Zip".
Il download è gratuito se usate NivoSlider come plugin di JQuery, pagherete, invece, se lo si vorrà integrare nel proprio blog wordpress.
Appena avrete terminato il download passerete a scompattarlo trovando così una serie di file, una cartella demo e una cartella Themes. La libreria JQuery - fondamentale per il funzionamento di nivoslider - è già presente nel pacchetto scarito, all'interno della cartella Scripts, nel caso non la troviate state tranquilli perché potrete ottenerla con un altro semplice download dal sito di jQuery.

45

Continuiamo ora con il lavoro per nivoslider aprendo il file demo.html, dalla casella demo, utilizzando un editor html ed osservate le parti salienti del codice.
Ecco i principali:
Nei tag head viene importato il file css con il tema di default (link rel="stylesheet" href="../themes/default/default. Css" type="text/css" media="screen") e il file css generale del plugin (link rel="stylesheet" href="../nivo-slider. Css" type="text/css" media="screen"). All'interno del tag body invece è posizionato il contenitore (div id="slider" class="nivoSlider") che rappresenta lo slideshow. All'interno del tag DIV con id="slider", potrete aggiungere i riferimenti alle vostre immagini (che vanno posizionate fisicamente dentro la cartella images): ricordatevi che per ottenere un maggior effetto visivo, le immagini devono essere tutte delle stesse dimensioni in larghezza ed altezza.
Prima della chiusura del tag BODY infine viene importato lo script di jquery (script type="text/javascript" src="scripts/jquery-1.7.1. Min. Js"), quello di nivo slider (script type="text/javascript" src="../jquery. Nivo. Slider. Js") e viene inizializzato lo slider sull'evento load della pagina, ovvero dopo che tutta la pagina è stata caricata ($(window). Load (function () { $('#slider'). NivoSlider (); };;)
Già fatto tutto!

Continua la lettura
55

Naturalmente potrete personalizzare tutto, anche il tema grafico usato dallo slideshow, gli effetti tra una foto e l'altra, la scelta se utilizzare o meno le thumbnail e perfino rendere lo slide automatico o manuale.
Insomma, avrete un mondo da scoprire!

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte allo stile delle tue pagine web? Leggi questa guida e scopri come farlo usando jQuery Custom Scrollbar....
Internet

Come realizzare uno slideshow fotografico da caricare su youtube

Per accontentare tutti gli amici ed i parenti che reclamano le foto del vostro ultimo viaggio, occorrerebbe organizzare una serata a tema, con tanto di maxischermo su cui proiettare le varie immagini e con una buona scorta di popcorn e patatine; in alternativa,...
Windows

Come eliminare la pubblicità dalle pagine web con uno script

La pubblicità sul web è sempre più martellante. Alcuni siti sono diventati addirittura innavigabili a causa degli innumerevoli pop-up che si fiondano sul nostro monitor senza pietà, con una violenza inaudita. Molti non sanno che è possibile filtrare...
Programmazione

Come realizzare un finestra modale con jQuery

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare sulla finestra “padre”. Nella progettazione delle interfacce, le finestre modali...
Programmazione

Come creare un slideshow in Javascript

Se avete bisogno di un slideshow in javascript per il vostro sito siete nel posto giusto! Un slideshow è utile se volete mostrare un piccolo quantitativo di immagini e, qualora lo si desiderasse, si può accompagnarle da una didascalia. Esistono diverse...
Software

Come costruire un menu con immagini animate in jQuery

Stai realizzando un sito web? Oltre ad aver curato in tutti gli aspetti l'architettura dei suoi contenuti, avrai subito notato che bisogna prestare particolare attenzione al menù, quindi conviene anche renderlo accattivante, piacevole a vedersi. Il tutto,...
Software

Adobe Muse: come creare uno slideshow

Adobe Muse è un particolare software che permette a chi ne usufruisce di creare e rendere pubblici i più diversi e differenti siti web dinamici, questi facilmente visualizzabili tramite un classico personal computer desktop oppure un moderno dispositivo...
Programmazione

Come nascondere i paragrafi in Jquery con un click

Tutte le pagine web che quotidianamente utilizziamo sono ricche di effetti di ogni tipo, la cui presenza è garantita dall'impiego del linguaggio JavaScript. L'utilizzo di tale linguaggio non è del tutto immediato: l'esigenza di semplificare la creazione...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.