Javascript Code verstehen und übersetzen!

[KissYaNeck]

Ich möchte auf meiner Seite eine Funktion programmieren, welches den Benutzer erlaubt ein verkleinertes Bild, beim anklicken größer darzustellen. Dabei sollte das vergrößerte Bild zentriert sein und der Hintergrund leicht abgedunkelt ohne eine neue Seite zu laden. Ich bin noch am Anfang und möchte mich lernen wie ich in Javascript Funktionen schreibe. Ich bin dabei auf ein Code Snippet gestoßen, das zwar nicht meine Anforderungen gerecht wird, aber gut ist, um ein Verständnis zu bekommen wie man Funktionen definiert. Ich hoffe jemand kann drüber schauen und gucken ob ich es richtig definiert habe.

<script> <!--
var now = 300; // Wird geladen bevor die Funktion aufgerufen wird
var savewidth = 0;

function zoom(Bild)
{
    if (Bild.width > now || savewidth > now) // Falls (Bild Breite ist breiter als 300px
    {							   // oder gespeicherte Breite ist breiter als 300px)
        if (Bild.width == now)			   // Falls beide Werte gleich sind
        {
            Bild.width = savewidth;		   // Bildbreite ist gespeicherte Breite
        }
        else						   // sonst 
        {
            savewidth = Bild.width;	           // gespeicherte Breite ist BildBreite
            Bild.style.cursor = "pointer";	   // cursor
            Bild.width = now;			   // Bildbreite ist 300px
        }
    }
}
//--> </script>

<img onClick="zoom(this)" onLoad="zoom(this)" src="pics/R3.png" title="Zum Vergrößern/Verkleinern anklicken">

Aber ich frage mich warum die variable now, Einfluss auf das verkleinerte Bild hat, wenn doch die Funktion nicht geladen wurde. Es hat ja nur einen Wert von 300, also 300 px. Wie soll der img Tag wissen, das es eine Breite von 300px haben soll, wenn da irgendwie keine Verknüpfung besteht. Die Variable savewidth hat den Wert 0. Soll das heißen die Originalgröße vom Bild?

Also ich verstehe das so: das zweite if Konstrukt mach das kleine Bild groß, ab dem else Konstrukt macht es das große Bild wieder klein.

Und die Funktion macht seine Aufgaben, wenn Bild.width breiter ist als das now und savewidth. Also muss Bild.with wissen, wie viel Pixel das Originalbild hat, aber woher?

[Kugelfisch23]

Dabei sollte das vergrößerte Bild zentriert sein und der Hintergrund leicht abgedunkelt ohne eine neue Seite zu laden.

Dieser Effekt wird oft als Lightbox bezeichnet, basierend auf den Namen des Skripts, welches den Effekt ursprünglich implementiert hat. Mit diesem Suchbegriff findest du sehr leicht diverse fertige Skripte und Beispiel, welche du dir ansehen kannst.

Es hat ja nur einen Wert von 300, also 300 px. Wie soll der img Tag wissen, das es eine Breite von 300px haben soll, wenn da irgendwie keine Verknüpfung besteht.

Vor dem ersten Ausführen der Funktion hat das img-Element seine intrinsische Breite, d.h. die Breite der enthaltenen Grafik. Beachte jedoch, dass die Funktion nicht nur im click- sondern auch im load-Eventhandler ausgeführt wird. Daher wird die Funktion erstmals ausgeführt (und das Bild auf die in now spezifizierte Grösse verkleinert), sobald das load-Event auftritt, d.h. sobald die vom img-Element referenzierte Grafik geladen wurde.

Die Variable savewidth hat den Wert 0. Soll das heißen die Originalgröße vom Bild?

Nein, der initiale Wert ist irrelevant, da dieser beim ersten Aufruf ohnehin nicht verwendet wird, da dann Bild.width == now nicht zutrifft. Der erste Aufruf legt für das img-Element eine Breite von 300px und setzt savewidth auf den ursprünglichen Wert von Bild.width, d.h. auf die intrinsische Breite der Grafik.

Also ich verstehe das so: das zweite if Konstrukt mach das kleine Bild groß, ab dem else Konstrukt macht es das große Bild wieder klein.

Wenn zu damit die beiden Fälle des innersten if-Konstrukts meinst, liegst du richtig.

Und die Funktion macht seine Aufgaben, wenn Bild.width breiter ist als das now und savewidth. Also muss Bild.with wissen, wie viel Pixel das Originalbild hat, aber woher?

Wenn zuvor das width-Attribut nicht explizit gesetzt und die width-Eigenschaft nicht verändert wurde, liefert sie (wie erwähnt) die intrinsische (`natürliche`) Breite der vom img-Element referenzierten Grafik.


Unabhängig davon fehlt deinem script-Element übrigens das vorgeschriebene type- und dem img-Element das alt-Attribut. Auch ist zu beachten, dass das Skript lediglich für ein einzelnes Bild funktionieren wird.

[KissYaNeck]

Unabhängig davon fehlt deinem script-Element übrigens das vorgeschriebene type-

Ich weiß, ich hab da ein HTMl 5 Doctype und da braucht man nur <script> zu verwenden ohne das type attribut.

Danke für deine Hilfe.