Und noch eine Frage bezüglich Bildergalerie.....

  • Hallo,
    ich programmiere (oder versuche es zumindest) eine Bildergalerie. Es gibt eine Thumbnailvorschau, wenn man eines der Tumb´s anklickt, soll es darunter in groß erscheinen und daneben eine Beschreibung zum Bild.
    Dafür habe ich folgende Funktion geschrieben:



    <script type="text/javascript">
    var bildnummer;
    function thumb(bildnummer) {
    document.getElementById("vorschau").src = "bilder/1.jpg";
    document.getElementById("bildtitel").innerHTML = "Dies ist das " + bildnummer + ". Bild ";
    return false;
    }
    </script>



    Das HTML dazu hier:



    <nav id="thumbnav">
    <div id="thumbnail">
    <a href="#" onclick="var bildnummer = 1;
    function thumb();">
    <img src="bilder/thumbnails/1-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="var bildnummer = 2;
    function thumb();">
    <img src="bilder/thumbnails/2-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild2"></a>


    <a href="#" onclick="var bildnummer = 3;
    function thumb();">
    <img src="bilder/thumbnails/3-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild3"></a>


    <a href="#" onclick="var bildnummer = 4;
    function thumb();">
    <img src="bilder/thumbnails/4-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild4"></a>


    </div>
    </nav>


    <div id="bilderanzeige">
    <div id="bildgross">
    <figure>
    <a href="#" onclick="vollbild(); return false;">

    <img src="bilder/1.jpg" alt="Bild1" title="Zum Vergrößern bitte anklicken" id="vorschau"></a>
    </figure>
    </div>
    <div id="sidebar">
    <p id="bildtitel">Dies ist das 1. Bild</p>




    </div>
    <div style="clear:both;"></div>
    </div>




    Es funktioniert nur leider nicht. Wo liegt mein Fehler? Reiner Syntax Fehler oder ein Logikfehler?
    Danke schon mal für die Hilfe,
    Grüße,
    Michael

  • Die eigentlichen Fehler liegen hier:

    Code
    document.getElementById("vorschau").src = "bilder/1.jpg";


    Du musst die Bildnummer einfügen:

    Code
    document.getElementById("vorschau").src = "bilder/" + bildnummer + ".jpg";


    und hier:

    Code
    onclick="var bildnummer = 4; function thumb();">


    "function" benötigst Du, um eine Funktion zu defieren, wenn du sie aufrufen willst, ist es fehl am Platze.


    Davon abgesehen geht es auch um einiges einfacher:
    Wenn Du den Parameter bildnummer definierst, solltest du ihn auch verwenden und die Variable weglassen:


    Dann kannst die Funktion gleich mit der richtigen Bildnummer aufrufen:

    HTML
    <img src="bilder/thumbnails/1-thumb.jpg" onclick="thumb(1);" width="320" height="240" alt="Bild1" title="Bild1">


    Und die a-href-Tags sind IMO überflüssig:

    HTML
    <div id="thumbnail">
    	<img src="bilder/thumbnails/1-thumb.jpg" onclick="thumb(1);" width="320" height="240" alt="Bild1" title="Bild1">
    	<img src="bilder/thumbnails/2-thumb.jpg" onclick="thumb(2);" width="320" height="240" alt="Bild1" title="Bild1">
    	<img src="bilder/thumbnails/3-thumb.jpg" onclick="thumb(3);" width="320" height="240" alt="Bild1" title="Bild1">
    	<img src="bilder/thumbnails/4-thumb.jpg" onclick="thumb(4);" width="320" height="240" alt="Bild1" title="Bild1">
    </div>
  • Hallo zusammen!


    kanufrosch: Danke für den Hinweis mit den BB Tags, werde ich in Zukunft beherzigen:


    Sempervivum: Herzlichen Dank, das war die Lösung meiner Probleme.
    Ich glaube, ich habe jetzt auch das Thema mit den Parametern bei Funktionen verstanden ;)
    Hallo nochmals,
    und wieder mal stehe ich vor einem Problem.
    Ich habe die Bildergalerie soweit geschrieben.
    Hier der Code für die Thumbnails:





    Hier das große Bild:



    HTML
    <div id="bildgross"><a href="#" onclick="vollbild(); return false;"> <img src="bilder/1.jpg" alt="Bild1" title="Zum Vergrößern bitte anklicken" id="vorschau"></a></div><div id="sidebar"><p id="bildtitel">Ruderboot am Steg</p><br><p id="lang">Länge: 30 cm</p><p id="breit">Breite: 60 cm</p><p id="rahmen">gerahmt: ja</p><p id="preis">Preis: 69 €</p><p id="bildnr">Bildnummer: 0</p></div>


    Das Klicken auf ein Bild startet die Funktion Thumb und übergibt den jeweiligen Zahlenparameter (Bildnummer).


    Hier die Funktion Thumb:


    JavaScript
    <script type="text/javascript">	function thumb(x) 	{	 document.getElementById("vorschau").src = "bilder/" + x + ".jpg";	 var req = new XMLHttpRequest();	 req.open("get", "bilderdatenbank.xml", true);	 req.onreadystatechange = function(e) { ausgeben(e, x); };	 req.send();	return false;	}</script>


    Beim Klicken auf den jew. Thumbnail soll nicht nur das jew. Bild in "Groß" erscheinen, sondern rechts daneben auch verschiedene Daten, die aus einer XML Datei kommen sollen.




    JavaScript
    function ausgeben(e, x)	{		if(e.target.readyState == 4 && e.target.status == 200)		{			var antwort = e.target.responseXML;			var nummer = antwort.getElementsByTagName("bildnr")[x];			var titel = antwort.getElementsByTagName("bildtitel")[x];			var laenge = antwort.getElementsByTagName("laenge")[x];			var breite = antwort.getElementsByTagName("breite")[x];			var frame = antwort.getElementsByTagName("rahmen")[x];			var price = antwort.getElementsByTagName("preis")[x];			document.getElementById("bildtitel").firstChild.nodeValue = titel;			document.getElementById("lang").firstChild.nodeValue = "Länge: " + laenge;			document.getElementById("breit").firstChild.nodeValue = "Breite: " + breite;			document.getElementById("rahmen").firstChild.nodeValue = "gerahmt: " + frame;			document.getElementById("preis").firstChild.nodeValue = "Preis: " + price + "€";			document.getElementById("bildnr").firstChild.nodeValue = x;		}	}



    Fehlerbeschreibung:
    Beim Anklicken der jew. Thumbnails wird zwar das große Bild geladen, der jeweils dazu passende Text aus der XML Datei jedoch nicht. Es steht immer der Text da, der beim Laden der Seite initial dort platziert wurde.
    Ich bekomme jedoch keine Fehlermeldung. Ich habe auch schon eine Fehlersuche-Funktion eingebaut (window.onerror = ......), jedoch liefert mir diese auch keinen Fehler.
    Die XML Datei ist validiert und enthält keine Fehler.


    Was mache ich falsch?


    Grüße,
    Michael

  • kein Problem.....



    <?xml version="1.0" encoding="UTF-8"?>
    <galerie>
    <bild>
    <bildnr>0</bildnr>
    <bildtitel>Ruderboot am Ufer</bildtitel>
    <laenge></laenge>
    <breite></breite>
    <rahmen></rahmen>
    <preis></preis>
    </bild>
    <bild>
    <bildnr>1</bildnr>
    <bildtitel>Löwe</bildtitel>
    <laenge>30</laenge>
    <breite>45</breite>
    <rahmen>ja</rahmen>
    <preis>79</preis>
    </bild>
    <bild>
    <bildnr>2</bildnr>
    <bildtitel>Löwe</bildtitel>
    <laenge>45</laenge>
    <breite>45</breite>
    <rahmen>ja</rahmen>
    <preis>69</preis>
    </bild>
    <bild>
    <bildnr>3</bildnr>
    <bildtitel>Bergmassiv</bildtitel>
    <laenge>60</laenge>
    <breite>40</breite>
    <rahmen>nein</rahmen>
    <preis>89</preis>
    </bild>
    <bild>
    <bildnr>4</bildnr>
    <bildtitel>Blumen</bildtitel>
    <laenge>55</laenge>
    <breite>45</breite>
    <rahmen>ja</rahmen>
    <preis>49</preis>
    </bild>
    <bild>
    <bildnr>5</bildnr>
    <bildtitel>Bambus</bildtitel>
    <laenge>50</laenge>
    <breite>45</breite>
    <rahmen>ja</rahmen>
    <preis>59</preis>
    </bild>
    </galerie>
    Und hier der komplette Code der Bildergalerie:




    <!doctype html>
    <html lang="de">


    <head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type"
    content="text/html; charset=utf-8">
    <title>Galerie</title>
    <link rel="stylesheet" type="text/css" href="style.css">


    <script type="text/javascript">
    function fehlerbehandlung(fehler, datei, zeile)
    {
    alert("Fehler: " + fehler + "\nDatei: " + datei + "\nZeile: " + zeile);
    }
    </script>

    <script type="text/javascript">
    function thumb(x)
    {
    document.getElementById("vorschau").src = "bilder/" + x + ".jpg";
    var req = new XMLHttpRequest();
    req.open("get", "bilderdatenbank.xml", true);
    req.onreadystatechange = function(e) { ausgeben(e, x); };
    req.send();
    return false;
    }
    </script>


    <script type="text/javascript">
    function ausgeben(e, x)
    {
    if(e.target.readyState == 4 && e.target.status == 200)
    {
    var antwort = e.target.responseXML;
    var nummer = antwort.getElementsByTagName("bildnr")[x];
    var titel = antwort.getElementsByTagName("bildtitel")[x];
    var laenge = antwort.getElementsByTagName("laenge")[x];
    var breite = antwort.getElementsByTagName("breite")[x];
    var frame = antwort.getElementsByTagName("rahmen")[x];
    var price = antwort.getElementsByTagName("preis")[x];
    document.getElementById("bildtitel").firstChild.nodeValue = titel;
    document.getElementById("lang").firstChild.nodeValue = "Länge: " + laenge;
    document.getElementById("breit").firstChild.nodeValue = "Breite: " + breite;
    document.getElementById("rahmen").firstChild.nodeValue = "gerahmt: " + frame;
    document.getElementById("preis").firstChild.nodeValue = "Preis: " + price + "€";
    document.getElementById("bildnr").firstChild.nodeValue = x;
    }
    }
    </script>
    </head>


    <body>
    <header>
    <nav id="oberenav">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Über mich</a></li>

    <li><a href="malerei.html">Chinesische Malerei</a></li>
    <li><a href="#" id="malstile" onmouseover="mouseOver()" onmouseout="mouseOut()">Malstile</a>
    <ul>
    <li><a href="xieyi.html" onmouseover="mouseOver()" onmouseout="mouseOut()">XieYi</a></li>
    <li><a href="gongbi.html" onmouseover="mouseOver()" onmouseout="mouseOut()">GongBi</a></li>
    </ul>
    </li>
    <li><a href="index.html" id="galerie" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Galerie</a>
    <ul>
    <li><a href="aquarelle.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Aquarelle</a></li>
    <li><a href="landschaft.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Landschaften</a></li>
    <li><a href="tiere.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Tiermalerei</a></li>
    </ul>
    </li>
    </ul>

    <script type="text/javascript">
    function mouseOver() {
    document.getElementById("malstile").innerHTML = "";
    }
    function mouseOut() {
    document.getElementById("malstile").innerHTML = "Malstile";
    }
    function mouseOver2() {
    document.getElementById("galerie").innerHTML = "";
    }
    function mouseOut2() {
    document.getElementById("galerie").innerHTML = "Galerie";
    }
    </script>

    <div style="clear:both;"></div>
    </nav>
    <aside id="malerei2"><p></p></aside>
    </header>


    <nav id="thumbnav">
    <div id="thumbnail">
    <a href="#" onclick="thumb(1);">
    <img src="bilder/thumbnails/1-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="thumb(2);">
    <img src="bilder/thumbnails/2-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(3);">
    <img src="bilder/thumbnails/3-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(4);">
    <img src="bilder/thumbnails/4-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(5);">
    <img src="bilder/thumbnails/5-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(6);">
    <img src="bilder/thumbnails/6-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="thumb(7);">
    <img src="bilder/thumbnails/7-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(8);">
    <img src="bilder/thumbnails/8-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(9);">
    <img src="bilder/thumbnails/9-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(10);">
    <img src="bilder/thumbnails/10-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(11);">
    <img src="bilder/thumbnails/11-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="thumb(12);">
    <img src="bilder/thumbnails/12-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(13);">
    <img src="bilder/thumbnails/13-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(14);">
    <img src="bilder/thumbnails/14-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(15);">
    <img src="bilder/thumbnails/15-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(16);">
    <img src="bilder/thumbnails/16-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="thumb(17);">
    <img src="bilder/thumbnails/17-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(18);">
    <img src="bilder/thumbnails/18-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(19);">
    <img src="bilder/thumbnails/19-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(20);">
    <img src="bilder/thumbnails/20-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(21);">
    <img src="bilder/thumbnails/21-thumb.jpg" width="320" height="240" alt="Bild1" title="Bild1"></a>


    <a href="#" onclick="thumb(22);">
    <img src="bilder/thumbnails/22-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(23);">
    <img src="bilder/thumbnails/23-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    <a href="#" onclick="thumb(24);">
    <img src="bilder/thumbnails/24-thumb.jpg" width="320" height="240" alt="Bild1"></a>


    </div>
    </nav><br>


    <div id="bilderanzeige">
    <div id="bildgross">
    <a href="#" onclick="vollbild(); return false;">
    <img src="bilder/1.jpg" alt="Bild1" title="Zum Vergrößern bitte anklicken" id="vorschau"></a>
    </div>
    <div id="sidebar">
    <p id="bildtitel">Ruderboot am Steg</p>
    <br>
    <p id="lang">Länge: 30 cm</p>
    <p id="breit">Breite: 60 cm</p>
    <p id="rahmen">gerahmt: ja</p>
    <p id="preis">Preis: 69 €</p>
    <p id="bildnr">Bildnummer: 0</p>
    </div>


    <div style="clear:both;"></div>
    </div>



    <script>
    function vollbild()
    {
    var element = document.getElementById("vorschau");
    if (element.requestFullScreen) {
    if (!document.fullScreen) {
    element.requestFullscreen();
    } else {
    document.exitFullScreen();
    }

    } else if (element.mozRequestFullScreen) {

    if (!document.mozFullScreen) {
    element.mozRequestFullScreen();
    } else {
    document.mozCancelFullScreen();
    }

    } else if (element.webkitRequestFullScreen) {

    if (!document.webkitIsFullScreen) {
    element.webkitRequestFullScreen();
    } else {
    document.webkitCancelFullScreen();
    }
    }
    }
    </script>


    <footer>
    <nav class="untenrechts">
    <a href="#" onclick="window.history.back(); return false;">zurück |</a>
    <a href="kontakt.html">Kontakt |</a>
    <a href="impressum.html">Impressum</a>
    </nav>
    </footer>


    </body>


    </html>

  • Das Problem liegt hier:

    JavaScript
    var titel = antwort.getElementsByTagName("bildtitel")[x];


    Damit ermittelst Du das HTML-Element, Du brauchst jedoch den inneren Text:

    JavaScript
    var titel = antwort.getElementsByTagName("bildtitel")[x].innerHTML;


    (Bei den anderen Parametern analog.)
    Wenn Du dich weiter mit Javascript befassen willst, solltest Du dich mit dem Debugger deines Browsers vertraut machen, damit findet mal solche Fehler relativ leicht.

  • "Es produziert das selbe Ergebnis."
    Das verstehe ich nicht, bei mir hat es mit dem Titel, der unter dem Bild angezeigt wird, funktioniert. Und ich hatte nichts geändert, außer der Zeile, die ich gepostet habe. Hast Du die XML-Datei auch hochgeladen? Außerdem funktioniert es nur, wenn die Dateien auf einem Webserver liegen. Wenn Du es lokal testet, ist das u. U. nicht der Fall.


    "Wie nutze ich den Debugger?"
    Der Debugger ist browserspezifisch. Versuche, für deinen Lieblingsbrowser eine Anleitung zu finden.

  • JavaScript
    var titel = antwort.getElementsByTagName("bildtitel")[x];


    Damit ermittelst Du das HTML-Element, Du brauchst jedoch den inneren Text:

    JavaScript
    var titel = antwort.getElementsByTagName("bildtitel")[x].innerHTML;


    (Bei den anderen Parametern analog.)
    Wenn Du dich weiter mit Javascript befassen willst, solltest Du dich mit dem Debugger deines Browsers vertraut machen, damit findet mal solche Fehler relativ leicht.

    Hallo nochmals, vielen Dank für die Hilfe.
    Ich habe die XML Datei mittlerweile auf einen Server gelegt und siehe da, das war des Rätsels Lösung. Jetzt funktioniert es. Allerdings nur mit Safari und Firefox.
    Der IE11 bringt mir die Meldung "undefined".
    Laut Buch und Internet versteht doch aber IE11


    JavaScript
    var req = new XMLHttpRequest();



    Bin ratlos.....

  • Auch in diesem Fall hilft der Debugger weiter: Das Problem liegt nicht beim Ajax, sondern beim Zugriff auf das XML. Davon habe ich zwar keine Ahnung, aber offenbar funktioniert dein Verfahren beim IE nicht. Habe dazu dieses gefunden:
    http://stackoverflow.com/quest…/load-and-parse-xml-in-ie
    und getestet und dieses jQuery funktioniert im IE:

    JavaScript
    titel = $($(antwort).find('bildtitel')[x]).text();


    Vergiss nicht, jQuery einzubinden, wenn Du es verwendest.

  • Hallo Allerseits,


    sorry erst mal, ich bin zu doof, die BB-Tags hier richtig einzusetzen. Wenn ich das tue, ist meine Formatierung weg. Deshalb den Code so:


    Bin beim Experimentieren mal wieder auf ein Problem gestoßen.
    Ich rufe die Thumbnails jetzt mit einer for-Schleife und document write auf und schreibe nicht mehr für jeden Thumb eine eigene CodeZeile.
    Der Code funktioniert insoweit, als dass er die Thumbnails korrekt darstellt. Sobald ich die Zeile onclick='thumb(i);' einfüge, entsteht der Fehler: Die Thumbs werden zwar nach wie vor eingelesen, aber die Funktion thumb(i) wird nicht ausgeführt, das "große Bild" wird nicht ersetzt.
    Habe ich einen Denkfehler? Kann ich nicht aus einer Scriptzeile auf eine Funktion verweisen?
    Kann ich die Zeile document.getElementById("vorschau").src = "bilder/" + bildnummer + ".jpg"; aus der Funktion in das document.write schreiben? Habe ich aber auch schon probiert und führt auch nicht zum Erfolg.


    Grüße,


    Michael





    <!doctype html>
    <html lang="de">


    <head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type"
    content="text/html; charset=utf-8">
    <title>Galerie</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript">


    var laengeArray = ["30", "45", "60", "45", "35"];
    var breiteArray = ["60", "45", "45", "60", "75"];
    var rahmenArray = ["ja", "ja", "nein", "ja", "nein"];
    var preisArray = ["xx", "xx", "xx", "xx", "xx"];



    function thumb(bildnummer) {
    document.getElementById("vorschau").src = "bilder/" + bildnummer + ".jpg";
    document.getElementById("bildtitel").innerHTML = "Dies ist das " + bildnummer + ". Bild ";
    document.getElementById("lang").innerHTML = "Länge: " + laengeArray[bildnummer-1] + " cm";
    document.getElementById("breit").innerHTML = "Breite: " + breiteArray[bildnummer-1] + " cm";
    document.getElementById("rahmen").innerHTML = "gerahmt: " + rahmenArray[bildnummer-1];
    document.getElementById("preis").innerHTML = "Preis: " + preisArray[bildnummer-1] + " €";

    return false;
    }
    </script>


    </head>


    <body>
    <header>
    <nav id="oberenav">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Über mich</a></li>


    <li><a href="malerei.html">Chinesische Malerei</a></li>
    <li><a href="#" id="malstile" onmouseover="mouseOver()" onmouseout="mouseOut()">Malstile</a>
    <ul>
    <li><a href="xieyi.html" onmouseover="mouseOver()" onmouseout="mouseOut()">XieYi</a></li>
    <li><a href="gongbi.html" onmouseover="mouseOver()" onmouseout="mouseOut()">GongBi</a></li>
    </ul>
    </li>
    <li><a href="#" id="galerie" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Galerie</a>
    <ul>
    <li><a href="aquarelle.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Aquarelle</a></li>
    <li><a href="landschaft.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Landschaften</a></li>
    <li><a href="tiere.html" onmouseover="mouseOver2()" onmouseout="mouseOut2()">Tiermalerei</a></li>
    </ul>
    </li>
    </ul>




    <script type="text/javascript">
    function mouseOver() {
    document.getElementById("malstile").innerHTML = "";
    }
    function mouseOut() {
    document.getElementById("malstile").innerHTML = "Malstile";
    }
    function mouseOver2() {
    document.getElementById("galerie").innerHTML = "";
    }
    function mouseOut2() {
    document.getElementById("galerie").innerHTML = "Galerie";
    }
    </script>
    <div style="clear:both;"></div>
    </nav>


    <aside id="malerei2"><p></p></aside>
    </header>


    <nav id="thumbnav">
    <div id="thumbnail">


    <script type="text/javascript">
    var i;
    for (i = 1; i <= 24; i++)
    document.write("<a href='#' onclick='thumb(i);'> <img src='bilder/thumbnails/" + i + "-thumb.jpg' width='320' height='240' alt='Bild1' title='Bild1'> </a>");


    </script>
    </div>
    </nav><br>


    <div id="bilderanzeige">
    <div id="bildgross">
    <a href="#" onclick="vollbild(); return false;">
    <img src="bilder/1.jpg" alt="Bild1" title="Zum Vergrößern bitte anklicken" id="vorschau"></a>
    </div>
    <div id="sidebar">
    <p id="bildtitel">Dies ist das 1. Bild</p>
    <br>
    <p id="lang">Länge:</p>
    <p id="breit">Breite:</p>
    <p id="rahmen">gerahmt:</p>
    <p id="preis">Preis:</p>
    </div>


    <div style="clear:both;"></div>
    </div>



    <script>
    function vollbild() {


    var element = document.getElementById("vorschau");


    if (element.requestFullScreen) {


    if (!document.fullScreen) {
    element.requestFullscreen();
    } else {
    document.exitFullScreen();
    }


    } else if (element.mozRequestFullScreen) {


    if (!document.mozFullScreen) {
    element.mozRequestFullScreen();
    } else {
    document.mozCancelFullScreen();
    }


    } else if (element.webkitRequestFullScreen) {


    if (!document.webkitIsFullScreen) {
    element.webkitRequestFullScreen();
    } else {
    document.webkitCancelFullScreen();
    }


    }


    }
    </script>


    <footer>
    <nav class="untenrechts">
    <a href="galerie.html">zurück |</a>
    <a href="kontakt.html">Kontakt |</a>
    <a href="impressum.html">Impressum</a>
    </nav>
    </footer>


    </body>


    </html>

  • document.write() ist mir zwar nicht besonders sympatisch, aber lassen wir das mal außen vor.
    Das Problem liegt hier:

    JavaScript
    document.write("<a href='#' onclick='thumb(i);'> <img src='bilder/thumbnails/" + i + "-thumb.jpg' width='320' height='240' alt='Bild1' title='Bild1'></a>");


    Du musst dafür sorgen, dass für i die Variable eingesetzt wird, so wie Du es beim img-Tag schon tust:

    JavaScript
    document.write("<a href='#' onclick='thumb(" + i + ");'> <img src='bilder/thumbnails/" + i + "-thumb.jpg' width='320' height='240' alt='Bild1' title='Bild1'></a>");

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!