Slideshow di immagini con JQuery e link ai post.

Slideshow di immagini con titolo e descrizione mostrati con effetto trasparenza e collegamenti alle pagine desiderate.

C'è una certa differenza tra image slider e content slider visto che i primi sono degli slideshow di immagini scelte dal webmaster mentre i secondi sono sempre slideshow ma di contenuti pubblicati in un sito come potrebbero essere gli ultimi articoli o i post più recenti relativi a una data etichetta.

I content slider sono in genere più complessi e hanno bisogno come minimo dei feed relativi al sito da cui attingere i contenuti. Gli image slider sono però più flessibili visto che si possono mostrare degli slideshow di immagini e linkare gli articoli che vogliamo mettere in primo piano a vantaggio dei visitatori.

Esempi tipici di content slider sono gli Ultimi post con Easy con Easy Slider anche in una seconda versione e il più semplice slideshow orizzontale Carousel. In questo articolo voglio invece presentare un image slider che è in grado di riprodurre le immagini inserite con i link ai post.

Per la sua installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#ipcei_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#ipcei_slider3 {
   width: 590px; /* 20 pixel più larghe del titolo e descrizione */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#ipcei_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.ipcei_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.ipcei_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=50)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.clear {
   clear: both;
}
.alto {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.basso {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.sinistra {
    left: 0;
    top: 0;
    width: 80px !important;
    height: 335px;
}
.destra {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 337px;
}
</style>
<div id="ipcei_slider3">
<ul id="ipcei_slider3Content">
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaQzSn8RI3T-ul6iIYV-xZbBR3cKLdOTy7cw-IWM6KXkWmWXNToAgKSM5OHfIa5JBkCgMHYfN845c0bpKS2yU01liw2SNkNGucoQDLqcNYoMgcPW-gC-gxEhz0i-xD64hEkte76-mZFM/s590/chiesa.jpg"/><a href="URL_LINK"/>
<span class="sinistra"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE SULLA SINISTRA</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzjrSJAQDqyM7j3ywUfXlnoPlva-SMMP2eLhbNBbn8BVvArEWCKyWT01X23x6fMcFQnJBtauCEq_AsrQgDooo88vFrqN0FQ1XnARGFp5pQbCJC9pjhsESP2g3RB77VUCjQJs0wArVlrY/s590/fiori.jpg"/><a href="URL_LINK"/>
<span class="sinistra"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE SULLA SINISTRA</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowWYDNcd2Cd7iAKYMUTCjz38XJA4IwQQMfjdGVv2vLcXJURNVqsB6H2HYl2jukA9WIldqYaVZsw5CSIirkBJLOWcx6Cgpo4P7mpKmrpMDHVL4e-A50SiqEu13RN6Hs4nefx_mMuWtyMw/s590/inverno.jpg"/><a href="URL_LINK"/>
<span class="destra"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE SULLA DESTRA</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9aOkhNV6lOAI9eBxgvpJvuwzkgNTjYnczHEQ7hLrySwARJ84NJUB1wMidyPm0uslpsr7npZ9WMwgcL3ztffX9W1kcRxNiik2zH3N7WZLd4kv_JSOaghi5LxiUqZCLZS5PL55yN2M-qM/s590/monte-neve.jpg"/><a href="URL_LINK"/>
<span class="destra"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE SULLA DESTRA</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvRVU62gz0nIJv3HasP0lxdc4afnQq8QPktZW5FiuVUVjJqcFNrXAe7wNfO3gumG-aUeCUKixOYJ8AFniWUBhcoAQPrLstYtj4B04_4p8bYpKJcEkcZYJ3_JZje-Ru6mH1eNePzTqdPI/s590/tracce.jpg"/><a href="URL_LINK"/>
<span class="basso"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE IN BASSO</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuePU3WNc4CFpDwzOvvephEziDU6lOQfDrLdt_e2RkK5MwA-q7LhyFAQAbyF7vBYQMCFFg2Y-3omxTbU5xjTr6_RyJpgDYxmmRnQDQmP6CMWqMEDXwiNBJlBgzeChLTtoNgKb6T0qGF_P0/s590/tramonto.jpg"/><a href="URL_LINK"/>
<span class="basso"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE IN BASSO</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf11T65z2qI9zVjJFNnUvSAn_BdbhtrBwW7HOix4MTuWsBdrDxcQJwKemmfFqICyWR5eHhNf8XJk3WCRonPW9wLa1YcSLEnXusBA6diuN7ProCLvxrSUl0yZQd8a6t339lPU9y1Ggb30/s590/villaggio.jpg"/><a href="URL_LINK"/>
<span class="alto"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE IN ALTO</span></a>
</li>
<li class="ipcei_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7MsibuMpotwLO5P362HE3pN8cW9wK_LGsJnuELgSXtNJdjo0Wx98OXo7SysE2A5ZiLK_TMteoGiyft9wR6p7ksc5-m3UhZaNtiO6_mXWqqRKMFEztGEQ5qgrfpvI92Gu7AomgFs7FxTA/s590/vulcano.jpg"/><a href="URL_LINK"/>
<span class="alto"><h3>
TITOLO IMMAGINE</h3>
DESCRIZIONE VISIBILE IN ALTO</span></a>
</li>
<div class="clear ipcei_slider3Image">
</div>
</ul>
</div>

Si va su Salva e si posiziona a piacere sopra l'area del post. Ci sarà una riproduzione continua di tutte le immagini. Si potranno scegliere dimensioni più adatte al nostro layout. Il titolo e la descrizione del post possono essere visti sulla destra, sulla sinistra, in alto o in basso a seconda della classe di stile prescelta.

timeOut: 3000 è il parametro che determina che ciascuna immagine sarà visibile per 3 secondi. Il Titolo e la Descrizione sono di colore bianco (#fff) in uno sfondo nero (#000) con opacità al 50% ( .5). Possono anche essere personalizzate le dimensioni e le famiglie di font oltre allo stile del bordo. Nella mia demo ho inserito 8 immagini, 2 per ognuno dei 4 lati ma non ci sono limiti. L'importante è mantenere la stessa sintassi che inizia con <li> e termina con </li>.

L'URL del post collegato a ciascuna immagine dovrà essere sostituito a URL_LINK mentre se si tali collegamenti si vogliono aprire in un'altra scheda del browser si modifica il codice in questo modo

<a href="URL_LINK" target="_blank" />

Concludo ricordando che se nel modello fosse già presente JQuery si può incollare il codice tralasciando le due righe evidenziate di giallo.

Fonte | Serie3 -