fotogallery

**matteo01** · 05-03-2006, 17:35

E' tutto il pomeriggio che sto cercando di adattare questo esempio:
http://pro.html.it/articoli/id_475/idcat_31/pro.html
alle mie esigenze, ma niente! Ogni tentativo che faccio trovo degli errori, a volte in IE e altre in FF.
Praticamente, potete darmi qualche dritta su come creare una galleria fotografica come quella ma con in alto tutte le miniature e sotto il box contenente le immagini ingrandite? Il tutto contenuto dentro ad un altro div nella mia pagina! Per farmi capire allego un disegno che riporta a grandi linee la posizione che la fotogallery (in rosso)dovrebbe avere!
Grazie a chi mi aiuterà!

**matteo01** · 05-03-2006, 20:24

Allora, dopo mille prove mi son scritto da me il css, modifivcando i paramentri necessari al cambio nome nche nel javascript! Ma continuo ad ottenere gli stessi identici errori!
Posto il codice..se qualcuno avrà voglia di dargli un occhiata..

L' HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="fot.css">
<link rel="stylesheet" type="text/css" href="home.css">
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<div id="fotogallery">
<div id="miniature">
<ul>[*][img]small/1.jpg[/img][*][img]small/2.jpg[/img][*][img]small/3.jpg[/img][*][img]small/4.jpg[/img][/list]

<div id="big">
<h3 id="titolo">Clicca sulle miniature per vedere gli ingrandimenti.</h3>
[img]big/1.jpg[/img]
</div>
<ul>[*][img]small/5.jpg[/img][*][img]small/6.jpg[/img][*][img]small/7.jpg[/img][*][img]small/8.jpg[/img][/list]
</div>
</div>
</body>
</html>

IL CSS:

div#fotogallery {
width: 557px;
background-color: #ff0000;
}
div#miniature ul{
list-style-type: none;
margin: 0px 0px 0px 87px;
padding: 0px;
}
div#miniature li {
float: left;
margin: auto;
}
div#miniature img {
border: 0px;
}
div#big {
width: 400px;
height: 340px;
margin: auto;
border: 1px solid #ffffff;
}
div#big h3 {
font: 12px tahoma;
color: #ffffff;
margin: 0px;
padding: 0px;
text-align: center;
}

IL JAVASCRIPT

window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("miniature").getElem entsByTagName("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.tit le));
}

Qui ho provato ad ottenere un effetto un pò diverso da quello riportato nell' immagine del post precedente...ho provato a mettere delle miniature sopra la finestra di ingrandimento e altre sotto..

**matteo01** · 06-03-2006, 13:19

nessuno sa consigliarmi?

**matteo01** · 06-03-2006, 14:07

Come non detto, credo di aver risolto!
se ho capito, il problema erano alcuni paramentri contenuti in un CSS esterno, eliminando quelli e provando a dare una sistemata sembra che ora vada!!

Speriam bene...

Discussione: fotogallery

Strumenti discussione

Ricerca discussione

Visualizza

fotogallery

Permessi di invio