Come inserire uno slideshow di immagini con effetti casuali con Nivo Slider.

nivo sliderGli slideshow di immagini sono certamente uno dei widget più amati anche se uno dei più difficili da installare e uno di quelli che presentano più spesso delle incompatibilità.

La maggior parte di questi gadget utilizzano la libreria JQuery che è il top per la realizzazione di queste personalizzazioni.

Tra le tante soluzioni disponibili per il framework jQuery, Nivo Slider è tra le più apprezzate. Questo plugin, infatti, coniuga mirabilmente semplicità d’uso e ampiezza delle opzioni di personalizzazione con slideshow orizzontali delle miniature anche in versione minimalista.
L'aspetto del gadget è il seguente
slideshow-nivo-slider
con i bottoni di navigazione in basso e le frecce per spostarsi tra le varie immagini. Il Titolo e la Descrizione degli articoli collegati a ciascuna foto possono essere visualizzati in basso su una barra opaca.

Si possono inserire un numero vario di immagini. L'unica limitazione è che non si superi la larghezza del layout delle foto. Quando si passa con il cursore sopra a una immagine cessa immediatamente la riproduzione dello slideshow. Gli effetti inseriti sono ben 16, si visualizzano in modo casuale e provengono dallo script Nivo Slider.

Per la installazione del widget si va su:
 Layout > Aggiungi un gadget > HTML/Javascript
e in Sezioni del sito si incolla il seguente codice dove possono essere personalizzati.
nivo slider1
 
 
<style type="text/css">
/* <![CDATA[ */
    #NivoContenitore           {position: relative;display: block;}
    #NivoSlideshow               {position:relative;width:512px  !important;height:225px  !important;min-height:200px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeLjBrTx90PPXdkxaQQzDP8TJpWEeoNchQz1LjH4Kz9WmKOL1-0YsAhbjcC_7NOWMiBtjM1_VeKwomVmxX_aPU9tPuzoDdRpOGhfRovAz9MuShJTzKem5eND45ret-301C-wbG76OGcIL/s32/loading9.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);box-shadow: 0px 2px 4px rgba(0,0,0,0.5);}
    #NivoSlideshow img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:96;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:95;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:95;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000000;color:#ffffff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:98;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:52%;z-index:99;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGftLAOR0MVrhjg2q2bYSZgw0Um5HpKYUhvH5Dhr76xreJGR5bUYz1kyjCIKCqtVR0WDYw6r9Up0jarKpGs7mYvRQfqVpG3WJxSGDbX8tvQRfYcSWviYEeWlwUL2HzKY1LuYCxqcJG3k_B/s60/navigazione.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:99;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDdbMUHu-nqELlvaWw_co7zj_s47CR_ryUeixXdee4xD-rpfejNLfehAIcHx_xIYf8J5R9PD03LS5GcnNwB_KiS8panF8qUCuDELmtt98JkEaEAZ80fHYvS1KP4SPsCLD99mpJ83vhq9D/s40/bottoni.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#NivoSlideshow').nivoSlider({
        effect           : 'random',
        slices           : 10,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 1200,
        pauseTime        : 3500,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : true,
        pauseOnHover     : true,
        captionOpacity   : 0.8    });
});
/* ]]> */
</script>
<div id="NivoContenitore">
    <div id="NivoSlideshow">
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuR9x8IMeNgLASrI8eLRSbLlZbiEXXrKBC3vu7EPp6kIussi05sYwJZIuShSRDw3K0MhkltdLlBRXlfGHwx2EyNbUzHUIq_TG-fxcjPhF5R-1_1sOYDdBRRvkm3p6q7HA8zm_igrzZ4IYL/s600/natura1.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 1"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXmpLL2mHf50_E_G9Tc5jPmQrarityruvOoU_znJkJIjzg5Jy1P1RtyyR3GtLYe8kHjS8kGxYPJK2X63egytjM4UKS9OidcodqqM_5mdhT2mMY5DAto9AFWc2MjCbO9QCh8eFssfj3qIWf/s600/natura2.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 2"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipUKMv8SWeLbpEo6gjFntgnGrAuctATJHnXooKaAEVDzFWh38lLAK33qKH85KmdMRQWWEGCLWZQ-Zlywy14z8tHnJG6GXZWeG9frOBJppDP8UBDV_7RsNPgX8A1ECvAlnHPGgGmvDgJNar/s600/natura3.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 3"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtaZN782rWeaxEKSwStnQpisHmlDKFMukkOBtouz_03z5AQXpMLMok6NiPJarQQcYJJftJy92ZPoiHScONxGh0KqJLujidWjEJ3qVQMgwqHh3YPe_TXs5tJpbXhUJ2JfCvg-AqnGT68ipP/s600/natura4.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 4"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhPM040oFvcpPDha6V6PlEgc4qjNcKBlFyNxkEUb5xlNgie5rUKp0eA_ugvT7V47J8EPsJmgtizBr1widmxTdpnYf6EMRMS1G-8M5OsqJXf2USsm3_kLmOdj_sCL-S10eWE4wvLxbIrNn/s600/natura5.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 5"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWnz5BobPVhvsqMMQQA53AkuecYKf40-wVQRq53XID6q-45Oj_mj0z-bTGrt6wGlueTEnEJxB72bdGb_u7tNsfq4Onz3b76fyJIIhJoFBdWrNCwcoPKqH5o_boGhEh1A2ltuN8Par2XzvV/s600/natura6.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 6"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWf_3LBMLUKvNyM0d0S3ApOsJT7_IKloMwg_xIX9RUhHV8eclMR8DEfU4aA6f5bpnhA3cf1mhgE38n8LsugokEF2tYYyHq-6KZ_HOWMHzy-rKoPtlwj3So0V_aeyjUTPLtl3ojvNayj7N/s600/natura7.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 7"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9720ghwiDqan-Vj0Vsg1t6047yuXlggp3eSp6HWzYVqQHr9XU0UQORyQffVL-mHV22xMHLNEi125RGWyvuV_qiMFTHvghJJCNXjuh6FM_GFVnCWQklTeaZi8YXjA3E2EBl6M-rEI7isf/s600/natura8.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 8"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikeae25-sZaYoWx-O-eQGkWmXXX8nu1CkU-NE94IYAXBJTUTR3yub7jJp0GFPsLC0jnZ-hK7CLjYLYei2mCOkD-lPZSvCCxHCjoZTR6dU80GJUz7Anil-tYM86h7TCjbnNMUCqbPOSl4Xv/s600/natura9.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 9"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K2dcGcf0Z-okbi5brHloo-0027axmUoSOjIVjDGVFMApXD8Hm7B05jArfrUTsOsKczdRUeTJ5bGSAmUV3PjdApyOwskaSJpBfKTfy3hHmd3m3c4A3Ssvw4T2nYudiMKu5bJVMO5YvhlU/s600/natura10.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 10"/></a>       
    </div>
</div>
nivo slider2
I più importanti sono:
    Le dimensioni dello slideshow. Quelle di default sono 512 di altezza e 225 di larghezza
    Il colore dello sfondo e  del testo della descrizione rispettivamente #000000 e #FFFFFF. I meno esperti possono consultare il post sui codici dei colori.
    I parametri dello script per impostare velocità, durata della pausa e opacità della descrizione
    Gli URL delle immagini da inserire insieme al Link del post collegato, al Titolo e alla Descrizione e al Tag Alt per questioni di SEO.
Si salva e si posiziona il widget con il mouse.
 

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:


Commenti

  1. bellissimo . Grazie . Si può allargare ? ciao e grazie

    RispondiElimina
  2. Ciao! Bellissimo articolo grazie! Ho un enorme problema però: ho messo il codice in un gadegt su un blog di prova e funziona... poi l'ho messo sul mio e non va!! C'è il cerchietto che gira come se stesse carcando... ma continua all'infinito senza fare partire lo slideshow!
    cosa poò essere?? grazie mille se mi risponderai!!

    RispondiElimina
  3. Non credo che il problema che hai lamentato abbia qualcosa a che vedere con questo widget. Prova a caricare le foto cambiando browser. Ho letto nel Forum di Blogger che anche altri utenti hanno trovato delle difficoltà in quel senso.

    RispondiElimina
  4. Ciao! Ho provato anche io essendo alla ricerca di un'alternativa per le slide, ma ho lo stesso problema: non va, anche per me cerchietto che carica all'infinito...ho provato a visualizzare da diversi browser ma niente da fare :(

    RispondiElimina
  5. Può dipendere dal fatto che nel tuo modello sia già presente del javascript che vada a interferire con quello di questo slideshow


    RispondiElimina
  6. Splendido! E se volessi eliminare il box con il titolo delle singole foto?

    RispondiElimina
  7. splendido!e per eliminare i bottoni?

    RispondiElimina

Posta un commento

nome-foto