il bagnino digitale

Per il sito dell'artista Eva Zuccolo mi è stata richiesta una foto gallery.
Ho deciso di scartare l'accattivante e diciamolo velocissima tecnologia flash un po' per motivi filosofici (i linguaggi proprietari proprio non mi vanno giù) un po' perchè mannaggia ad Adobe adesso e a Macromedia prima crea problemi di indicizzazione sui motori di ricerca.
Non mi andava poi certo di fare una banalissima pagina HTML o XHTML perchè avevo a cuore che l'esperienza dell'utente non fosse disturbata dal noiosissimo refresh della pagina.
AJAX? troppo sbattimento per pochi soldi.... Non si vive di sola gloria insomma ;)
Nel mio pur ristretto panorama rimaneva solo Javascript con le limitazioni del caso, bevvi dall'amaro calice e scelsi LUI!
Restava solo un problema di non lieve entità: e se nel brawser dell'utente Js non fosse abilitato?
ecco la soluzione, la posto chiedendo scusa all'autore da cui l'ho copiata e modificata secondo le mie esigenze perchè non riesco piu' a trovare la fonte originale. Spero non me ne voglia ma, facciamole circolare ste idee che è così bello : )


dunque... ecco lo scriptino, consiglio di copiarlo in un file esterno e di agganciarlo alla pagina HTML

window.onload=function(){

if(!document.getElementById || !document.getElementsByTagName) return;

links=document.getElementById("minipics").getElementsByTagName("a");

for(i=0;i<links.length;i++)

links[i].onclick=function(){Show(this);return(false)}

}

function Show(obj){

bigimg=document.getElementById("bigimage");

bigimg.src=obj.getAttribute("href");

smallimg=obj.getElementsByTagName("img")[0];

t=document.getElementById("titolo");

t.removeChild(t.lastChild);

t.appendChild(document.createTextNode(smallimg.title));

}

ecco come si richiama....

poi nell'html..

<img src="percorsoimmagine/empty.jpg" id="bigimage" alt="">

che sarà l'immagine zoom, mettela un po' dove volete secondo il vostro layout, non dimenticatevi di creare un'immagine vuota e chiamarla "empty.jpg". in questo caso l'immagine è sulla root directory ma potete metterla dove volete ovviamente specificando il corretto percorso sulla proprietà "src="


sotto l'immagine piazzateci

<h3 id="titolo">Clicca sulle miniature per vedere gli ingrandimenti.</h3>

che sarà prima un'indicazione di utilizzo della galleria e poi una didascalia dell'immagine

poi create un elenco puntato, dei div con float o piu' semplicemente una tabella (visto che servono per intabellere perchè non usarle? a volte la questione del tableless sta diventando una ossessione... e viola gli stadard a mio parere!!!!!) e metteci

<a href="percorsoimmagine/immaginezoom.jpg"><img src="percorsoimmagine/immaginemini.jpg" title="didascaliaimmagine"></a>

che sarà la miniatura. ovviamente vale il solito discorso del nome e del percorso...
replicate il codice per ogni immagine della galleria ed il gioco è fatto.

Come funziona?

ogni miniatura è linkata direttamente all'immagine ingrandita in modo che con Js disattivato l'immagine è accessibile comunque.
se Js è attivo tramite il DOM viene attaccato al src dell'immagine grande il percorso corretto.
Tutto qui.
Io l'ho trovato geniale nella sua semplicità ed eleganza.
Chiaramente non è indicato per siti dinamici ma con un po' di lavoro si puo' riutilizzare comodamente.

consiglio per l'indicizzazione: mettete dei nomi alle immagini che abbiano le keywords di interesse

spero di esservi stato utile... se avete problemi chiedetemi pure.

un esempio di come ho usato sto script lo trovate in http://www.evazuccolo.it