G
Gast170816
Ich habe eine Galerie gefunden, die ich gerade noch etwas zurecht bauen will.
Ich habe sie möglchst vereinfacht und sie nun ganz allein in einem div (das will ich dann später an beliebigen Stellen einbauen, aber erstmal muss es natürlich in sich stimmen).
Man sieht das ganze samt CSS und JS-Dateien unter http://freenet-homepage.de/kamerazurueckwinkerin/index.html
Hinweis:
Die Bilder werden nicht angezeigt, das ist nicht mein Problem, das ist erst durch das hochladen passiert... die CSS funktionieren allerdings. Man kann beim langsamen Hovern über den Bereich des Hauptbildes auch zwei lila Streifen sehen... das sind die Klickflächen um das Bild weiterzuschalten.
Und "highlight," war nur für mich eine Klasse, die zu Anschauzwecken einen roten Rahmen erzeugte.
Ansonsten ist das Schema (Rahmenfarben für bessere Übersicht, grüne Rahmenfarbe um Hauptbild ist samt Bild verschwunden):
<div id="mainContent">
<div id="picbox">
<div id="main_image">
</div>
<div id="image_nav">
</div>
</div>
</div>
Mein Problem stattdessen ist aber:
Die Bildnavigation image_nav (darin die Navigation als Liste) soll immer rechts neben dem Hauptbild sein.
Sie bleibt aber immer einfach unten stehn. Ich hab schon viele Sachen probiert mit "position: absolute" oder "relative" und ich hab die Navigation auch nach rechts und das Hauptbild nach links gefloatet. Aber es bleibt unverändert.
Diese CSS und JS-Dateien hab ich einfach mal mit kopiert. Ob man alle benötigt, vor allem "thickbox" weiß ich nicht.
Ich will es schaffen dass "picbox" in sich 100pro stimmt und ich dass dann beliebig weiter irgendwo einsetzen kann.
Ich habe sie möglchst vereinfacht und sie nun ganz allein in einem div (das will ich dann später an beliebigen Stellen einbauen, aber erstmal muss es natürlich in sich stimmen).
Man sieht das ganze samt CSS und JS-Dateien unter http://freenet-homepage.de/kamerazurueckwinkerin/index.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galeria Test</title>
<meta name="language" content="de" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<link href="galeria.css" rel="stylesheet" type="text/css" media="all" />
<link href="jquery.thickbox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="jquery.galleria.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.thickbox.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div id="mainContent">
<div id="picbox" class="highlight">
<div id="main_image" align="center" style="width:20px; height:293px; margin:10px 0px; display:inlne;">
<a href="#" class="before" style="width:20px; height:293px; display:block; text-indent:-5000px; position:absolute;" onclick="$.galleria.prev(); return false;">before</a>
<a href="#" class="after" style="width:20px; height:293px; display:block; text-indent:-5000px; position:absolute; left:968px;" onclick="$.galleria.next(); return false;" >after</a>
</div>
<div id="image_nav">
imagenavigation DAVOR
<ul class="galeria">
<li class='active'><img src='picbox/galleryis_01.jpg' alt='Gallery Is' width="440" height="293" /></li>
<li ><img src='picbox/galleryis_02.jpg' alt='Gallery Is' width="440" height="293" /></li>
<li ><img src='picbox/galleryis_03.jpg' alt='galleryis_03' width="440" height="293" /></li>
<li ><img src='picbox/galleryis_04.jpg' alt='galleryis_04' width="440" height="293" /></li>
<li ><img src='picbox/galleryis_02.jpg' alt='Gallery Is_02' width="440" height="293" /></li>
</ul>
imagenav DANACH
</div>
</div>
</div>
</body>
</html>Hinweis:
Die Bilder werden nicht angezeigt, das ist nicht mein Problem, das ist erst durch das hochladen passiert... die CSS funktionieren allerdings. Man kann beim langsamen Hovern über den Bereich des Hauptbildes auch zwei lila Streifen sehen... das sind die Klickflächen um das Bild weiterzuschalten.
Und "highlight," war nur für mich eine Klasse, die zu Anschauzwecken einen roten Rahmen erzeugte.
Ansonsten ist das Schema (Rahmenfarben für bessere Übersicht, grüne Rahmenfarbe um Hauptbild ist samt Bild verschwunden):
<div id="mainContent">
<div id="picbox">
<div id="main_image">
</div>
<div id="image_nav">
</div>
</div>
</div>
Mein Problem stattdessen ist aber:
Die Bildnavigation image_nav (darin die Navigation als Liste) soll immer rechts neben dem Hauptbild sein.
Sie bleibt aber immer einfach unten stehn. Ich hab schon viele Sachen probiert mit "position: absolute" oder "relative" und ich hab die Navigation auch nach rechts und das Hauptbild nach links gefloatet. Aber es bleibt unverändert.
Diese CSS und JS-Dateien hab ich einfach mal mit kopiert. Ob man alle benötigt, vor allem "thickbox" weiß ich nicht.
Ich will es schaffen dass "picbox" in sich 100pro stimmt und ich dass dann beliebig weiter irgendwo einsetzen kann.
