Come installare uno slideshow in un widget o in una pagina.

Come installare in un widget o in una pagina web uno slideshow di immagini con link ai post e con tooltip con il titolo dell'articolo.

Lo slideshow che vado a presentare non è specifico di Blogger, può essere installato in tutte le pagine web e visualizzato con tutti i principali browser. La velocità dello slideshow è personalizzabile e lo scorrimento si arresterà nel momento in cui ci si passi sopra con il cursore.

A ciascuna immagine è collegato un link che aprirà una pagina web qualora ci si clicchi sopra. Quando si punta con il mouse una immagine dello slideshow si visualizzerà un tooltip con il titolo del post o della pagina collegata. Si possono personalizzare anche la larghezza e l'altezza dello slideshow oltre allo sfondo dello stesso. Limitatamente alla piattaforma Blogger si può decidere di incollare il codice in un widget per visualizzare lo slideshow sopra l'area del post o in una sidebar oppure optare per mostrarlo in una pagina statica.

Le dimensioni proposte per lo slideshow sono di 600 pixel di larghezza e di 150 pixel che comportano per le immagini dimensioni di 112 pixel di larghezza e di 140 pixel di altezza. Si possono modificare tutte le dimensioni agendo in modo coerente sui parametri del codice.

Demo
Clicca qui

Per l'installazione non occorre salvare il template ma si va su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito se si vuole mostrare il widget in un elemento pagina mentre si va su Pagine > Nuova Pagina > Pagina vuota > HTML se si vuole mostrare in una pagina statica. In entrambi i casi il codice da incollare è il seguente

<script type="text/javascript">
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//<![CDATA[
//Larghezza (in pixel)
var sliderwidth="600px"
//Altezza
var sliderheight="150px"
//Velocità (numeri più alti velocità più elevata da 1-10)
var slidespeed=3
//colore di sfondo:
slidebgcolor="#EAEAEA"
//URL di immagini e Link di collegamento
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="URL_POST1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7YZs70EPPgVVbTiuX5MRnnABZ6oF94xwzajjMWwjeV77m8lwLapYwNKaHiBdVv-2ScNwi-ED857y1niw_kluVryLVZHXMxO9QUVW50Y3bz1iCVM0M-I4L4Cgf5YcmKLSxH7gMVyy5hw/s140/ippopotami2.png" alt="nome-immagine1" title="Titolo post numero 1" border=1></a>'
leftrightslide[1]='<a href="URL_POST2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP2mYdtRmMCA938XbAFMUq3qLlqOzCwjtjE4nIvCJbb_qGgOTy4bO-ZoPK3YbTe-1TLktOLvLtijB3UNQw-hnQ0HQ2wjyf-6r3s2x_WvU-eXJxkv_fPn7-eczN-eMAV76rEWTB4s5b2Y/s140/margherita2.png" alt="nome-immagine2" title="Titolo post numero 2" border=1></a>'
leftrightslide[2]='<a href="URL_POST3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYzCK-YR9L3cG6Q0FTC8cemvXeum6WmEq-LxjBZs9vCsHmnc1iHUyawBZG2GvllQohKENuWTKbmHp5tedUEJL0JtDKzhbHLFbrFl4ITvo40djWGsyt89Ghh9yPAyKdHIvl_5rDSneckI/s140/pinguini2.png" alt="nome-immagine3" title="Titolo post numero 3" border=1></a>'
leftrightslide[3]='<a href="URL_POST4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiTaQjvLTM3lD7JdEF2hMK0cICngplhDl7uyViBhHWMhGYwKcSHO62eLODXvoUjonkkU7v3GCvsuSfe9VH9teldXIs9z4rUZX-xa7HnBRUkeQVQIbuZpqZN4lWHIhyUcARKbSwuaQD4Y/s140/uccello-paradiso2.png" alt="nome-immagine4" title="Titolo post numero 4"  border=1></a>'
leftrightslide[4]='<a href="URL_POST5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0r8GKPqKgjfBeCOL71UqOrULRt6SxIVAYZLXtasdj47o9yUbxmsTG84mBqvRwEXw3-HOM_l18Opo_KWY3DcLcIIBHWjzUmV8whN7t9NGxwXeJrDivokCAePDSOXU3nG3FJK4nb4kzjI/s140/uccello-pesce2.png" alt="nome-immagine5" title="Titolo post numero 5" border=1></a>'
//Gap tra immagini con HTML:
var imagegap=" "
//pixel tra ciascun slideshow con numeri interi:
var slideshowgap=5
///NON EDITARE SOTTO QUESTA RIGA ////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
//]]>
</script>

In questo codice sono state inserite 5 immagini ma se ne possono inserire altre con la medesima sintassi. Per esempio per la sesta si dovrebbe aggiungere questa nuova riga

leftrightslide[5]='<a href="URL_POST6"><img src="URL_IMMAGINE_6" alt="nome-immagine6" title="Titolo post numero 6" border=1></a>'

Da notare che visto che il numero dell'Array parte da 0 il numero del post è superiore di una unità. Concludo osservando che si può anche centrare lo slideshow incollando all'inizio del codice questa riga <div align="center"> e alla fine quest'altra riga </div>. Se si incolla il codice in una pagina statica come mostrato nella Demo bisogna pubblicare da HTML senza tornare su Scrivi.

Leggi anche l'articolo: Slideshow delle foto di un album di Picasa