Hallo @ alle,
ich bin völlig neu hier und blutiger Anfänger in JavaScript.
Bitte um Tipps zur Erstellung einer Bildergalerie. Hab bereits sehr viel gesucht, aber nicht das richtige gefunden, bzw. das, was ich gefunden habe, nicht verstanden.
Ich habe vor, eine Bildergalerie zu erstellen. Die Funktion sollte aus nachstehendem Code eigentlich bereits erkennbar sein, auch wenn etliches nicht so funktioniert, wie es soll (die Pfeile sollen mal rechts und links neben dem Bild bzw. den Thumbnails stehen, das mache ich mittels CSS, ist also kein Problem):
Da ich es lernen möchte, bitte ich um Tipps und Anregungen, wo meine Denkfehler sind, sowie natürlich um Tipps, wie ich es besser machen kann.
Außerdem möchte ich zum Schluss das Script in eine externe Datei auslagern.
Der Bereich, der nur ausgeführt werden kann, wenn der Browser JavaScript unterstützt, soll in einen Script-Tag, um mittels <noscript> eine alternative Galerie einbinden zu können. Auch hierzu hätte ich gerne einen Tipp.
Vielen Dank schon mal!
Grüße
Bernhard
Edit: P.S.: was mache ich beim Schreiben meines Beitrages falsch, dass der HTML-Code so unübersichtlich in einer Zeile dargestellt wird?
ich bin völlig neu hier und blutiger Anfänger in JavaScript.
Bitte um Tipps zur Erstellung einer Bildergalerie. Hab bereits sehr viel gesucht, aber nicht das richtige gefunden, bzw. das, was ich gefunden habe, nicht verstanden.
Ich habe vor, eine Bildergalerie zu erstellen. Die Funktion sollte aus nachstehendem Code eigentlich bereits erkennbar sein, auch wenn etliches nicht so funktioniert, wie es soll (die Pfeile sollen mal rechts und links neben dem Bild bzw. den Thumbnails stehen, das mache ich mittels CSS, ist also kein Problem):
- bei Klick auf einen Pfeil neben dem großen Bild soll das nächste bzw. das vorhergehende angezeigt werden, das funktioniert bislang halbwegs.
- gleichzeitig soll dann als zweiter Thumb der zum großen Bild gehörende angezeigt werden, als erster der zum vorhergehenden, als dritter der zum nachfolgenden (idealerweise sollte der "aktive" auch noch hervorgehoben werden, wobei ich glaube, dass ich das hinbekomme).
- bei Klick auf einen Pfeil neben den Thumbs "bewegen" sich diese in die entsprechende Richtung um ein Bild weiter, ohne das große Bild zu beeinflussen (das funktioniert quasi noch gar nicht, IE bewegt nur den letzten, FF nur den ersten).
- bei Klick auf einen Thumb wird das dazugehörende Bild in groß angezeigt (und idealerweise der Thumb als "aktiv" markiert, aber das werde ich erstmal selbst versuchen, wenn der Rest funktioniert)
Code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
var num = 8; // Anzahl der Bilder
function foto(i) {
if (document.images) {
img = new Array();
if (n > num) n = 1;
if (n < 1) n = num;
var m = n;
img[i]=new Image();
img[i].src="img/bild-"+i+".jpg";
document.images.bild.src=img[i].src;
}
}
function scrollThumbs(i) {
if (document.images) {
img = new Array();
if (m > num) m = 1;
if (m < 1) m = num;
img[i]=new Image();
img[i].src="thumbs/bild-"+i+".jpg";
document.images.thumb.src=img[i].src;
}
}
</script>
</head>
<body>
<script>
var n = 2;
var m = 2;
var m1 = (m-1);
var m2 = (m);
var m3 = (m+1);
var m4 = (m+2);
</script>
<img src="img/bild-1.jpg" name="bild" alt="" title="" width="400" height="300" />
</div>
<a href="javascript:foto(n--)" class="pfeil-li">
<img src="img/pfeil-li.gif" alt="vorheriges Bild" title="" width="100" height="45" />
</a>
<a href="javascript:foto(n++)" class="pfeil-re">
<img src="img/pfeil-re.gif" alt="nächstes Bild" title="" width="100" height="45" />
</a>
<ul>
<li>
<a href="javascript:foto(m1)"><img src="thumbs/bild-1.jpg" name="thumb" alt="" title="" width="200" height="150" /></a>
<a href="javascript:foto(m2)"><img src="thumbs/bild-2.jpg" name="thumb" alt="" title="" width="200" height="150" /></a>
<a href="javascript:foto(m3)"><img src="thumbs/bild-3.jpg" name="thumb" alt="" title="" width="200" height="150" /></a>
<a href="javascript:foto(m4)"><img src="thumbs/bild-4.jpg" name="thumb" alt="" title="" width="200" height="150" /></a>
</li>
</ul>
<a href="javascript:scrollThumbs(m--)" class="pfeil-li">
<img src="img/pfeil-li.gif" alt="Vorschaubilder zurückscrollen" title="" width="100" height="45" />
</a>
<a href="javascript:scrollThumbs(m++)" class="pfeil-re">
<img src="img/pfeil-re.gif" alt="Vorschaubilder weiterscrollen" title="" width="100" height="45" />
</a>
</body>
</html>Außerdem möchte ich zum Schluss das Script in eine externe Datei auslagern.
Der Bereich, der nur ausgeführt werden kann, wenn der Browser JavaScript unterstützt, soll in einen Script-Tag, um mittels <noscript> eine alternative Galerie einbinden zu können. Auch hierzu hätte ich gerne einen Tipp.
Vielen Dank schon mal!
Grüße
Bernhard
Edit: P.S.: was mache ich beim Schreiben meines Beitrages falsch, dass der HTML-Code so unübersichtlich in einer Zeile dargestellt wird?
Zuletzt bearbeitet:
