✔ JavaScript-basierte Bildergalerie

Status
Nicht offen für weitere Antworten.
G

-GS-Master

Erfahrenes Mitglied
Also hab sowas schon öffters gesehen und glaube es hat mit php oder JavaScript zu tun ... weiß es leider nicht genau.
So jetzt fang ich mal an ^^ wisst ihr wo ich ein tutorial herbekomme, das mir erklärt wie ich es schaffe dass ich laute "miniatur" bilder habe sagenw wir mal z.b 5 und dafür ist ein großes.

Wenni ich jetzt eines der "miniatur" Bilder drücke, erscheint es oben in dem großen bild ... also je nach dem welches bild ich drücke ...
 
Stellst Du Dir das eventuell so vor?

HTML: 
<!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=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
image3 = new Image();
image3.src = "pic03.jpg";
image4 = new Image();
image4.src = "pic04.jpg";
image5 = new Image();
image5.src = "pic05.jpg";

// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
//-->
</script>

<style type="text/css">
<!--
ul {
margin: 10px 0 0 0;
padding: 0;
}

li {
display: inline;
margin: 0 5px 0 0;
}

a img {
border: 0;
}
-->
</style>

</head>
<body>

<div id="imageBox">
   <img src="pic00.jpg" alt="" name="start">
</div>

<ul>
    <li><a href="#" onclick="swapImage('start','pic01.jpg')"><img src="pic01_th.jpg" alt="load pic01"></a></li>
    <li><a href="#" onclick="swapImage('start','pic02.jpg')"><img src="pic02_th.jpg" alt="load pic02"></a></li>
    <li><a href="#" onclick="swapImage('start','pic03.jpg')"><img src="pic03_th.jpg" alt="load pic03"></a></li>
    <li><a href="#" onclick="swapImage('start','pic04.jpg')"><img src="pic04_th.jpg" alt="load pic04"></a></li>
    <li><a href="#" onclick="swapImage('start','pic05.jpg')"><img src="pic05_th.jpg" alt="load pic05"></a></li>
</ul>

</body>
</html>
 
Hi zusammen

Ich hoffe ihr könnt mir helfen, also ich habe dieses Bildergalerie Script hier verwendet und es läuft alles perfekt..;-)

Aber ich möchte dass ich zu jedem Bild unten einen Kommentar hinschreiben kann und dieser dann, wenn das Bild vergrössert wird, unter dem Bild gezeigt wird..was müsste ich da noch hinzufügen

thanks

mfg
 
Hi,

versuchs mal so:

Code: 
<!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=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
// Image-Preloader
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "../bilder/fussball.jpg";  // Pfad zum Bild
arrImg[0].txt = "Fussball 0";              // Gewünschter Text
arrImg[1] = new Image();
arrImg[1].src = "../bilder/fussball1.jpg";
arrImg[1].txt = "Fussball 1";
arrImg[2] = new Image();
arrImg[2].src = "../bilder/fussball2.jpg";
arrImg[2].txt = "Fussball 2";
arrImg[3] = new Image();
arrImg[3].src = "../bilder/fussball3.jpg";
arrImg[3].txt = "Fussball 3";
arrImg[4] = new Image();
arrImg[4].src = "../bilder/fussball4.jpg";
arrImg[4].txt = "Fussball 4";

// 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">
<!--
ul {
margin: 10px 0 0 0;
padding: 0;
}

li {
display: inline;
margin: 0 5px 0 0;
}

img {
border: 0;
}
-->
</style>

</head>
<body>

<div id="imageBox">
  <img src="../bilder/fussball.jpg" alt="" id="start_imgID">
  <div id="start_outID">Fussball 0</div>
</div>

<ul>
  <li><a href="#" onclick="return swapImage('start', 0);"><img src="../bilder/fussball.jpg" alt="load pic01"></a></li>
  <li><a href="#" onclick="return swapImage('start', 1);"><img src="../bilder/fussball1.jpg" alt="load pic02"></a></li>
  <li><a href="#" onclick="return swapImage('start', 2);"><img src="../bilder/fussball2.jpg" alt="load pic03"></a></li>
  <li><a href="#" onclick="return swapImage('start', 3);"><img src="../bilder/fussball3.jpg" alt="load pic04"></a></li>
  <li><a href="#" onclick="return swapImage('start', 4);"><img src="../bilder/fussball4.jpg" alt="load pic05"></a></li>
</ul>

</body>
</html>
Ciao
Quaese
 
Bildergalerie Probleme im FF

Hallo zusammen,

ich habe hier im Forum die Anleitung zu einer einfachen js Bildergalerie gefunden ( http://www.tutorials.de/forum/javascript/253844-javascript-basierte-bildergalerie.html ). Diese funktioniert im Prinzip auch hervorragend, nur der FireFox macht Probleme. Ich habe die untere Variante umgesetzt, mit dem Kommentaren zu den Bildern und erhalte dabei im FF folgenden Fehler:

Fehler: document.getElementById(imgName + "_imgID") has no properties ...

Im IE und Opera arbeitet es aber hervoragend. Jemand ne Idee was das sein könnte?

Danke schonmal.
 
Zuletzt bearbeitet:
hi,
entferne bitte mal die ")" am Ende deines Links, sonst wird sichs niemand ansehn können. Vielleicht hast du auch einen Link zu deinem eigenen Beispiel, das würde die Hilfe vermutlich auch erleichtern.
 
Hi!

Ich war mal so frei, deinen neu erstellten Thread hier unterzubringen, da du dich ja auf Quaeses Beispiel beziehst. ;)

@Topic: Kann es sein, dass du der Startgrafik nicht die ID zugewiesen hast?

Code: 
<div id="imageBox">
  <img src="../bilder/fussball.jpg" alt="" id="start_imgID">
  <div id="start_outID">Fussball 0</div>
</div>
Ansonsten solltest du mal deinen Quellcode zeigen.
 
Hallo,

vielen Dank. Das wars. Kleiner Rechtschreibfehler, wie peinlich ... :)

Ich danke für die schnelle Hilfe :)

Ihr seit echt gut hier. Konnte schon viel lernen. Danke!!
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück