Premetto che mi affaccio da circa un anno sul complesso panorama del web design; sto masticando css e html già da qualche mese, ma quando si tratta di Javascript non riesco a produrre più che un banale copia-incolla;
la mia problematica è questa:
sto progettando un sito in html di 7 pagine, ognuna delle quali presenta una gallery e un testo descrittivo per ogni immagine.
La gallery funziona correttamente, vi posto il codice HTML e il Javascript:
HTML
<ul id="gallery">[*][img]../immagini/idraulica/1.jpg[/img][*][img]../immagini/idraulica/2.jpg[/img][*][img]../immagini/idraulica/3.jpg[/img][*][img]../immagini/idraulica/4.jpg[/img][*][img]../immagini/idraulica/5.jpg[/img][*][img]../immagini/idraulica/6.jpg[/img]
<li class="ultima">[img]../immagini/idraulica/7.jpg[/img][/list]
Javascript
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagNa me('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagNa me('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
In questo modo ottengo delle thumbnails, che una volta cliccate, mi restituiscono l'immagine relativa. Fin qua tutto ok.
Il problema sorge quando devo associare una descrizione diversa a ciascuna immagine, non riproducibile tramite i tag title o alt, ma testo più lungo e complesso, racchiuso in un DIV.
La mia domanda (che spero che qualche anima pia traduca in JS...) è la seguente:
si può fare in modo che al momento del click sulla thumbnails, compaia oltre che l'immagine anche il DIV relativo con il testo?
Ricordo che in ogni pagina, ho circa 6 o 7 immagini diverse, ognuna con proprio DIV testuale.
PS: sarebbe funzionale e estetico aggiungere dei veloci effetti di dissolvenza fra la comparsa di un'immagine e DIV relativo e comparsa di un'altra immagine e altro DIV, ovviamente è un di più, prima vorrei riuscire a farlo funzionare anche in maniera statica.
Spero di essere stato abbastanza chiaro!
Attendo una risposta, e ringrazio della disponibilità fin da subito.
Rispondi quotando
