eigene Lightbox erstellen

coldstone28

Mitglied
Hallo Freunde,

versuche gerade eine eigene Lightbox zu erstellen ohne jQuery. Also nur mit Javascript.
Habe eine Frage zu folgendem Javascript:

Javascript:
function bildwechsel() {
document.getElementById("bild").src = "images/Bild3.jpg";
}

Dieses code sollte doch meine id="Bild" gegen das Bild2.jpg ersetzen oder bin ich total falsch?

Meine HTML sieht wie folgt aus:

HTML:
      <head>
         <title>Layout meiner Webseite</title>
         <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 id="bild">
    <img src="Bild2.jpg" class="hover-shadow">
  </div>
          
          <div id="buttons">
           <img src="images/button_left.png" width="100px" onclick="bildwechsel()" class="hover-shadow">
           <img src="images/button_home.png" width="100px" class="hover-shadow">
           <img src="images/button_right.png" width="100px" class="hover-shadow">
          </div>

      </body>
</html>

Wäre super nett wenn jemand mir meinem denkfehler auf die sprünge helfen könnte.
 

Sempervivum

Erfahrenes Mitglied
Dein Denkfehler besteht darin, dass die ID "bild" zu dem umgebenden div gehört und nicht zu dem img-Tag. Du musst diese ID dem img-Tag geben, dann wird es funktionieren.
 

coldstone28

Mitglied
Super. Und ich tüftel schon die ganze Zeit warum das nicht geht. :)

Wie kann ich den Inhalt meines ID´s mit einem Arrey vergleichen, umso eine Ausgabe herzustellen wenn der Verglech wahr ist?

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

   
function bildwechsel() {
    
    if(document.getElementById("bild").id = bilder[1]) {
        
     document.getElementById("bild").src = bilder[0];
}  
}
obige Beispiel klappt leider nicht.
kann ich in der if-klausel nicht

Javascript:
...
     document.getElementById("bild").src = bilder[0];
...

als ausgabe verwenden?

Wenn ich
Javascript:
alert("Halloo");
eingebe klappt es.
 

Sempervivum

Erfahrenes Mitglied
Hier:
if(document.getElementById("bild").id = bilder[1])
hast Du nicht bedacht, dass ein einfaches Gleichheitszeichen in Javascript und etlichen anderen Programmiersprachen keinen Test auf Gleichheit bewirkt sondern eine Zuweisung des Ausdrucks rechts an die Variable links. Du musst ein doppeltes == verwenden:
if (document.getElementById("bild").id == bilder[1])

Weiter willst Du ja nicht mit der ID vergleichen sondern mit dem angezeigten Bild und das wird durch das src-Attribut definiert. D. h. der Vergleich muss so aussehen:
if (document.getElementById("bild").src == bilder[1])

Wobei ich mir im Moment nicht sicher bin ist, ob Javascript den Dateinamen auf eine vollständige URL ergänzt. Müsste man mal austesten.
 

coldstone28

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

function init() {
    var elem = document.getElementById('buttonright');
    elem.addEventListener('click', zeichenSuchen);
}

function zeichenSuchen() {
    var bilder[];
    var suche = bilder[].indexOf('images/Bild2');
    ausgabe(suche);
}

function ausgabe(text) {
    var ausgabe = document.getElementById('ausgabe');
    ausgabe.innerHTML = bilder[2];
}

Habs jetzt irgendwie so versucht. Irgendwie versucht das Beispiel auf meins umzuwandeln. :cautious:
 

coldstone28

Mitglied
popup.jpg
Also um es mal zu verdeutlichen zu welchem Endziel eigentlich ich kommen will.
Habe eine Popup Fenster erstellt, wo sowas ähliches wie eine Lightbox dargestellt werden soll.
Habe 3 Bilder und ich will vor und zurück klicken können.
Ich denke es muss irgendwie mit schleifen ralisiert werden, nur bekomme ich es nicht zum laufen.
 

Sempervivum

Erfahrenes Mitglied
Für den Anfang ist das mit dem Array schon ein guter Ansatz. Auch das mit der Suche ist so möglich, aber ich empfehle, einen einfacheren Weg einzuschlagen:
Definiere einen Index, der die Position des aktuellen Bildes im Array angibt. Dann brauchst Du beim Vor- und Zurückblättern nur diesen Index zu erhöhen bzw. zu erniedrigen und kannst sofort auf das neue Bild im Array zugreifen.
Für eine Schleife sehe ich bei der Grundfunktion dieser Lightbox keine Notwendigkeit, es sei denn, Du wolltest bei der Suchfunktion bleiben.