<div>'s icm javascript

[Verwijderd]

Hallo allemaal,

Ik heb een image gallery gemaakt..erg leuk allemaal maar doet nog niet precies wat ik wil.

In de CSS-file:
/* Image Gallery*/
#thumbs {width:700px;}
#thumbs div {margin:5px; width:120px; height:90px; float:left;}
#thumbs div img{border:none; display:block; margin:5px auto;}

/*Big picture*/ (deze worden gebruikt in het java-script)
#bigDynPic{background:#369; position:absolute; top:1em; left:80px; padding:5px;}
#loadingmessage{position:absolute; top:200px; left:150px; padding:1em 5px; background:#ffc; font-family:Verdana,Sans-serif; font-weight:bold; width:20em; text-align:center; font-size:80%; color:#000;}

Als ik nou in de html-pagina het volgende doe:
<div id="thumbs">
<div><a href="http://www.plaatje.com/">[img]"http://www.plaatje.com/"[/img]</a></div>
</div>
..werkt dat ook allemaal heel fraai...

Maar als ik nou weer opnieuw datzelfde ga proberen:
<div id="thumbs">
<div><a href="http://www.plaatje.com/">[img]"http://www.plaatje.com/"[/img]</a></div>
</div>
...werken de thumnails wel, maar niet de #bigDynPic en #loadingmessage

Nou ben ik er inmiddels wel achter dat dat komt omdat ik die <div id="thumbs"> alweer gesloten heb, maar waarom kan ik 'm niet weer opnieuw aanroepen dan?
Alles binnen de eerste <div id="thumbs"> zetten werkt ook niet, want dan verneuk ik de layout van de pagina totaal.

Waarom werkt dat java-script niet meer nadat ik die <div id="thumbs"> gesloten heb? Of zijn er andere oplossingen?

[disjfa]

Id`s mag je maar een keer op een pagina gebruiken. Jij wilt classes gebruiken.

HTML:

<div class="thumbs">

Cascading Stylesheet:

.thumbs{...}

[crisp]

java != javascript; titel aangepast

[Verwijderd]

disjfa schreef op maandag 07 november 2005 @ 12:50:
Id`s mag je maar een keer op een pagina gebruiken. Jij wilt classes gebruiken.

HTML:

<div class="thumbs">

Cascading Stylesheet:

.thumbs{...}

Nou...het lullige is dat die thumbs gewoon werken.
Alleen het grote plaatje dat mbv het javasricpt erachter gebruik maakt van #bigDynPic en #loadingmessage dus niet.

Hier het stukje java:
function dyngallery()
{
var picId='bigDynPic';
var loadingId='loadingmessage';
...enz.....

[Verwijderd]

crisp schreef op maandag 07 november 2005 @ 12:55:
java != javascript; titel aangepast

sorry hoor , maar bedankt

[Verwijderd]

Waar staan de bigDynPic en loadingmessage precies, en wat is hun code? En heb je meerdere div's met id "thumbs" (met in elke een plaatje), of maar één, en staat daar dan de bigDynPic en loadingmessage in?

[Verwijderd]

Verwijderd schreef op maandag 07 november 2005 @ 23:11:
Waar staan de bigDynPic en loadingmessage precies, en wat is hun code? En heb je meerdere div's met id "thumbs" (met in elke een plaatje), of maar één, en staat daar dan de bigDynPic en loadingmessage in?

#bigDynPic{background:#369; position:absolute; top:1em; left:80px; padding:5px;}
#loadingmessage{position:absolute; top:200px; left:150px; padding:1em 5px; background:#ffc; font-family:Verdana,Sans-serif; font-weight:bold; width:20em; text-align:center; font-size:80%; color:#000;}
Staan beide in: image.css die via network_screen.css met @import url("http://.../css/images.css"); aangeroepen wordt.
MAAR...#bigDynPic en #loadingmessage worden aangeroepen vanuit het javascript: kutmetperen.js
(en dus niet vanuit de html-pagina, #thumbs ... wel)

Eerste stukje code van dat script:
function dyngallery()
{
var picId='bigDynPic';
var loadingId='loadingmessage';
...enz.....

Dus...vanuit de html-pagina wordt met div's de thumbs gemaakt...en als je op 1 van die thumbs zou klikken is de bedoeling dat het javascript een fraaie popup maakt met alleen dat plaatje en een border.
De thumbs werken, da's geen probleem, maar de popup werkt niet goed.
Als laatste een stukje van gallery.html om te laten zien hoe de thumbs geplaatst worden:
[/quote]
<div id="thumbs">
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
</div>

En hierna de volgende reeks thumbs:

<div id="thumbs">
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
<div><a href="http://../.JPG">[img]"http://.../TN_001.JPG"[/img]</a></div>
</div>
[quote]

[ Voor 41% gewijzigd door Verwijderd op 08-11-2005 09:15 ]