Galleria di immagini Coin Slider con effetti di transizione per Blogger.

Galleria di immagini con Effetto Coin Slider per Blogger

Questa galleria di immagini, chiamata Coin Slider dal suo autore, è veramente interessante perché coniuga effetti suggestivi con una certa semplicità di installazione. E' compatibile con tutti i browser, anche con i più datati. Per avere una idea del funzionamento, date uno sguardo alla

Demo della Galleria Coin Slider

Ricorda un po' l'effetto Piecemaker anche se è più semplice e meno pesante da caricare. Anche in questo caso vengono visualizzate delle immagini che si susseguono automaticamente con effetti di transizione. Sotto le foto sono visibili i bottoni di navigazione per aprire ciascuna di essa

Se si punta l'immagine con il mouse, si vedono anche le scritte Precedente e Successiva per passare alle foto adiacenti. Per l'installazione bisogna andare su Design > Modifica HTML e cercare la riga </head>. Immediatamente sopra si incolla il seguente codice

<!--Galleria Coin Slider Inizio-->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider.min.js' type='text/javascript'/>
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider-styles.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#coin-slider&#39;).coinslider();
});
</script>
<noscript><a href='http://goo.gl/l4eBf' target='_blank'>Coin Slider Gallery</a></noscript>
<!--Galleria Coin Slider Fine - http://www.ideepercomputeredinternet.com-->

Salvate il modello. Il codice della galleria deve essere incollato in un elemento HTML. Si può anche inserire in delle pagine statiche ma si deve sempre andare su Design > Aggiungi un gadget > HTML/Javascript. Poi eventualmente si può inserire una condizione per mostrare questa galleria solo in quella determinata pagina attraverso i tag condizionali. Il codice da inserire nell'elemento HTML può essere simile a questo

<div align="center"><div id='coin-slider'>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDNdj_IcBOoZF9mWwfeDEPpi9hK8fZAmcNDx8amHMYuuMx__l2zFkmBQ97SxKv6Je1cXLgitansm1VTaSloU76l5l_Hh67F3z_Nr73ERHIixTAbHEHQeUIEqW390VNlrM1FXH6ySX-EM/s900/piecemaker7.jpg" />
<span>
Albero spoglio
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Nuvole tempestose
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Conchiglie sulla sabbia
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Prato fiorito
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Scoglio sul mare
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Foglie in Autunno
</span>
</a>
</div></div>

La sintassi di ciascuna foto inserita è la seguente

<a href="URL COLLEGAMENTO" target="_blank">
<img style="width: 900px; height: 360px;" src="URL IMMAGINE" />
<span>
TITOLO IMMAGINE O POST COLLEGATO
</span>
</a>

dove si sostituiscono le parti in rosso con l'indirizzo della pagina collegata a ciascuna foto e il suo URL. Si mette anche il titolo della immagine o del post collegato che sarà visibile nella parte bassa. La riga iniziale <div align="center"> e quella finale </div> possono essere tolte se si vogliono visualizzare i titoli sulla sinistra delle immagini e non al centro. Dopo aver cliccato su Salva si va su Design > Elementi pagina e, con il drag and drop del mouse, si posiziona la galleria Coin Slider.

Aggiornamento: i più esperti possono modificare le dimensioni di default delle immagini aprendo con Notepad++ il file coin-slider.min.js e il CSS coin-slider-styles.css. Nel primo si possono modificare i parametri di default

  defaults=width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})

riguardo a dimensioni delle immagini, velocità, opacità e effetti. I parametri possono essere configurati secondo le istruzioni della pagina dell'autore nella sezione  List of all options. Nel file CSS si può modificare la lunghezza del titolo width: 545px; oltre ad altri parametri quali il padding, il colore di background e il colore del titolo. Dopo aver modificato questi file vanno caricati su servizi tipo Google Sites in modalità Schedario o DropBox. Ringrazio asd teamlenox per aver sollevato il problema di una maggiore personalizzazione.

Fonte | Coin Slider JQuery -