Slideshow delle immagini dei Post in Primo Piano.

Come mostrare uno slideshow con navigazione degli articoli posti in evidenza su Blogger che mostri lo scorrimento delle immagini a velocità personalizzabile.

Quando si installa un widget che mostri alcuni articoli del nostro sito possiamo scegliere se mostrare gli Ultimi Post, magari anche con le miniature, se optare per un elenco di Articoli Casuali o se selezionare noi stessi gli articoli da mettere in evidenza per i lettori.

Per rendere il layout più accattivante si può decidere di utilizzare uno slideshow che mostri le immagini più pertinenti relative a ciascun post. In questo articolo vediamo come realizzare appunto uno slideshow con le foto di 5 immagini che abbiamo scelto di mettere in primo piano. Questa soluzione è utile se nel nostro sito ci sono degli "articoli pilastro" che riteniamo possano interessare ai navigatori. 

Il gadget utilizza la libreria JQuery che permette di avere degli spostamenti omogenei con la possibilità di modificarne anche la velocità. Lo slideshow si riprodurrà automaticamente ma il lettore potrà navigare tra i post cliccandoci sopra con il cursore 

Ho scelto delle immagini con un rapporto 2 a 1 tra larghezza e altezza di 500x250 pixel ma il lettore può modificare questa impostazione operando sul codice. Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera intorno alla 13° riga per visualizzare tutto il codice della sezione <b:skin>.  Con Ctrl+F si cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla questo primo codice

/* Slideshow Post Primo Piano */
.main_view {
float: left;
position: relative;
}
.window {
height:250px; width: 500px;
overflow: hidden; /* Per nascondere la parte eccedente delle immagini */
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/* Stile delle pagine  */.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 999;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwunutMkKLiBoB95RqhhE2GqfvkTfJ7RkIo-V_pgG_fkwGFZMHwNP1zWKtGMkH_MhFICu3pDMkxUjIss_k_pF6_DJ4kBQZzC7aMFqJKhUXfgosVj1_OrPJ8e4a-3aBkFshlyH08929zw4o/s179/ribbon.png) no-repeat;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold; /* Grassetto al passaggio del mouse */}

Si cerca quindi la riga </head> e, subito sopra, si incolla questo nuovo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Numero di volte della rotazione
var image_reelPosition = triggerID * imageWidth;
$(&quot;.paging a&quot;).removeClass(&#39;active&#39;);
$active.addClass(&#39;active&#39;);
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) {
$active = $(&#39;.paging a:first&#39;);
}
rotate();
}, 5000); //Velocità rotazione
};
rotateSwitch();
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(&quot;.paging a&quot;).click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script>

Finalmente si salva il modello. Adesso si va su Layout > Aggiungi un gadget > Base > HTML / Javascript e, in Sezioni del sito, si incolla il codice contenente le immagini e i rispettivi link

<div class="container">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="URL_LINK1"><img src="URL_IMMAGINE1" alt="nome-immagine" title="Titolo Post 1"/></a>
<a href="URL_LINK2"><img src="URL_IMMAGINE2" alt="nome-immagine" title="Titolo Post 2"/></a>
<a href="URL_LINK3"><img src="URL_IMMAGINE3" alt="nome-immagine" title="Titolo Post 3"/></a>
<a href="URL_LINK4"><img src="URL_IMMAGINE4" alt="nome-immagine" title="Titolo Post 4"/></a>
<a href="URL_LINK5"><img src="URL_IMMAGINE5" alt="nome-immagine" title="Titolo Post 5"/></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
</div>
</div>
</div>

Si salva e si posiziona il gadget sopra all'area del post o sotto il menù delle Pagine Statiche.

 

CONSIDERAZIONI CONCLUSIVE

La riga evidenziata di giallo è JQuery e può essere tralasciata se fosse già presente nel modello. Per modificare la velocità di riproduzione dello slideshow si può intervenire sul valore di 5000. Gli Hotlink o Link Diretti alle immagini possono essere trovati dopo che sono state caricate su Picasa. Si deve dare un nome alle singole immagini all'interno del tag Alt per questioni SEO mentre se si inserisce il Titolo per post lo si vedrà in un tooltip passando sopra alla immagine con il cursore.