Hallo und danke für die Hilfe; ich habe es dank euch hinbekommen.
Versuch ob es geht, wenn du das neue Element erst in die DOM-Struktur hinzufügst und dann über addEventListener bzw. attachEvent einen event listener für den click event registrierst.
Ich habe es mit addEventListener probiert. Im Firefox hat das dann auch geklappt. Der IE6 allerdings hat nicht nur nichts angezeigt, sondern hat eine Fehlermeldung gebracht daß er das Element nicht kennt.
a.onclick = new Function("function blub() { ...; }");
So habe ich das dann realisiert. Allerdings ist die schreibweise ein bischen anders:
a.onclick = function close() {
alert("foo");
}
Das Element, was du da erstellt hast gibt's im DOM noch nicht. Musst du noch einhängen, entweder mit addChild oder insertBefore.
http://developer.mozilla.org/en/DOM/document.createElement
Wie genau meinst du das? Ich habe <a> ja erst erstellt und dann das Atrribut eingefügt. Oder meinst du was grundlegend anderes?
Darum gibts übrigends fertige Lightbox Scripts - damit man sich nicht mehr drum kümmern muss, sondern es einfach funktioniert.
Wenn man bestehende Scripte einbaut lernt man aber nichts dabei ;)
Vor allem brauche ich aber eine Lightbox die wenig HTML-Code benötigt und zum anderen keine Stylesheet- oder Bilddateien. Es ist für das Intranet bei mir in der Firma, und da kann ich die Dateien nicht via FTP hochladen sondern nur jede Datei einzeln via Formular.
Wer Interesse am Script hat dem poste ich es hier. An die Profis: Ich würde mich freuen über Hinweise wie ich es eleganter Programmieren kann. Bin ja noch Anfänger :)
HTML-Code:
<a name="bildname.jpg" href="#" onclick="LightBox(this)">Linkname</a>
JS-Code:
function LightBox(param) {
var opacity = 80; // Transparenz des Hintergrunds
var gap = 20; // Mindestbreite des transparenten Rahmens um das Bild (in px)
var img = new Image();
img.src = param.name;
var ratio = img.height / img.width;
var imgX, imgY, resize;
if (img.width + gap >= document.body.clientWidth) { // Skalierung falls Bild zu breit
imgX = document.body.clientWidth - gap;
imgY = imgX * ratio;
img.style.width = imgX;
img.style.height = imgY;
resize = true;
} else if (img.height + gap >= document.body.clientHeight) { // Skalierung falls Bild zu hoch
imgY = document.body.clientHeight - gap;
imgX = imgY / ratio;
img.style.width = imgX;
img.style.height = imgY;
resize = true;
} else {
imgX = img.width;
imgY = img.height;
img.style.width = imgX;
img.style.height = imgY;
resize = false;
}
var body = document.getElementsByTagName("body");
var backLayer = document.createElement("div"); // <div>-Layer: Transparenter Hintergrund
backLayer.style.position = "absolute";
backLayer.style.top = "0px";
backLayer.style.left = "0px";
backLayer.style.width = document.body.clientWidth+"px";
backLayer.style.height = document.body.clientHeight+"px";
backLayer.style.backgroundColor = "black";
if ((document.all) && (document.getElementById)) { // Kontrolle auf IE6
backLayer.style.filter = "alpha(opacity=" + opacity + ")";
} else if ((!document.all) && (document.getElementById)) { // Kontrolle auf Firefox
backLayer.style.opacity = opacity/100;
}
var frontLayer = document.createElement("div"); // <div>-Layer: zentrierter Vordergrund
frontLayer.style.position = "absolute";
frontLayer.style.left = (document.body.clientWidth - imgX) / 2;
frontLayer.style.top = (document.body.clientHeight - imgY) / 2;
frontLayer.style.cursor = "pointer";
var a = document.createElement("a"); // Link der das Bild wieder schließt...
if (resize) {
a.onclick = function close() { // ... wenn es skaliert wurde
body[0].removeChild(body[0].lastChild);
body[0].removeChild(body[0].lastChild);
document.location.href = param.name;
}
} else {
a.onclick = function close() { // ... wenn es nicht skaliert wurde
body[0].removeChild(body[0].lastChild);
body[0].removeChild(body[0].lastChild);
}
}
a.appendChild(img);
frontLayer.appendChild(a);
body[0].appendChild(backLayer);
body[0].appendChild(frontLayer);
}