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

Gli 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

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.

 

 

<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>

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: