nicht angemeldet
Hallo,
Hallo zusammen,
Eine kleine, einfache Fotogalerie (mit php realisiert) enthält (u.a.)einen div-Block "t" mit thumbnails
und einen div-Block "b" mit dem aktuell ausgewählten, eigentlichen Bild.
div "t" ist absolut positioniert und hat definierte Breite und Höhe; overflow:auto.
Die thumbnails sind untereinander angeordnet und passen nicht alle in div "t"; deswegen erscheint ein
senkrechter Scrollbalken am rechten Rand von div "t".Durch Klick auf eins der thumbnails wird die Seite neu aufgerufen (z.B. <a href="../bilder/galerie.php?n=10">)
und geladen mit dem aktuellen Bild (in diesem Fall mit Bild Nr.10) in div "b"; und das zum Bild Nr. 10 gehörende
thumbnail hat einen andersfarbigen Rahmen als die anderen.
Soweit alles in Ordnung.Wie kann ich dafür sorgen, dass thumbnail Nr. 10 an einer definierten Position in div "t" erscheint; also
der Scrollbalken von div "t" schon ein Stück nach unten gescrollt ist?
Das kannst Du erreichen, indem Du mit dem Link einen Anker anspringst.
Bsp.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>scroll into view</title>
<style type="text/css">
ul {position:absolute; top:10em; left:10ex; width:20ex; height:6em; overflow:auto; background-color:yellow;}
li {margin:0; padding:0; padding-top: 1em; border:1px solid; }
</style>
</head>
<body>
<h1>scroll into view</h1>
<ul>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==1)?'scrollinview':'i1'; ?>"><a href="test.php?n=1#scrollinview">Bild1</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==2)?'scrollinview':'i2'; ?>"><a href="test.php?n=2#scrollinview">Bild2</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==3)?'scrollinview':'i3'; ?>"><a href="test.php?n=3#scrollinview">Bild3</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==4)?'scrollinview':'i4'; ?>"><a href="test.php?n=4#scrollinview">Bild4</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==5)?'scrollinview':'i5'; ?>"><a href="test.php?n=5#scrollinview">Bild5</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==6)?'scrollinview':'i6'; ?>"><a href="test.php?n=6#scrollinview">Bild6</a></li>
<li id="<?php echo (isset($_GET['n']) && $_GET['n']==7)?'scrollinview':'i7'; ?>"><a href="test.php?n=7#scrollinview">Bild7</a></li>
</ul>
<p>lorem ipsum ...</p>
</body>
</html>
Der Trick ist, es wird immer der Anker "scrollinview" angesprungen aber PHP setzt die entsprechende ID jeweils bei der LI, deren Link gerade angefordert wurde.
viele Grüße
Axel