modificare gallery

**Alacazama** · 03-06-2006, 11:39

ciao a tutti, seguendo un articolo di questo sito, (nella sezione webdesign) su come creare un gallery con delle miniature in in alto a sinistra, che cliccate vanno ad aprire l'immagine estesa al centro della pagina (senza ricaricare la stessa).
il problema adesso è: se invece delle miniature vorrei del testo in alto a sinistra?

riporto il codice per rendere l'idea...

pagina html:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Digital Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" href="gallery.css">
<script type="text/javascript" src="onpage.js"></script>
</head>
<body>
<div id="container">
  <div id="header">[img]header.jpg[/img]
  <h2>Esperimenti digitali. © HTML.it & Alessandro Fulciniti</h2>
  </div>
  <div id="gallery">
    <div id="zoom"><h3 id="titolo">Clicca sulle miniature per vedere gli ingrandimenti.</h3>
        [img]empty.jpg[/img]
    </div>
    <div id="minipics">
      <ul>[*][img]egg_small.jpg[/img][*][img]field_small.jpg[/img][*][img]orange_small.jpg[/img][*][img]forestonWater_small.jpg[/img][*][img]sleep_small.jpg[/img][*][img]optical_small.jpg[/img][*][img]ghosts_small.jpg[/img][*][img]join_small.jpg[/img][*][img]hypergrid_small.jpg[/img][*][img]macchia_small.jpg[/img][*][img]tunnel_small.jpg[/img][*][img]sea_small.jpg[/img][/list]
      <div style="clear:left"></div>
    </div>
  </div>
</div>
</body>
</html>

css:

codice:

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 #ccc;padding: 3px}

javascript:

codice:

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));
}

ho provato a sostituire una miniatura con del testo, ma il risultato che ottengo è un immagine che si vede per circa mezzo secondo nella stessa pagina, per poi aprirsi in una nuova finestra.

c'è qualcuno (bravissima persona

) che può aiutarmi?

**Xinod** · 03-06-2006, 12:42

mi pare che l' unico problema sia rappresentato da questa istruzione
smallimg=obj.getElementsByTagName("img")[0];
perche' chiaramente in un link testuale non e' contenuta un' immagine

se vuoi utilizzare lo stesso script in entrambi i casi
credo che una modifica del genere possa bastare

codice:

smallimg=(obj.getElementsByTagName("img").length!=0)?obj.getElementsByTagName("img")[0]:obj;

ricordati di assegnare un title al link anche se solo testuale, perche' viene utilizzato cmq in questa istruzione seguente
t.appendChild(document.createTextNode(smallimg.tit le));

ciao

**Alacazama** · 03-06-2006, 12:51

siete come sempre i migliori, grazie mille.

Discussione: modificare gallery

Strumenti discussione

Ricerca discussione

Visualizza

modificare gallery

Permessi di invio