Pubblicato il 25/09/13e aggiornato il

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.

slideshow-immagini

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://lh3.googleusercontent.com/-a25EMoeoyqA/UkKaUNzk6fI/AAAAAAAAjlM/LhCxcsk4NzM/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://lh3.googleusercontent.com/-ifY87auJoXU/UkKaWcHzDhI/AAAAAAAAjlU/AZnHG74yt3Q/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://lh6.googleusercontent.com/-RHzpXk63YVI/UkKadYOKQhI/AAAAAAAAjlc/uQIgEYPrEdQ/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://lh4.googleusercontent.com/-PurO6FbS0cc/UkKaf_S6CqI/AAAAAAAAjlk/UZoPvVM9VXk/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://lh4.googleusercontent.com/-9KH694OiwMg/UkKai5dmXvI/AAAAAAAAjls/aKhLECV4E38/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://lh3.googleusercontent.com/-pJ8AvHwMPCg/UkKalCRIeFI/AAAAAAAAjl0/qjSnmXDtgLU/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://lh4.googleusercontent.com/-f1WIgAn1KKA/UkKan8ASUmI/AAAAAAAAjl8/yLoRPOWYdXA/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://lh6.googleusercontent.com/-VOVfzjroO3k/UkKaqf0inzI/AAAAAAAAjmE/D4MzDV1ASUQ/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 -




8 commenti :

  1. E' una personalizzazione molto bella. :)

    In alcuni modelli - se il widget viene posizionato nell'area sopra il post - appare il marcatore di lista prima delle immagini. Ho provato ad aggiungere "list-style-type:none" a .ipcei_slider3Image e non si vede più. E' corretto o ho solo avuto un colpo di fortuna?

    Buon pomeriggio

    E.

    RispondiElimina
    Risposte
    1. Credo che andava bene anche
      list-style:none;
      Quando si vedono gli elenchi in genere si usa questo tag.
      list-style-type:none; confesso che non lo conoscevo :D
      @#

      Elimina
    2. Ho sbagliato io, scusa. :( Era "list-style:none".

      Elimina
  2. Veramente bella :)

    Su questo slideshow come si può inserire un effetto di transizione, tipo fede.

    Ciao

    RispondiElimina
    Risposte
    1. Bisognerebbe modificare il javascript caricato su Google Code. Prova a guardare sul sito dell'autore
      http://www.serie3.info/
      se trovi qualche informazione per eventuali aggiunte di effetti di transizione
      @#

      Elimina
  3. Ciao Ernesto, sono una tua nuova lettrice :) Il tuo sito è davvero molto interessante e pieno di consigli, io ho ancora molto da imparare!
    Stavo cercando uno slideshow per i miei tutorial che mostrasse le descrizioni sulle foto, le frecce per andare avanti/indietro e magari anche le miniature con le anteprime (ma non necessariamente). Questo slideshow mi sembra perfetto, tranne per il fatto che mancano le frecce.
    C'è un modo per aggiungerle?

    Attualmente sto usando lo slideshow di Picasa ma, a meno che non lo si metta in pausa, risulta difficile da seguire a causa della velocità troppo veloce per leggere le spiegazioni.
    Mi chiedevo quindi se tu conoscessi una valida alternativa.
    Scusa per il commento lunghissimo :)

    Complimenti per il tuo blog!
    Linda

    RispondiElimina
    Risposte
    1. Prova con una di queste soluzioni
      http://www.ideepercomputeredinternet.com/2013/09/last-posts-slideshow.html
      http://www.ideepercomputeredinternet.com/2013/01/slideshow-immagini-blogger.html
      http://www.ideepercomputeredinternet.com/2014/07/slideshow-blogger-easyslider.html
      Quest'ultima è la più recente
      @#

      Elimina
    2. Grazie mille Ernesto! Ora mi guardo tutto per bene :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.