eigene Lightbox erstellen

Javascript: 
var a = ["Bild1.jpg","Bild2.jpg","Bild3.jpg"];


function zeichensuchen() {
    
  
     var s = document.getElementsById("bild");
    if(s == a) {
        
        document.getElementsById("bild").src = a++;
    }
     
}

Irgendwie schreibe ich glaube ich nur noch müll. :rolleyes:

ICh habe doch eine variable a mit
Javascript: 
var a = ["Bild1.jpg","Bild2.jpg","Bild3.jpg"];

und beim drauf klicken soll eine funktion starten
Javascript: 
function zeichensuchen() {
}

Ich lese das Element von dem id="bild", somit habe ich doch s ="bild2.jpg"
Javascript: 
var s = document.getElementsById("bild");
und überprüfe im nachhinein mit
Code: 
  if(s == a) {
  }
ob das ELement in a ist.

Wo liegt mein Fehler? :cautious:
 
Ich empfehle, zunächst die Variante mit dem Bildindex zu verwenden; etwa so:
Code: 
var bilder = ["images/Bild1.jpg","images/Bild2.jpg","images/Bild3.jpg"];

var bildidx = 0, // der Index des aktuell angezeigten Bildes im Array
    bildele = document.getElementById("bild"); // das Element, das das Bild enthält
function init() {
    var elem = document.getElementById('buttonright');
    elem.addEventListener('click', next);
}

function next() {
    // Index erhöhen, haben wir das Ende des Arrays erreicht: auf 0 setzen
    if (bildidx < bilder.length) bildidx++; else bildidx = 0;
    bildele.src = bilder[bildidx];
}
 
Sempervivum hat gesagt.:
Ich empfehle, zunächst die Variante mit dem Bildindex zu verwenden; etwa so:
Code: 
var bilder = ["images/Bild1.jpg","images/Bild2.jpg","images/Bild3.jpg"];

var bildidx = 0, // der Index des aktuell angezeigten Bildes im Array
    bildele = document.getElementById("bild"); // das Element, das das Bild enthält
function init() {
    var elem = document.getElementById('buttonright');
    elem.addEventListener('click', next);
}

function next() {
    // Index erhöhen, haben wir das Ende des Arrays erreicht: auf 0 setzen
    if (bildidx < bilder.length) bildidx++; else bildidx = 0;
    bildele.src = bilder[bildidx];
}
Zum Vergrößern anklicken....

Tut leider immer noch nichts. :unsure:

Habe auch versucht es bischen umzubasteln, aber ohne erfolg.
 
Hast Du auch die Funktion next() als Eventlistener registriert? So wie in Posting #8:
Code: 
function init() {
    var elem = document.getElementById('buttonright');
    elem.addEventListener('click', next);
}
 
HTML: 
          <div>
           <img src="images/button_left.png" width="100px" class="hover-shadow">
           <img src="images/button_home.png" width="100px" class="hover-shadow">
           <img id ="buttonright" src="images/button_right.png" onclick="next()" width="100px" class="hover-shadow">
          </div>

Du meinst doch hier, oder?
 
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Layout meiner Webseite</title>
         <meta name="author" content="" />
         <link rel="stylesheet" type="text/css" href="css/style.css" />
          <script src="js/lightbox.js"></script>
      </head>
      <body>
      <!-- Images used to open the lightbox -->

  <div>
    <img id="bild" src="Bild2.jpg" class="hover-shadow">
  </div>
          
          <div>
           <img src="images/button_left.png" width="100px" class="hover-shadow">
           <img src="images/button_home.png" width="100px" class="hover-shadow">
           <img id ="buttonright" src="images/button_right.png" onclick="next()" width="100px" class="hover-shadow">
          </div>

      </body>
</html>
Hier mal der komplette HTML teil.
 
Beim Registrieren des Eventlisteners musst Du dich entscheiden zwischen der Inline-Notation im HTML und der Verwendung von addEventListener im Javascript. Ich empfehle letzteres; dann musst Du das Javascript nach dem HTML notieren bzw. die Datei einziehen, weil sonst das Button-Element noch nicht definiert ist. Außerdem musst Du die Funktion init() auch aufrufen.
Folgendes funktioniert bei mir:
HTML: 
    <div>
        <img id="bild" src="images/dia0.jpg" class="hover-shadow">
    </div>
    <div>
        <img src="images/button_left.png" width="100px" class="hover-shadow">
        <img src="images/button_home.png" width="100px" class="hover-shadow">
        <img id="buttonright" src="images/Pfeil_rechts.png" width="100px" class="hover-shadow">
    </div>
Javascript: 
        var bilder = ["images/dia0.jpg", "images/dia1.jpg", "images/dia2.jpg"];

        function next() {
            // Index erhöhen, haben wir das Ende des Arrays erreicht: auf 0 setzen
            if (bildidx < bilder.length - 1) bildidx++; else bildidx = 0;
            bildele.src = bilder[bildidx];
        }

        var bildidx = 0, // der Index des aktuell angezeigten Bildes im Array
            bildele = document.getElementById("bild"); // das Element, das das Bild enthält
        function init() {
            var elem = document.getElementById('buttonright');
            elem.addEventListener('click', next);
        }
        init();
Beachte, dass ich zum Testen meine eigenen Bilder verwendet habe, Du musst diese wieder anpassen.
 
Habe den Code 1 zu 1 übernommen und auf meine Dateien angepasst, funktioniert aber immer noch nicht.
HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
      <head>
         <title>Layout meiner Webseite</title>
         <meta name="author" content="" />
         <link rel="stylesheet" type="text/css" href="css/style.css" />
          <script src="js/lightbox.js"></script>
      </head>
      <body>
      <!-- Images used to open the lightbox -->
   <div>
        <img id="bild" src="images/Bild1.jpg" class="hover-shadow">
    </div>
    <div>
        <img src="images/button_left.png" width="100px" class="hover-shadow">
        <img src="images/button_home.png" width="100px" class="hover-shadow">
        <img id="buttonright" src="images/button_right.png" width="100px" class="hover-shadow">
    </div>
      </body>
</html>

Javascript: 
 var bilder = ["images/Bild1.jpg", "images/Bild2.jpg", "images/Bild2.jpg"];

        function next() {
            // Index erhöhen, haben wir das Ende des Arrays erreicht: auf 0 setzen
            if (bildidx < bilder.length - 1) bildidx++; else bildidx = 0;
            bildele.src = bilder[bildidx];
        }

        var bildidx = 0, // der Index des aktuell angezeigten Bildes im Array
            bildele = document.getElementById("bild"); // das Element, das das Bild enthält
        function init() {
            var elem = document.getElementById('buttonright');
            elem.addEventListener('click', next);
        }
        init();

Bin echt am verzweifeln. :confused:
 
Du hast diesen Hinweis nicht beachtet:
dann musst Du das Javascript nach dem HTML notieren bzw. die Datei einziehen, weil sonst das Button-Element noch nicht definiert ist.
Zum Vergrößern anklicken....
d. h. das <script src="js/lightbox.js"></script>am Ende des Body, vor dem schließenden </body>notieren.
Mache dich mit der Console in den Entwicklerwerkzeugen deines Browsers vertraut, die zeigt dir solche Fehler an.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück