Pubblicato il 16/07/15 - aggiornato il  | 11 commenti :

Slideshow personalizzabile di immagini con link ai post.

Slideshow di immagini con link ai post per Blogger e altre pagine web.
Se nel vostro blog avete delle immagini rappresentative di articoli particolarmente interessanti potrebbe essere una buona idea mostrarle in uno slideshow nella parte alta del sito oppure nel footer. Un'altra soluzione potrebbe essere quella di pubblicarle in una pagina statica.

Se si sceglie questa ultima opzione bisogna ricordarsi di pubblicare la pagina da HTML dopo aver incollato il codice senza ritornare su Scrivi. Non si tratta di un gadget che mostra gli ultimi post pubblicati. Per questa funzionalità si può usare il gadget basato su EasySlider. La scelta del widget che vado a illustrare serve per mostrare un estratto di quelli che riteniamo essere i nostri migliori post. Inoltre il codice è installabile in tutte le pagine web che supportano il javascript e non solo nella piattaforma Blogger.

Per l'installazione in un elemento pagina si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito, si incolla questo codice

<script type="text/javascript">
//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="#eeeeee"
//URL di immagini e Link di collegamento
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7YZs70EPPgVVbTiuX5MRnnABZ6oF94xwzajjMWwjeV77m8lwLapYwNKaHiBdVv-2ScNwi-ED857y1niw_kluVryLVZHXMxO9QUVW50Y3bz1iCVM0M-I4L4Cgf5YcmKLSxH7gMVyy5hw/s140/ippopotami2.png" border=1></a>'
leftrightslide[1]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP2mYdtRmMCA938XbAFMUq3qLlqOzCwjtjE4nIvCJbb_qGgOTy4bO-ZoPK3YbTe-1TLktOLvLtijB3UNQw-hnQ0HQ2wjyf-6r3s2x_WvU-eXJxkv_fPn7-eczN-eMAV76rEWTB4s5b2Y/s140/margherita2.png" border=1></a>'
leftrightslide[2]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYzCK-YR9L3cG6Q0FTC8cemvXeum6WmEq-LxjBZs9vCsHmnc1iHUyawBZG2GvllQohKENuWTKbmHp5tedUEJL0JtDKzhbHLFbrFl4ITvo40djWGsyt89Ghh9yPAyKdHIvl_5rDSneckI/s140/pinguini2.png" border=1></a>'
leftrightslide[3]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiTaQjvLTM3lD7JdEF2hMK0cICngplhDl7uyViBhHWMhGYwKcSHO62eLODXvoUjonkkU7v3GCvsuSfe9VH9teldXIs9z4rUZX-xa7HnBRUkeQVQIbuZpqZN4lWHIhyUcARKbSwuaQD4Y/s140/uccello-paradiso2.png" border=1></a>'
leftrightslide[4]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0r8GKPqKgjfBeCOL71UqOrULRt6SxIVAYZLXtasdj47o9yUbxmsTG84mBqvRwEXw3-HOM_l18Opo_KWY3DcLcIIBHWjzUmV8whN7t9NGxwXeJrDivokCAePDSOXU3nG3FJK4nb4kzjI/s140/uccello-pesce2.png" border=1></a>'
leftrightslide[5]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7YZs70EPPgVVbTiuX5MRnnABZ6oF94xwzajjMWwjeV77m8lwLapYwNKaHiBdVv-2ScNwi-ED857y1niw_kluVryLVZHXMxO9QUVW50Y3bz1iCVM0M-I4L4Cgf5YcmKLSxH7gMVyy5hw/s140/ippopotami2.png" border=1></a>'
leftrightslide[6]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP2mYdtRmMCA938XbAFMUq3qLlqOzCwjtjE4nIvCJbb_qGgOTy4bO-ZoPK3YbTe-1TLktOLvLtijB3UNQw-hnQ0HQ2wjyf-6r3s2x_WvU-eXJxkv_fPn7-eczN-eMAV76rEWTB4s5b2Y/s140/margherita2.png" border=1></a>'
leftrightslide[7]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYzCK-YR9L3cG6Q0FTC8cemvXeum6WmEq-LxjBZs9vCsHmnc1iHUyawBZG2GvllQohKENuWTKbmHp5tedUEJL0JtDKzhbHLFbrFl4ITvo40djWGsyt89Ghh9yPAyKdHIvl_5rDSneckI/s140/pinguini2.png" border=1></a>'
leftrightslide[8]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiTaQjvLTM3lD7JdEF2hMK0cICngplhDl7uyViBhHWMhGYwKcSHO62eLODXvoUjonkkU7v3GCvsuSfe9VH9teldXIs9z4rUZX-xa7HnBRUkeQVQIbuZpqZN4lWHIhyUcARKbSwuaQD4Y/s140/uccello-paradiso2.png" border=1></a>'
leftrightslide[9]='<a href="URL_POST"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0r8GKPqKgjfBeCOL71UqOrULRt6SxIVAYZLXtasdj47o9yUbxmsTG84mBqvRwEXw3-HOM_l18Opo_KWY3DcLcIIBHWjzUmV8whN7t9NGxwXeJrDivokCAePDSOXU3nG3FJK4nb4kzjI/s140/uccello-pesce2.png" border=1></a>'
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NON OCCORRE MODIIFCARE IL CODICE QUI SOTTO////////////
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>

Si salva e si posiziona l'elemento pagina. Possono essere modificate la larghezza dello slideshow e la sua altezza. Con le impostazioni proposte dal codice le foto scelte sono da 112 pixel di larghezza e 140 pixel di altezza. Ho creato uno slideshow con 10 immagini. Per aggiungerne una 11-esima immagine si deve aggiungere una riga come questa

leftrightslide[10]='<a href="URL_LINK"><img src="URL_IMMAGINE" border=1></a>' 

Per collegare i vari post vanno messi i loro indirizzi al posto di URL_LINK. Lo slideshow avrà una velocità di scorrimento personalizzabile e cesserà lo scorrimento al passaggio del cursore
slideshow-demo

La Demo è stata installata in una pagina statica.



11 commenti :

  1. Avendo nel blog delle immagini di dimensioni diverse circa 500 x 300 è possibile modificare le impostazioni proposte del tuo codice, per inserirle in un widget 300x300. ?

    RispondiElimina
    Risposte
    1. Si. Fai delle prove per trovare i parametri numerici giusti
      @#

      Elimina
  2. Ciao Ernesto, vorrei chiederti se sia possibile rendere il widget adattabile allo schermo con cui si visualizza.Cerco di spiegarmi, ho provato a settare la larghezza anziché con i pixel proposti con il parametro 100%, ma non funziona.Invece provando a portare la larghezza dello "slide"in px uguale a quella del template si vede bene, ma guardando con screenfly il risultato su tablet e cellulari non è valido esteticamente (eccede la larghezza dello schermo).Io ho un template "simple" modificato in responsive .Grazie in anticipo per l'attenzione.

    RispondiElimina
    Risposte
    1. No. Gli slideshow sono installati appositamente per essere visibili solo nel desktop. Puoi mettere i tag condizionali per non mostrarli nel mobile se vengono male
      @#

      Elimina
    2. OK, sospettavo qualcosa del genere...Ri-grazie

      Elimina
  3. Ciao Ernesto, questo codice è utilizzabile anche in wordpress? E può essere inserito nell'header.php? Io ho aggiunto uno slideshow a schermo (quasi) intero sotto il menu principale ma riesco ad inserire solo le immagini e non i link ai rispettivi post. Sai per caso cosa bisogna aggiungere per riuscirci? Dal widget non si riesce. Questo è il codice del mio slideshow: div style="padding:30px; margin-left:80px; margin-right:50px">div (i div mancano di chiusura, altrimenti non mi pubblica il commento) Grazie!!!Laura

    RispondiElimina
    Risposte
    1. Il javascript funziona in qualsiasi pagina web
      http://i.imgur.com/4h0flx1.png
      Per i link ai post su Wordpress non vedo perché non sia possibile. Basta sostituire il Permalink del post al posto di URL_POST. Non ho la possibilità di testare per aiutarti ulteriormente :(
      @#

      Elimina
    2. Prova a incollare il codice su Widget > Testo per poi trascinarlo nella posizione che preferisci. Lo puoi fare anche con Header se nel tuo tema c'è la possibilità di inserire codice a partire da Aspetto > Widget
      @#

      Elimina
  4. Ciao Ernesto!! Preziosi i tuoi consigli!! Ti posso chiedere come fai a mettere il codice nella pagina (come nella demo)? E più in generale utilizzare i widget nelle pagine statiche? o forse ci sono dei post in cui lo hai già spiegato...

    RispondiElimina
    Risposte
    1. Nelle pagine web si possono installare solo dei widget che su Blogger andrebbero incollato su HTML/Javascript. È semplicissimo. Si apre l'Editor di Blogger che serve per scrivere i post o le pagine statiche e si clicca su HTML che è il bottone accanto a Scrivi. Si incolla il codice nel punto in cui visualizzare il widget. Bisogna ricordarsi però di pubblicare il post sempre da HTML senza tornare su Scrivi
      @#

      Elimina
    2. Ottimo!! Funziona!! Grazie mille!!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy