giovedì 16 aprile 2009

Random Image su blogger

Fino ad oggi ho giocato con vari linguaggi di programmazione, con la preferenza negli ultimi tempi verso python (e in effetti le modifiche al template di questo blog le gestisco attraverso uno scriptino in python).
Ora, in fase di acchitto di questo blogghe, ho provato a realizzare usando the infamous javascript un qualcosa che carichi una immagine differente ad ogni reload di pagina; essendo io totalmente digiuno in materia, dopo un po' di giri su google ho composto questa soluzione.

La funzioncina che ha il compito di "estrarre" l'immagine random, fra le (per il momento) tre che ho scelto, messa subito prima del tag <head> del template di blogger:
<script type="text/javascript">/* RANDOM IMAGE LOADER*/
function rand ( n )
{
return ( Math.floor ( Math.random ( ) * n + 1 ) );
}


// Store some random image URL's

var random_images = new Array ( );
random_images[0] = "http://www.hiroshige.org.uk/hiroshige/nature_prints/nature_chu-tanzaku/images/owl_pine_branch.jpg";
random_images[1] = "http://www.hiroshige.org.uk/hiroshige/nature_prints/nature_chu-tanzaku/images/goldfish_medakafish.jpg";
random_images[2] = "http://www.hiroshige.org.uk/hiroshige/nature_prints/nature_chu-tanzaku/images/willow_horses.jpg";

// Pick a random image from the list,
// and set the image source to point to the image

function pick_image ( )
{
document.getElementById("random-image_GG").src = random_images[rand(3)-1];
}
window.onload = pick_image
</script>

fatto ciò, mettete il widget che mostra l'immagine nel punto del template dove volete sia:
<b:widget id='Image1' locked='false' title='RandomImage' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'><img alt='Random Image' border='0' id='random-image_GG' style='margin: 0pt 10px 10px 0pt; display: block; cursor: pointer; width: 150px; height: 350px;'/></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

e questo è tutto... per adesso... Già so che cambierò questo script n volte con n molto grande nel prossimo futuro... per dirne una vorrei che il titolino del pannello che contiene l'immagine cambi a seconda dell'immagine mostrata... vedremo..

Nessun commento:

Posta un commento