Pubblicato il 04/02/11 - aggiornato il  | 15 commenti :

Effetto Slideshow di una Galleria di Foto per Blogger con bottoni di controllo.

L'effetto che vado a proporvi può essere interessante per i blogger che vogliono evidenziare particolari pagine con uno slideshow posto nella sidebar che ne mostri le immagini relative. Si può associare un titolo a ciascuna foto, linkare un post o una pagina di etichette e inserire un titolo visibile in sovraimpressione. L'autore lo ha chiamato Simple Controls Gallery e le istruzioni per l'installazione si trovano su Dynamic Drive insieme a molti altri effetti, alcuni dei quali ho già presentato in articolo passati.

Ho già scaricato i file sorgente e le immagini, li ho modificati e caricati su Google Code, quindi l'installazione del widget non presenta particolari difficoltà. Ecco lo screenshot di esempio

screenshot della semplice galleria
Per vedere l'effetto all'opera dal vivo potete accedere alla


Il gadget mostrerà un susseguirsi di foto con i relativi titoli in alto e con gli strumenti di navigazione in basso. Vengono mostrati il numero totale delle foto della galleria e il numero di quella che stiamo visualizzando. Si può cliccare sul simbolo di Pausa per interrompere lo slideshow o vederlo di nuovo andando su Play. E' possibile passare alla immagine precedente o a quella successiva mediante le rispettive frecce. Se si clicca su una immagine apriamo la scheda del link che vi è associato.

Per l'installazione non si modifica il modello ma si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<style type="text/css">
#simplegallery1{position: relative; visibility: hidden; border: 8px solid  #8B0000;}
#simplegallery1 .gallerydesctext{text-align: left; padding: 2px 5px;} </style>
 
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/simplegallery.js">
/***********************************************
* Simple Controls Gallery- (c) 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 this script and 100s more
***********************************************/
</script>  
<script type="text/javascript">
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [200, 150], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [   

["https://lh4.googleusercontent.com/_nT13UtBmmiU/TUvEnNpQI8I/AAAAAAAARtQ/_eG7pNpLV7Y/alba200.jpg", "#", "", "Alba"],
["https://lh4.googleusercontent.com/_nT13UtBmmiU/TUv5cB3g5zI/AAAAAAAARto/EMjWn02qP2E/alba%20mare.jpg", "#", "_blank", "Alba sul mare"],

["https://lh5.googleusercontent.com/_nT13UtBmmiU/TUvEnbjwHxI/AAAAAAAARtU/y4NK8ZgE_XI/bicchieri200.jpg", "http://www.ideepercomputeredinternet.com/", "_new", "Bicchieri"],
["https://lh5.googleusercontent.com/_nT13UtBmmiU/TUvEnbNw_SI/AAAAAAAARtY/VUq7qEAT3-E/tramonto200.jpg", "#", "", "Tramonto"]
],

    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 600,
    oninit:function(){
    },
    onslide:function(curslide, i){
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
}) 
</script>
<noscript><a href='http://goo.gl/4aKkb' target='_blank'>Slideshow Widget</a></noscript>
<center><div id="simplegallery1"></div></center>


Ho evidenziato con colori diversi tutto quello che può essere personalizzato. Il concetto è quello di inserire una riga per ciascuna immagine che vogliamo visualizzare nello slideshow con questa sintassi
["URL DELLA IMMAGINE", "URL DEL COLLEGAMENTO", "", "TITOLO"],
Dove si devono inserire gli indirizzi della immagine e quello del link oltre al titolo che vogliamo visualizzare. Nel codice ho inserito immagini e link di prova per darvi subito un'idea del funzionamento. La virgola dopo la parentesi quadra va messa solo se la riga non è l'ultima della serie. Si possono inserire tutte le immagini che si vogliono. Tra le virgolette che non contengono niente si può inserire, opzionalmente, la stringa _blank o _new se vogliamo che la pagina si apra in un'altra scheda. Nel codice le prime due immagini le ho inserite con questa opzione.

Sono importanti le dimensioni delle foto che devono essere tutte uguali. Ho usato delle miniature 200x150 pixel circa. Il dato deve essere inserito nel codice in dimensions: [200, 150]. Si può anche personalizzare il bordo del widget modificando border: 8px solid  #8B0000; e ricordandoci gli stili dei bordi. Dopo l'inserimento dei dati richiesti si salva l'elemento e si posiziona nel punto desiderato della sidebar.




15 commenti :

  1. QUESTO RIMANE SEMPRE IL BLOG N°1

    RESPECT!

    RispondiElimina
  2. Sei davvero bravo. Grazie per le info utili.

    RispondiElimina
  3. temo che qualcosa nel codice non funzioni più.. ho provato ad inserirlo nel mio blog copiando paripari il codice linkato ma non esce nulla. vorrei creare una slideshow di immagini da mettere sotto l'header del blog..

    RispondiElimina
  4. GEKO24
    S' è vero c'era qualcosa che non andava. Adesso l'ho incollato ed è tutto a posto.

    RispondiElimina
  5. sul link della demo riesco a vedere l'anteprima.. ma compiandolo sul mio blog continua a non funzionare :(

    RispondiElimina
  6. No, mi correggo, stranamente funziona il codice che avevo uinserito la scorsa volta e quello nuovo no... bah

    RispondiElimina
  7. @GEKO 24
    Questo codice funziona. L'ho controllato proprio adesso.

    RispondiElimina
  8. Ciao Ernesto, avevo inserito questo gadget nel mio blog diversi mesi fa e funzionava benissimo. Poi ultimamente non ho seguito il blog per motivi personali e stamattina entrando dopo diverse settimane, mi sono accorta che non viene più visualizzato. Non mi pare di aver cambiato nulla l'ultima volta che sono entrata, ho soltanto aggiunto una foto con relativo link. Poco fa ho fatto una prova inserendo un nuovo gadget con il tuo codice, non compare neanche quello. Mi sai dire qualcosa? Grazie.
    Loredana

    RispondiElimina
    Risposte
    1. @Lori
      Mi spiace non riesco a farlo rifunzionare. Prova da sola andando nella pagina di Dynamic Drive di questo effetto
      http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

      Elimina
    2. @Lori
      Prova a caricare questo javascript
      https://sites.google.com/site/scriptperilblog/javascript-2/simplegallery.js
      su Dropbox. Io non lo posso fare altrimenti mi supera la larghezza di banda.

      Elimina
  9. Scusami, potresti spiegarmi la procedura per inserire i pulsanti "play", "pause" ecc. Grazie

    RispondiElimina
    Risposte
    1. @PegasusWebmaster
      Scarica questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/simplegallery.js
      Le icone dei tasti le vedi subito perché sono degli URL che iniziano per http
      Si possono sostituire anche con altre se è quello che intendi fare.

      Elimina
    2. Più che altro il mio problema era dovuto al fatto che il codice che ho trovato su Dynamic Drive funziona normalmente, però i pulsanti non compaiono neanche cambiando più volte l'URL nel file simplegallery.js ... e comunque se aggiungo quel file java script che mi hai consigliato, non funziona più niente.

      Elimina
    3. @PegasusWebmaster
      Se usi il javascript di Dynamic Drive allora usa le istruzioni che trovi lì.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.