Nivo Slider Responsive con testi HTML animati
By Andrea Marchetti
@marchetti_design
Oggi andiamo a vedere come trasformare il già ottimo Nivo Slider in uno slider con qualcosa in più, aggiungendo un titolo e una preview di testo animata per ogni slide. Per fare questo utilizziamo la funzione html caption già presente nello slider e due funzioni javascript che eseguiranno le animazioni sui testi in entrata e in uscita al passaggio delle slide.
1) Inizializziamo lo Slider base:
Per funzionare nivo slider ha bisogno jquery, del file jquery.nivo.slider.js e dello stile nivo-slider.css. Richiamiamo i file nell’header della nostra pagina e inizializziamo lo slider.
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:"sliceUpDownLef",
pauseTime:6000,
animSpeed:850});
});
</script>
Impostimo il codice html per visualizzare le immagini dello Slider
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/london-bridge.jpg" alt=""title="#htmlcaption1" />
<img src="img/skyline.jpg" alt="" title="#htmlcaption2" />
<img src="img/canada-water.jpg" alt="" title="#htmlcaption3" />
</div>
</div>
2) Aggiungiamo la funzione HTML caption:
Per utilizzare le caption in Html aggiungiamo per ogni slide un div che ha come id il contenuto dell’attributo title della slide ottenendo il seguente codice:
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/london-bridge.jpg" alt=""title="#htmlcaption1" />
<img src="img/skyline.jpg" alt="" title="#htmlcaption2" />
<img src="img/canada-water.jpg" alt="" title="#htmlcaption3" />
</div>
</div><div id="htmlcaption1" class="nivo-html-caption">
</div>
<div id="htmlcaption2" class="nivo-html-caption">
</div>
<div id="htmlcaption3" class="nivo-html-caption">
</div>
Ora nei div collegati a ciascuna slide impostimao un titolo un testo e un link
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/london-bridge.jpg" alt=""title="#htmlcaption1" />
<img src="img/skyline.jpg" alt="" title="#htmlcaption2" />
<img src="img/canada-water.jpg" alt="" title="#htmlcaption3" />
</div>
</div><div id="htmlcaption1" class="nivo-html-caption">
<h1>London Bridge</h1>
<p>London Bridge è un ponte sul Tamigi a Londra, che collega la City of London al borgo londinese di Southwark. <a href="">Continua…</a></p>
</div><div id="htmlcaption2" class="nivo-html-caption">
<h1>Skiline from DLR</h1>
<p>La Docklands Light Railway (DLR) è una metropolitana leggera che serve l’area ricostruita della zona del Docklands nell’est di Londra. <a href="">Continua…</a></p>.
</div><div id="htmlcaption3" class="nivo-html-caption">
<h1>Canada Water</h1>
<p>Canada Water è una stazione della metropolitana di Londra, situata a Rotherhithe, nella parte meridionale di Londra e facente parte della Travelcard Zone 2. <a href="">Continua…</a></p>
</div>
3) Impostiamo con jquery e i CSS la tipologia di animazione
Ora che abbiamo le nostre caption per ogni slide dobbiamo animarle. Nel nostro esempio le caption scorreranno da sinistra a destra e poi scompariranno facendo il percorso inverso. Per fare questo posizioniamo tramite i Css le caption e definiamo lo stile dei titoli e dei testi:
/* Caption styles */
.nivo-caption {
position:absolute;
left:-400px;
bottom:70px;
width: 300px;
color:#fff;
z-index:8;
overflow: hidden;
display: none;}
.nivo-caption h1 {
padding:10px 20px;
margin:0;
background:#fff;
color:#000;
opacity: 0.8;
font-weight: normal;
float: left;}
.nivo-caption p {
padding:10px 20px;
margin:0;
background:#000;
opacity: 0.8;
font-weight: normal;
float: left;
}
Poi utlizziamo ll metodo animate() di jquery in due funzioni moveIn (animazione in entrata) e moveOut (animazione in uscita) per realizzare gli spostamenti
<script type="text/javascript">function captionMoveIn() {
$(‘.nivo-caption’)
.fadeIn("fast")
.animate({left: "0px"},1400)
;};function captionMoveOut() {
$(‘.nivo-caption’)
.animate({left: "-400px"},1400)
.fadeOut("fast")
;};</script>
Cambiando i valori di left e bottom possiamo personalizzare la nostra animazione, è possibile utilizzare tutti i parametri del metodo animate, si posso realizzare per esempio animazioni sulle dimensioni degli elementi.
4) Richiamiamo le funzioni per le animazioni nello slider
Le funzioni verranno eseguite dopo il caricamento della slide (afterLoad) e prima del cambio di slide (beforeChange).
<script type="text/javascript">
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:"sliceUpDownLeft",
pauseTime:6000,
animSpeed:850,
afterLoad: function (){captionMoveIn();},
beforeChange: function (){captionMoveOut();captionMoveIn();}});
});
</script>
4) Rendiamo le caption responsive
Con qualche piccolo accorgimento tramite le media queries rendiamo il nostro slider ottimizzato per mobile
@media (max-width: 767px) {#wrapper{width:100%;position: relative; margin: 100px auto;}
.nivo-caption {bottom:0px;}
.nivo-caption h1 {font-size:110%;}
.nivo-caption p {font-size:90%;}
.nivo-controlNav {display:none;}}
@media (min-width: 768px) and (max-width: 980px) {#wrapper{width:100%;position: relative; margin: 100px auto;}
}
Il risultato è uno slider d’impatto dall’alto potenziale comunicativo che possiamo adattare a molte situazioni.
L’esempio e il file per il downlad sono disponibili qui di seguito, nel prossimo articolo vedremo come integrare questo slider con un sito basato su WordPress..
Stay tuned!
Potrebbero interessarti:
Ottimo post, complimenti davvero!
Grazie Davide!
ciao, volevo avvisarti che nella demo la descrizione delle foto, dura quasi un secondo, per poi scomparire e ricomparire ! comunque ottima guida!
Ciao grazie della segnalazione, probabilmente sul browser che utilizzi l’animazione non viene visualizzata correttamente. Lo slider è testato sulle utlime versioni di Explorer, Chrome, Safarie e Firefox
[…] 1. NIVO SLIDER […]
Ciao, ottima guida!
Complimenti!
Vorrei chiederti:
se volessi fare apparire i due elementi caption seperatamente, cioè prima l’h1 e subito dopo il contenuto di come potrei fare?
Scrivere qualcosa del genere?
function captionMoveIn() {
$(‘.nivo-caption h1’).fadeIn(“fast”).animate({left: “0px”},1400, function(){
$(‘.nivo-caption p’).fadeIn(“fast”).animate({left: “0px”},1400);
)
;};
Che ne pensi?
Grazie.
Ciao Roberto,
nel esempio viene spostato un div che contiene h1 e p, se li vuoi gestire separatamente devi spostarli singolarmente. Il codice che hai scritto sembra Ok
Ciao Andrea, sto provando il tuo slider … molto bello!ma si può integrare in una pagina html? io sono poco esperto di codici per cui potrei dire una cavolata: ma ho notato che una volta finito lo slide delle prim 3 foto poi nel ricominciare non vedo l’animazione del testo nella prima foto, è normale che sia così ma se io volessi che ci fosse l’animazione del testo come posso fare?
Ciao Giovanni, lo slider è realizzato in html quindi si può inserire in qualsiasi pagina html.
Per quanto riguarda l’animazione nella demo non da problemi, ti consiglio riscaricare il file e di fare attenzione quando modifichi i settaggi delle animazioni..
Ciao Andrea, ottimo lavoro come sempre!!
Mi chiedevo..posso utilizzare questo slider per realizzare un’effetto simile alla pagina http://www.diehlgroup.com/..penso dovrei impostare le dimensioni dello slider al 100% giusto!?!e come gestisco l’altezza delle foto per far si che si adattino alla pagina e non “auto”?!!?
Hai altre soluzioni a riguardo?!!?
Grazie mille e complimenti per l’ottimo lavoro..il tuo blog sta diventando una risorsa preziosa!!
Ciao Cristian, grazie 😉
si dovresti impostare la dimensione del wrapper come width: 100% e height:auto
Per la grandezza delle immagini si potrebbero utilizzare dei div con height:100% e background impostato come in questo articolo: http://css-tricks.com/perfect-full-page-background-image/
Potrebbe essere un spunto per un futuro articolo,
Grazie..
Grazie mille Andrea!!!
Provo subito e ti faccio sapere!!
A presto
Ciao Andrea,
per il wrapper ok..impostando widht 100% e height auto ottengo l’effetto a tutto schermo voluto..non ho ben capito la storia dei div con height 100%..ho provato il seguente codice
Testo del div
.........
settando il div image height 100% e background size come nell’articolo ma niente!!
Sicuramente non ho centrato quello che intendevi dire!!
Al max cerco un altra soluzione
Grazie mille
Ho scordato il codice
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<div id="image">
<img src="../img/slide1.jpg" alt="" title="#htmlcaption1" />
</div>
<div id="image">
<img src="../img/slide2.jpg" alt="" title="#htmlcaption2" />
</div>
<img src="../img/slide3.jpg" alt="" title="#htmlcaption3" />
</div>
</div>
Ciao Cristian, appena ho tempo ci lavoro un su..
Cristian, ecco l’articolo:
http://www.marchettidesign.net/2013/06/slider-responsive-full-screen-con-testi-animati-utilizzando-flex-slider/
Ciao, sto lavorando su un sito non ancora online ( se vuoi posso passarti il link attivo per mail ) che utilizza nivo slider su portale xoops.
I testi sono inseriti sul piede dell’immagine ma la cosa cambia poco per il mio problema che è questo : se in questi testi oltre ad un link ( che del resto è già presente sull’immagine dalla pagina slider.html ) volessi inserire una parte “dinamica” , cosa possoi fare ?
Per esempio: se dovessi inserire in automatico dei dati che cambiano continuamente, utilizzando, ovviamente, una query in MySql e php al posto della stringa “title” … come posso fare ?
La cosa sarebbe facilissima se potessi sostituire la chiamata a slider.html con una a slider.php … ma non conoscendo Jquery è probabile che abbia detto una castroneria…
C’è una soluzione?
Ciao Pino,
ho pubblicato un articolo su come interfacciare nivo slider con un sito realizzato su piattaforma wordpress, forse può esserti utile:
http://www.marchettidesign.net/2012/12/integrare-uno-slider-con-wordpress/
Ciao Andrea. Davvero complimenti per il tuo blog.
Sono alle prime armi per quanto riguarda jquery, ma non mi perdo d’animo.
Volevo chiederti, quando scrivi:
“Richiamiamo i file nell’header della nostra pagina e inizializziamo lo slider”
Attendo risposta.
Grazie
Ciao Antonio,
ti consiglio di guardarti una guisa base su jquery tipo questa:
http://www.html.it/guide/guida-jquery/
Grazie mille
ciao,
sto cercando di modificare lo slider, ma mi dà un paio di problemi:
1. se sposto i cursori delle slide (i bottoncini verdi) e poi li provo dopo il primo click smettono di funzionare. Non compare nemmeno il pointer all’hover…
2. Non riesco ad eliminare le thumb in alto a sinistra, sai come si fa?
Grazie mille
Mart
(testati sull’ultima versione di chrome e safari)
Ciao Martina,
ti consiglio di ricontrollare il codice css che hai modificato e di stare attenta hai posizionamenti sopratutto gli z-index, procedi per piccoli passi e testa di volta in volta il codice 😉
Grazie 🙂 alla fine ho scaricato l’originale e mi sto muovendo su quello… poi proverò ad applicare le tue mediaqueries per il responsive
Ciao, ottima guida, vorrei però apportare una semplice modifica che non riesco a fare, vorrei far si che le slide prendessero la larghezza dello schermo del pc, su smartphone già vengono adattate, invece sul pc vengono le linee bianche ai lati. quindi come faccio a impostare la larghezza delle slide a tutto schermo??
Grazie mille dell’attenzione 🙂
Ciao Andrea,
imposta il wrapper con widht: 100% e height: auto;
Ciao Andrea,
l’esempio che proponi si può usare sulle proprie pagine web senza limitazioni, o ci possono essere problemi di copyright? Grazie
Ciao Max,
utilizzalo pure senza problemi..
Ciao Andrea, una domanda…volendo adattare il contenuto dei caption per tutta la lunghezza verticale della foto, che parametri dovrei modificare?
Ciao Alessandro,
devi assegnare al div che vuoi alto come la pagina height: 100% 😉
ciao Andrea, complimenti anch’io sono alle prime armi e cerco di crescere guardando tutorial, leggendo studiando guide.
Ho un problema con lo slider se visualizzato su Iphone le immagini dopo la prima che viene visualizzata correttamente le altre restano sdoppiate verticalmente. In pratica la stessa immagine è visualizzata doppia.
Grazie
Roberto
Ciao Andrea, ho utilizzato la slide in questo sito: http://www.fuocobio.it ma ho notato che, per 1 secondo circa, le immagini appaiono “incolonnate” e poi si ricompattano nella slide. Le immagini che ho utilizzato hanno un peso di appena 45-50 kb ed ho provato a caricarle da due diversi hosting ma con risultati simili. Più la connessione è lenta, più tempo ci vuole a far sparire questo brutto effetto. Da cosa potrebbe dipendere? Grazie mille!