Creare Slide immagini Html

Inserire uno slide in pagina Html con NivoSlider

Oggi voglio mostrarvi come creare una slide immagini HTML, ovvero vediamo come costruire uno slideshow all’interno della tuo codice, in modo semplice e seguendo dei piccolissimi passi. Spesso si pensa che per costruire delle pagine web accattivanti, ricche di effetti ci voglia molta conoscenza del codice; in realtà basta conoscere i passaggi giusti per implementare la nostra pagina web secondo il nostro gusto e regalare una user experience unica all’utente. Tante volte ci capita di dover inserire in una pagina Html, uno slider o un carosello per alcune immagini. Girovagando in rete troviamo milioni di plugin, ma quale scegliere e’ sempre difficile. Sperimentandone sempre di nuovi, voglio soffermarmi su quello piu’ semplice, che svolge al massimo il suo dovere e che e’ facile da inserire nella nostra pagina Html. Insomma uno slideshow bello ma che non impegna: NivoSlider!

Inserire una slide di immagini in HTML

Partiamo. Apriamo la pagina Html, posizioniamoci sulla riga dove vogliamo che appaia lo slide e scriviamo:

<div id="slider" class="nivoSlider">//la classe se la vogliamo modificare bisogna modificare anche il file style.css
<img src="images/toystory.jpg" alt="" />//img che vogliamo inserire
<a href="http://iwebdesigner.it"><img title="Questo e' un esempio di inserimento slide" src="images/up.jpg" alt="" /></a>
<img src="images/walle.jpg" alt="" />
<img title="#iwebdesigner" src="images/nemo.jpg" alt="" /></div>
<div id="iwebdesigner"><strong>Questo</strong> e' un esempio in <em>HTML</em> di slide caption con  <a href="#">un link</a>.</div>

Questo codice inserisce all’interno del nostro div la galleria slide, con le relative immagini che vogliamo far visualizzare. Per incorporare NivoSlider, dobbiamo inserire i riferimenti al codice css della galleria e agli script jquery della stessa.

Partiamo dal foglio di stile.

In riferimento al codice Html, all’interno del <head> dobbiamo inserire queste righe:

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Script Jquery.

Sempre nella sezione <head> della nostra pagina Html, inseriamo anche:

 <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script><script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() {
$('#slider').nivoSlider();
});
// ]]></script>

Una volta inserito tutto questo nel nostro codice Html, se lanciamo la pagina, otterremo una pagina del genere:

creare slide immagini in html

Il gioco e’ fatto, abbiamo inserito una galleria all’interno della nostra pagina. Se volessimo cambiare le dimensione delle foto, la posizione e quanto altro ancora, dobbiamo intervenire sul file, gia’ integrato nel Html, chiamato style.css…Ma questo lo vedremo in un prossimo articolo.

Demo

Download

Creare una Slide di immagini

Eccoci giunti alla fine di questi semplici passaggi che ci hanno permesso di inserire una slide di immagini nel nostro codice HTML. In pochi passi si riesce a popolare la nostra pagina web con la galleria fotografica o di immagini che più ci interessa. Ovviamente questo è solo un esempio, ma se provate a personalizzarlo secondo le vostre esigenze, vedrete che otterrete una pagina web altamente professionale ed accattivante. Buon lavoro!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *