Anzeige

eigene Lightbox erstellen


#1
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.
 
#3
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
#4
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.
 
#8
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:
 
#9
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
#10
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.
 
#11
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:
 

Sempervivum

Erfahrenes Mitglied
#12
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];
}
 
#13
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];
}
Tut leider immer noch nichts. :unsure:

Habe auch versucht es bischen umzubasteln, aber ohne erfolg.
 

Sempervivum

Erfahrenes Mitglied
#14
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);
}
 
#15
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?
 
#16
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.
 

Sempervivum

Erfahrenes Mitglied
#17
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.
 
#18
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:
 

Sempervivum

Erfahrenes Mitglied
#20
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.
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.
 
Anzeige
Anzeige