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

Per vedere l'effetto all'opera dal vivo potete accedere alla

• Demo online della Semplice Galleria con Slideshow -

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcivHl_epW6bzFb87HJ2GxMiE2Aky0mfOUyA3le4PZtw_-JXBYp-DCR2AuTQW2U2yhHtp5iXuPP_UnfZp3kvbQQgQmtVfkj4q2apavBCPtCMkb9nMkSGJYbbFT7E36ZfDKcU2sfdEIlK8/", "#", "", "Alba"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFZZN-y8wBtHyXruSZkd9OtHijjPXEVsUY1M8_CsU43kkvDCNvFiaNpQsevFx9x0PFom6kJbkpSqvf7RrbcQaHn9-yIuAXxs6ce8dMUUsV8Na8UW5AoX_AxquWiEGodHcO_Q7okkO45G6/", "#", "_blank", "Alba sul mare"],

["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhod3YYMCUtDcLHke5ofcpiscrrjHeF_RNE9CYrLglvppuBBulGyk9dHQlNESnJcXhw86GKZ-cj8s8xgmexKKMIDnE8jUrCZVQISoShv9CLeSkp8ejroIbNbx-6IMII7uOzKcjPZNYlMW8/", "http://www.ideepercomputeredinternet.com/", "_new", "Bicchieri"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkFr8gp2aaPP9Q0qm86n9I9qmnf8Khno8wvrR107Q_ulDPk4RfVG9-sf73f78oPIKbFHuHr7x5IurUD-IRLp_adBD7elynYQuC0_zagT-rhMCV8xdCcRsruHXhEzZfPxkSZtNHWh4kLA/", "#", "", "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.