Pubblicato il 19/04/11 - aggiornato il  | 27 commenti :

Semplice slideshow di immagini per Blogger ottenuto senza caricare javascript.

Vado a presentare uno slideshow semplicissimo che può essere installato su Blogger senza caricare file javascript su hosting esterni. Il concetto è quello di inserire delle immagini una di seguito all'altra e di visualizzare l'immagine che ci interessa mediante il click del mouse.

slideshow immagini blogger

Nella parte bassa ci sono i pulsanti di navigazione per scorrere le diverse immagini. Bisogna prestare attenzione alla geometria. Se abbiamo sette foto larghe 500 pixel allora la sua dimensione complessiva sarà di 500x7=3500 pixel. C'è però il problema che alcuni modelli inseriscono dei bordi alle immagini in modo automatico. E' anche il caso del blog che ho usato per effettuare il test. La cosa varia ovviamente da template a template. Vedremo come ovviare a questo inconveniente alla fine dell'articolo. 

Per l'installazione si va su Design > Modifica HTML e si cerca la riga </head>. Immediatamente sopra si incolla il seguente codice

<!-- Simple Slideshow Start -->
<style>
#ImgBox {
    height: 375px;
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  #ImgIntBox{   
    position:absolute;
    left: 0;
    top: 0;  
    width: 3500px; /* Larghezza totale del widget da calibrare moltiplicando le larghezze delle immagini insieme a quelle eventuali dei bordi per il loro numero */    
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #ImgIntBoximg {
    height: 375px;
    width: 500px;
  }
  #ImgBoxLinks
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #ImgBoxLinks a {
    background-color: #334455;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #AABBCC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #ImgBoxLinks a:hover {
    box-shadow: 0 0 8px #AABBCC inset;
    color: #FFFFFF;
  }
</style>
<!-- Simple Slideshow End - www.ideepercomputeredinternet.com -->

Ho scelto 7 foto da 500x375 pixel, ma possono essere di qualsiasi dimensione. Il dato totale di 3500 pixel si riferisce a un modello senza bordi nelle immagini. La parte finale del codice dichiara lo stile dei pulsanti di navigazione per quello che riguarda la forma, la posizione (centrale) e i colori. Il tag border-radius ne determina l'arrotondamento. Si salva il modello. Dopo aver caricato le immagini su Picasa o altro hosting, dobbiamo andare su Design > Aggiungi un gadget > HTML/Javascript e incollare quest'altro codice (ho lasciato gli URL delle foto inserite come test)

<div id="ImgBox">
<div id="ImgIntBox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgHpVusaEOHpRW9eyWVvpJP0D70agKJVvp1-hyLT384w-phlpjenAivm0fU5F_2Du14XX7XDk40-9iDzbeFLqQ26fYTTo5jN-q9gJvpMK3KS1Lf9hVg_fsMCdj-6uatzCJGPA6A2Txgo/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64331audmjXlWhUYoQRnRwsBJKO-0E7CXwbWhFjrblMlHE1L0x33Q_yuPaiapWcFVRXzVQvc2C72DJbcDWmMaRt4lvmuZTpHOCA_NeKcUO9Kch82pTRyZur5CkuxP05LSG05jhKW0WiY/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_0FLdNB03Z1xf_1jF_p0az1TyP6hpnIHo7QI5OCOlXZdm3W_6gr9_M4J5pQpNUznRdPKsfqTIHeTWF3r1ICJx53O4_OlXv0NJc5zXIV5R6LhuDQZ3tOgRm8icIH9dLkGD46jNNBS9Pws/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIWPrR89X1H8izJ7TLkkqPnWcZuXkhX8oahr162HQtANFVzTPOk1lCTCROkNo1c3jI0RPxQe55x8Y9V3HoE0kmMO0grvoqteqoMlxPtj7NnhXCbhDRyxixx_Ygp3XnTiFbG_id0Jr5UE/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSJOrODyTrfpinafVYqpUnyGlNPLoc_4Vd8Cj_ZJf04ZGPBtXFrRr4gTPurJzTHM5o2bCSNM57WxOQkmXESEmeuzoUjT8_5pobbHCcUzqt-9NZfIFtkiFvMYqiqUfmsaYIExrwYd4Cno/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vZ9mJudKlMRMWBT5Y_pumSUfHOrdUMBwxgE3zmWimmhK2a0YwqvtkdRwtIhk5U62nvgXyAtBV4DA4TdhfIxX7MQorNbVpZBPC8hGC_zE-EQb3eEuzr2SVHjbP3kAJnnO4NXPtwktsgo/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfF_LlX739M-SvcADDIiTg17-mQMnjHFVRhevLS2ETsAcOaS6GPUgcUOAdkomhTrNZK5LQS0wjIn2DevSlJCF0BGhbWQNalWDbM-3sYka2YN496iSvg3DVkOi-GQNI4ANuqpphp0Vonns/" />   
</div>
</div>
<div id="ImgBoxLinks">
  <a onclick="
srcImgBox(0);" href="javascript:void(0);">1</a>
  <a onclick="
srcImgBox(1);" href="javascript:void(0);">2</a>
  <a onclick="
srcImgBox(2);" href="javascript:void(0);">3</a>
  <a onclick="
srcImgBox(3);" href="javascript:void(0);">4</a>
  <a onclick="
srcImgBox(4);" href="javascript:void(0);">5</a>
  <a onclick="
srcImgBox(5);" href="javascript:void(0);">6</a>
  <a onclick="
srcImgBox(6);" href="javascript:void(0);">7</a>
</div>
<script>
//<![CDATA[
  function srcImgBox(num) {
    var mover = num * 500;    document.getElementById("ImgIntBox").style.left = -mover + "px";
  }
//]]>
</script>
<noscript><a href='http://goo.gl/eTetJ' target='_blank'><span style='font-size: x-small;'>Simple Slideshow</span></a></noscript>

Si clicca su Salva e si posiziona con il mouse nella sidebar, nel footer o in una pagina statica. Ecco lo slideshow che ho messo in rete

Se si vogliono inserire un numero diverso di immagini, occorre semplicemente aggiungere una riga di questo genere

<img src="URL_IMMAGINE" />

Per questioni SEO sarebbe anche opportuno anche inserire il tag Alt, in questo modo

<img src="URL_IMMAGINE" alt="Nome_Immagine"/>

Per ogni immagine che viene aggiunta, bisogna inserire un'altra riga con questa sintassi

srcImgBox(x);" href="javascript:void(0);">x+1</a>

Nella demo ho sostituito il valore var mover = num * 500; con var mover = num * 504; per tenere conto dei due pixel di bordi inseriti a sinistra e a destra delle immagini. Al posto di 3500 ho invece messo 3528 come larghezza totale. Con questa modifica lo slideshow dovrebbe funzionare perfettamente anche nei modelli che inseriscono le immagini direttamente con i bordi. Se la loro dimensione è di un solo pixel mettete 502, optate per 506 nel caso di 3 pixel. Si deve naturalmente modificare anche la larghezza totale del widget in funzione delle spessore di eventuali bordi.



27 commenti :

  1. semplice ed efficace...ottima segnalazione!

    RispondiElimina
  2. Salve parsifal, ti vorrei chiedere se potresti postare come creare un color picker per cambiare lo sfondo del blog, se hai tempo e voglia.
    Te lo chiedo perchè mi serve davvero tanto :)
    Grazie

    RispondiElimina
  3. @filippo99 Se intendi uno strumento gratuito per catturare i codici dei colori sullo schermo, ho già scritto diversi post
    http://www.ideepercomputeredinternet.com/2011/04/pf-color-tool-per-identificare.html
    http://www.ideepercomputeredinternet.com/2011/03/color-picker-per-conoscere-i-codici-rgb.html
    http://www.ideepercomputeredinternet.com/2009/02/come-estrarre-i-colori-da-un-sito-web.html

    RispondiElimina
  4. Grazie per la risposta ma io intendevo un widget che ti permettesse attraverso una tavolozza sullo schermo di cambiare colore dello sfondo del blog semplicemente cliccando sul colore desiderato...
    Ho già provato a cercare in rete cose simili ma, non trovando niente ho pensato si rivolgermi a te.

    RispondiElimina
  5. @filippo99Non conosco nulla di simile anche se dal punto di vista della programmazione non è un problema insormontabile.

    RispondiElimina
  6. @filippo99

    scusa, solo per capire/curiosità: intendi qualcosa del genere?
    http://www.dyslexia-parent.com/magazine.html

    RispondiElimina
  7. @filippo99
    Creare un sito del genere senza altro codice è semplice, guarda qui
    http://parsifal32.altervista.org/background.html
    metterlo su Blogger è un altro paio di maniche :(

    RispondiElimina
  8. @Ernesto T.
    Grazie ancora per la risposta, troverò come fare :)

    RispondiElimina
  9. Ciao Ernesto,è molto utile questo sistema,ma ti chiedevo,lo si può aggiungere per ogni singolo post?

    RispondiElimina
  10. @Anna
    Nel senso che tu vorresti provare a inserirlo in modalità HTML nell'articolo? Funziona senz'altro. Inserisci il codice nel modello una sola volta (sopra /head) mente in ciascun post puoi inserire un particolare slideshow inserendo i diversi URL delle immagini e quindi modificando solo la seconda parte del codice.

    RispondiElimina
  11. Si esatto,avere la possibilità di averlo in automatico nei vari post,ma con le immagini abbinate al post.Ci provo e poi ti faccio sapere.Grazie mille

    RispondiElimina
  12. Ciao Ernesto,
    ho utilizzato il tuo script per eseguire lo slideshow all'interno di un post.
    Quindi, ho messo la seconda parte del codice non in un gadget html/javascript, ma direttamente nell'html del post.
    Le immagini le ho archiviate su Picasa.
    Ora... nello slideshow si vede correttamente la prima immagine, ma quando vado a cliccare sui tasti numerici per visualizzare le altre immagini, le stesse non vengono visualizzate (mi sembra come se non si caricassero).
    Hai qualche suggerimento per risolvere il problema?
    Grazie sia per l'aiuto, sia per i tuoi ottimi script.

    Mauro

    RispondiElimina
  13. @Anicrom Per sapere se c'è una incompatibilità con il tuo modello o altro problema prova a incollare il mio codice così com'è per vedere se funziona. Se è così, significa che hai sbagliato qualcosa nell'inserire il tuo se invece lo slideshow non si vede correttamente bisogna mettersi l'animo in pace e cercare qualcos'altro :)

    RispondiElimina
  14. @Ernesto T.

    Grazie Ernesto per la pronta risposta.
    Ho inserito il codice così com'è, modificando solo le url dell'immagini, ma niente... si vede solo la prima foto.
    Grazie ancora e buona Pasqua.

    RispondiElimina
  15. @Anicrom Se hai cambiato l'URL delle immagini non hai inserito il widget così com'è :)

    RispondiElimina
  16. Alla fine Ho risolto!! :D era un problema di calcolo avevi propriamente ragione! Quei 3 pixel di boder combinavano un macello (Non li vedevo perchè avevo impostato il color transparent.. Managgia!! lo slider cmq è perfetto... Mi è piaciuto cosi tanto che ci ho perso una settimana ad ammorbidirlo graficamente :D ho anche inserito un link ad ogni immagine e i tooltip con i css che lo rendono ancora piu intuitivo ^^ insomma c'ho perso un pò di tempo libero :) inoltre ho anche sistemato il tooltip del player. ricordi quando ti avevo detto se era possibile farne uno che comparisse sulla l'home e si potesse chiudere nello stesso tempo. Navigando sul blog spagnolo che ogni tanto link, ho trovato uno scritp che faceva al caso mio. Certamente la modifica che ho fatto è abnorme. "li si trattava di un messaggio di benvenuto" io me ne sono servito per altro :D.
    Ho testato tutto con fire fox // chrome // Explorer 7/8. Sembra non esserci un padding di sfasamento. Mi servirebbe sapere se con Ex 9 tutto si visualizza ugualmente.
    Potete vedere tutto il lavoro sulla home del mio blog http://ilmontespushermusic.blogspot.com/
    Grazie di tutto... sto imparando molto da te ^^

    IL MONTES

    RispondiElimina
  17. chiedo il tuo aiuto, è possibile fare un slideshow delle collaborazioni come in questo blog :http://mammapaperasblog.blogspot.com/ si trova nella sidebar a destra, grazie per l'aiuto

    RispondiElimina
  18. @Caterina Pili
    E' uno slideshow creato con Nivo Slider. Ho anch'io pubblicato dei post in merito
    http://www.ideepercomputeredinternet.com/2011/04/slideshow-di-immagini-con-descrizione-e.html
    http://www.ideepercomputeredinternet.com/2011/06/come-personalizzare-l-nivo-slider-per.html
    Nel blog che mi hai linkato hanno però di un codice diverso, più semplice e senza strumenti di navigazione.

    RispondiElimina
  19. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @ AXD96
      Non con questo widget. Però ce ne sono altri tipo
      http://www.ideepercomputeredinternet.com/2011/08/slideshow-degli-ultimi-articoli-per.html
      http://www.ideepercomputeredinternet.com/2012/04/slideshow-degli-ultimi-post-con.html

      Elimina
  20. Ciao,
    e complimenti per l'ottima guida.
    Premetto che non sono molto pratico di js e, volevo sapere se è possibile aggiungere uno script che permetta la visualizzazione delle img in modo automatico(ogni tot secondi cambia img). Alle foto,oltre al numero mi interesserebbe aggiungere anche il titolo e in fase di passaggio da una foto all'altra vorrei far cambiare anche titolo, oltre al numero img.
    Pensi che sia possibile?

    Ciao
    Gianluca

    RispondiElimina
  21. Ciao,
    x il titolo ho risolto creando lo stesso effetto che hai applicato alle img.
    Ho creato i due div combiando id, aggiunto il codice css x i relativi id e ho usato la stessa funzione con id cambiato per il js.
    Pensi che sia la soluzione migliore o si poteva fare diversamente?
    X lo scorrimento automatico di img,titolo e numero img aspetto tue notizie.

    Ciao
    Gianluca

    PS: volendo far cambiare e far mantenere (quindi no hover) il colore dello sfondo dei muneri ad img attiva,come posso fare?

    RispondiElimina
    Risposte
    1. @# Tutto è possibile ma le modifiche che chiedi richiedono un certo impegno e non sono neppure sicuro che siano fattibili.

      Elimina
    2. Lo scorrimento automatico di img,titolo e numero img, forse si può realizzare con InnerFade with JQuery ma non l'ho provato.
      Il resto con un po' di pazienza si fa.
      Ciao e grazie x lo slider
      Gianluca

      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