• User

    Galleria immagini javascript

    Dopo varie ricerche, ho trovato quello che fa per me: si tratta di una galleria che mi permette di visualizzare, nella stessa pagina, le miniature a sinistra e le immagini ingrandite a destra. Avrei tuttavia bisogno del vostro prezioso aiuto perché vorrei che sotto le immagini ingrandite ( a destra) comparisse una loro descrizione .

    **
    questo è il codice**

    
    window.onload=function(){
    if(!document.getElementById || !document.getElementsByTagName) return;
    links=document.getElementById("minipics").getElementsByTagName("a");
    for(i=0;i<links.length;i++)
        links*.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));
    }
    
    

    **
    questo è il css**

    
    html{margin:0;padding:0}
    body{font: 12px arial,sans-serif;margin:0;padding: 0 5px}
    img{border:0}
    div#container{width:740px}
    div#header img{float:left}
    div#header h2{float:left;margin:24px 0 0 0;font-size:100%}
    div#zoom{float:right;margin:0 0 5px 0;padding: 5px;border:1px solid #ccc}
    div#zoom h3{margin:0;font-size:100%;color: #666;text-align:center}
    div#zoom img{display:block;width:400px;height:400px}
    div#minipics{margin-right:415px}
    div#minipics ul{list-style-type: none;margin: 0;padding: 0}
    div#minipics li{float:left;margin:0 5px 5px 5px;border:1px solid;padding: 3px}
    
    

    questo è il file html

    
    <div id="gallery">
      <div id="zoom">
        <h3 id="**titolo**">Clicca sulle miniature per vedere gli ingrandimenti.</h3>
        <img src="empty.jpg" id="**bigimage**" alt="">
      </div>
      <div id="**minipics**">
        <ul>
          <li><a href="egg.jpg"><img src="egg_small.jpg" alt="uovo" title="Uovo"></a></li>
          <li><a href="field.jpg"><img src="field_small.jpg" alt="Campo di grano in una notte d'estate" title="Campo di grano in una notte d'estate"></a></li>
          <li><a href="orange.jpg"><img src="orange_small.jpg" alt="Arancia digitale" title="Arancia digitale"></a></li>
          <li><a href="forestonWater.jpg"><img src="forestonWater_small.jpg" alt="foresta frullata" title="Foresta frullata"></a></li>
        </ul>
      </div>
    </div> 
    
    

    Aiutandolo, rendereste davvero felice quest'uomo.Grazie.