Inserire slideshow di immagini su blogger



Per svariati motivi può essere importante inserire una slideshow di immagini nel proprio blog:

-Per una migliore navigabilità del blog stesso
-Per dare rilevanza e dei post specifici
-Per pubblicizzare alcuni prodotti
-Semplicemente per bellezza inserendo delle foto random
-Ecc ecc...

In questo post ti spiegherò come aggiungerne una al tuo blogger.com seguendo alcuni semplici passi.

Come inserirla:

1- Vai su design --> modifica html

2- Espandi i modelli widget  e fai un backup del template

3- Cerca (usando ctrl+F) il tag </head> e incolla appena prima questo codice:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

4- Salva

5- Vai su Design --> Elementi pagina e aggiungi un elemento tipo html/javascript

6- Incolla all'interno questo codice:
<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="Titolo post 1" alt="Descrizione post 1." /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="Titolo post 2" alt="Descrizione post 2." /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="Titolo post 3" alt="Descrizione post 3." /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="Titolo post 4" alt="Descrizione post 4." /></a></li>

</ul>

7- Sostituisci le parti colorate con:

-L'url dell'iimagine che vuoi far apparire
-Il titolo del post o della pagina
-Un'introduzione al post

8- Salva e il gioco dovrebbe essere fatto.

Attenzione: di default la slideshow ha una grandezza di 600px X 240px.
Per modificarle cerca nella prima parte di codice le parti in rosso e cambiale con le misure che preferisci.

Non esitare a chiedere qualsiasi informazione!

Altri articoli simili:



6 commenti:

Ciao...ho seguito tutti i passi necessari. Va tutto bene, sostituisco l'url delle immagini con quelli delle mie(che ottengo tramite un sito hosting), però quando sostituisco il titolo e la descrizione, queste due ultime cose non vengono visualizzate nella slide...cosa può essere successo. Sei sempre utilissimo con i tuoi post e ti seguo!

Ciao Luigi.

Se provi a fare una visualizzazione prima di cambiare titolo e descrizione c'è qualche scritta o non si vede niente?

Ciao ho inserito senza problemi questo slide sul mio blog tranne che per le miniature delle immagini in gadget come ultimi post. In pratica il valore dato alla grandezza delle immagini nello slide viene preso alla lettera dalle immagini in miniatura ma solo nella larghezza ritrovandole stirate in orizzontale. C'è un rimedio a questo problema?

Ciao se-gen.
Scusa il ritardo nella risposta ma la febbre mi ha messo fuori uso...

Puoi spiegare meglio il tuo problema? Non è così chiaro...

Ciao, non ti preoccupare ;)
In pratica ho avuto un conflitto con un altro gadget java, ma cmq non mi interessa più ;)

Invece volevo sapere se era possibile inserire questa stessa slide contemporaneamente su più parti del blog ma con dimensioni diverse. Ho visto che il widget funziona quante volte voglio ma riferendosi sempre al codice inserito nel modello, mi mantiene sempre le stesse dimensioni e invece a me servivano dimensioni diverse per ogni slide... forse nominando o numerando ogni slide?..

Ciao, ho seguito la tua utilissima guida, però ho visto che le modifiche vengono fatte a tutti iwidget, invece io volevo farlo ad uno solo, cosa posso fare?