✔ Javascript-basierte Bildergalerie

Ranger 1281

Ranger 1281

Mitglied
Hallo,

ich habe eine einfache Bildergalerie gesucht und diese hier gefunden. Ich meine die untere Variante mit den Textzeilen. Die Galerie habe ich auf 15 Bilder erweitert und grundsätzlich funktioniert alles wie es soll, bis auf eine Kleinigkeit:
Die 15 Miniblider werden in drei Zeilen mit je 5 Bildern dargestellt. Die ersten beiden Zeilen sind super, in der letzten Zeile werden jedoch die Abstände zwischen den Bilder kleiner dargestellt, so das die untere Zeile kürzer ist als die beiden oberen. Da ich in Javascript nicht besonders gut bin, hoffe ich auf eine Erklärung, bzw. Lösung.

Da die Seite noch im Entwurfsstadium ist habe ich einen Sreenshot angehängt.

Hier ist der gesamte Quelltext der betroffenen Seite:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Holzbau Schwippe</title>
<meta name="description" content="Holzbau Schwippe - Ihr Holzbauer, kompetent und zuverlässig" />
<meta name="keywords" content="holzbau,fachwerksanierung,fenstereinbau,innenausbau,trockenbau,holzrahmenbau,dachgeschossausbau,fachwerkbau,hausbau" />
<meta name="author" content="Ralf Schepp" />
<meta name="robots" content="all" />
<meta name="language" content="de" />
<meta name="DC.rights" content="Holzbau Schwippe" />
<meta http-equiv="date" content="11.02.2010" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/css; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/javascript; charset=iso-8859-1" />
<script type="text/javascript">
<!--
// Image-Preloader
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "../img/hbau_1.jpg";  // Pfad zum Bild
arrImg[0].txt = "Die ersten Teile kommen";              // Gewünschter Text
arrImg[1] = new Image();
arrImg[1].src = "../img/hbau_2.jpg";
arrImg[1].txt = "Bereits nach kurzer Zeit nimmt das Haus Formen an";
arrImg[2] = new Image();
arrImg[2].src = "../img/hbau_3.jpg";
arrImg[2].txt = "verbinden der Wandelemente";
arrImg[3] = new Image();
arrImg[3].src = "../img/hbau_4.jpg";
arrImg[3].txt = "die erste Innenwand";
arrImg[4] = new Image();
arrImg[4].src = "../img/hbau_5.jpg";
arrImg[4].txt = "Hier werden bereits die Giebel gestellt";
arrImg[5] = new Image();
arrImg[5].src = "../img/hbau_6.jpg";
arrImg[5].txt = "Und nun die Innenwände des Dachgeschosses";
arrImg[6] = new Image();
arrImg[6].src = "../img/hbau_7.jpg";
arrImg[6].txt = "Noch immer ist der erste Tag...";
arrImg[7] = new Image();
arrImg[7].src = "../img/hbau_8.jpg";
arrImg[7].txt = "Während der gesamten Bauphase wird alles genaustens kontrolliert und ausgerichtet";
arrImg[8] = new Image();
arrImg[8].src = "../img/hbau_9.jpg";
arrImg[8].txt = "Der Dachstuhl wird auf das Haus gesetzt";
arrImg[9] = new Image();
arrImg[9].src = "../img/hbau_10.jpg";
arrImg[9].txt = "Auch hier ist präzises Arbeiten selbstverständlich";
arrImg[10] = new Image();
arrImg[10].src = "../img/hbau_11.jpg";
arrImg[10].txt = "Der Dachstuhl wird gerichtet";
arrImg[11] = new Image();
arrImg[11].src = "../img/hbau_12.jpg";
arrImg[11].txt = "Danach folgen die Dachisolierung und die Dacheindeckung";
arrImg[12] = new Image();
arrImg[12].src = "../img/hbau_13.jpg";
arrImg[12].txt = "Fertig könnte es dann so aussehen";
arrImg[13] = new Image();
arrImg[13].src = "../img/hbau_14.jpg";
arrImg[13].txt = "Die Aussenfassade kann nach Ihren Wünschen gestaltet werden";
arrImg[14] = new Image();
arrImg[14].src = "../img/hbau_15.jpg";
arrImg[14].txt = "Wann sprechen wir über Ihr Haus?";

// swapImage
function swapImage(imgName, intImg){
  document.getElementById(imgName+"_imgID").src = arrImg[intImg].src;
  document.getElementById(imgName+"_outID").innerHTML = arrImg[intImg].txt;

  return false;
}
//-->
</script>
<style type="text/css">
body {
background-color: #995E28;
}
h1 {  color: #000000; font-family: arial,verdana, sans-serif; font-style: italic; font-size: 150%; font-weight: bold;
}
p {   color: #000000; font-family: arial,verdana, sans-serif; font-style: italic; font-size: 100%; font-weight: bold;
}
ul {  margin: 10px 0 0 0; padding: 0;
}
li {  display: inline; margin: 0 5px 0 0;
}
img { border: 0;
}
a {  color: #000000; font-family: arial,verdana, sans-serif; font-style: italic; font-size: 100%; font-weight: bold;
}
#imageBox {  color: #000000; font-family: arial,verdana, sans-serif; font-style: italic; font-size: 100%; font-weight: bold;
}
#box1 { position: fixed; left: 0px;  top: 0px;  z-index: 8;
}
#boxtop {  position: fixed; left: 0px; top: 30px; z-index: 7;
}
#box2 {  position: fixed; left: 0px; top: 780px; z-index: 6;
}
#menu {  position: fixed; left: 150px; top: 176px;
}
#leftmenu {  position: fixed;  left: 0px;  top: 180px;  z-index: 6;
}
#boxmain {  position: fixed; left: 150px; top: 180px;  z-index: 1;
}
#mainmenu {  position: fixed;  left: 300px; top: 285px;  z-index: 2;
}
#h1 {  position: absolute;  left: 28%;  top: 1px;  z-index: 2;
}
#main {  position: absolute;  left: 175px;  top: 200px; width: 650px;
}
#text1 {  position: absolute; left: 50px;  top: 35px;  width: 650px;  text-align: justify; z-index: 2;
}
#pic1 {  position: fixed;  left: 0px;  top: 30px;
}
#pic2 {  position: absolute; left: 650px; top: 580px;  z-index: 3;
}
#pic3 {   float: right;  top: 400px;  z-index: 3; padding: 4px; spacing: 4px;
}

</style>
</head>
<body link="#000000" alink="#E03333" vlink="#663300">
<div id="box1"><img src="http://www.tutorials.de/forum/img/top_bg_dummy.png" alt="Holzbau Schwippe" border="0" width="950" height="30"></div>
<div id="boxtop"><img src="http://www.tutorials.de/forum/img/top_br1.png" alt="Holzbau Schwippe" border="0" width="950" height="150"></div>

<div id="leftmenu"><img src="http://www.tutorials.de/forum/img/menu_left_br.png" alt="Holzbau Schwippe - Navigation" border="0" width="150" height="600" usemap="#menuleft"></div>
<map name="menuleft">
<area shape="rect" coords="0,0,150,40" href="index.html">
<area shape="rect" coords="0,40,150,80" href="firma.html">
<area shape="rect" coords="0,80,150,120" href="leistungen.html">
<area shape="rect" coords="0,120,150,160" href="referenzen.html">
<area shape="rect" coords="0,160,150,200" href="galerie.html">
<area shape="rect" coords="0,200,150,240" href="kontakt.html">
<area shape="rect" coords="0,280,150,320" href="impressum.html">
</map>
<div id="boxmain"><img src="http://www.tutorials.de/forum/img/bg_main.png" alt="Holzbau Schwippe" border="0" width="800" height="600"></div>
<div id="main">
<div id="h1"><h1>Hier entsteht ein Holzrahmenhaus</h1></div>
<div id="text1"><br />
     <div id="imageBox" align="center">
     <img src="http://www.tutorials.de/forum/img/hbau_1.jpg" alt="Holzrahmenhaus" width="300" height="225" id="start_imgID">
     <div id="start_outID">Holzrahmenhaus</div></div>

     <ul>
      <li><a href="#" onclick="return swapImage('start', 0);">
      <img src="http://www.tutorials.de/forum/img/hbau_1.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 1);">
      <img src="http://www.tutorials.de/forum/img/hbau_2.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 2);">
      <img src="http://www.tutorials.de/forum/img/hbau_3.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 3);">
      <img src="http://www.tutorials.de/forum/img/hbau_4.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 4);">
      <img src="http://www.tutorials.de/forum/img/hbau_5.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 5);">
      <img src="http://www.tutorials.de/forum/img/hbau_6.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 6);">
      <img src="http://www.tutorials.de/forum/img/hbau_7.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 7);">
      <img src="http://www.tutorials.de/forum/img/hbau_8.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 8);">
      <img src="http://www.tutorials.de/forum/img/hbau_9.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 9);">
      <img src="http://www.tutorials.de/forum/img/hbau_10.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 10);">
      <img src="http://www.tutorials.de/forum/img/hbau_11.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 11);">
      <img src="http://www.tutorials.de/forum/img/hbau_12.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 12);">
      <img src="http://www.tutorials.de/forum/img/hbau_13.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 13);">
      <img src="http://www.tutorials.de/forum/img/hbau_14.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
      <li><a href="#" onclick="return swapImage('start', 14);">
      <img src="http://www.tutorials.de/forum/img/hbau_15.jpg" alt="Holzrahmenhaus" border="0" width="120" height="90"></a></li>
     </ul>
                   <p>

                   <div id="pic2"><img src="http://www.tutorials.de/forum/img/logo_haus_1.png" alt="Holzbau Schwippe" border="0" width="19" height="26"></div>
                   </p></div></div>
</body>
</html>

------------------

Ich danke Euch schon mal im Voraus

Ralf
 

Anhänge

  • screenshot_1.jpg
    screenshot_1.jpg
    42 KB · Aufrufe: 160
Zuletzt bearbeitet von einem Moderator:
Hi,

hier liegt überhaupt kein Javascript-Problem vor.

Vielmehr muß da in deinem CSS etwas korrigiert werden.

Tausche hier display:inline gegen float:left aus:
CSS: 
li {  display: inline;  margin: 0 5px 0 0;
}

mfg Maik
 
Hi Maik,
danke für die prompte Antwort. Zunächst hat es geklappt, die Bilder werden vernünftig angezeigt. Nun habe ich jedoch die "listenpunkte" in der Ausgabe, das war vorher nicht der Fall.
Die korrigierte CSS- Zeile gehört übrigens zum Script, also ist im ursprünglichen Listing des Scriptes vorhanden, ich habe diese ebenfalls übernommen. Das hätte ich vorher bereits erwähnen sollen, sorry.
So zurück zum Problem. Um die "listenpunkte" los zu werden, habe ich die <ul> und <li>- Tags aus dem Quelltext entfernt. Das Ergebnis ist wieder mein ursprüngliches Problem, also die untere Zeile ist wieder kürzer.

Warum habe ich das Problem eigentlich nur in der unteren Zeile
 
Die Listenpunkte wirst du mit list-style-type:none bzw. list-style:none los :)

CSS: 
ul {  margin: 10px 0 0 0; padding: 0; list-style:none;
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück