Nachdem ich feststellen musste, dass mein erster Fix-Versuch nicht ganz den gewünschten Erfolg hat, hab ich mich jetzt nochmal hingesetzt und das Problem scheint gelöst zu sein. Zumindest funktioniert es jetzt mit IE6, IE7, Firefox und Safari 2 (Mac).
Dafür ist Folgendes zu tun:
Der Quellcode der Zeilen 1217-1239:
// We have to do this instead of .onload
this.checkImage[i] = new PeriodicalExecuter(function(i) {
if (!(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
this.checkImage[i].stop();
var imageHeight = $('lightwindow_image_'+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
this.imageCount--;
$('lightwindow_image_'+i).setStyle({
height: '100%', width: '100%'
});
if (this.imageCount == 0) {
this._processWindow();
}
}
}.bind(this, i), 1);
Ersetzen mit folgendem Script:
// We have to do this instead of .onload
var ie = (document.all)?1:0;
this.checkImage[i] = new PeriodicalExecuter(function(i) {
if(ie){ //THE BROWSER IS IE
if ( $('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
this.checkImage[i].stop();
var imageHeight = $('lightwindow_image_'+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
this.imageCount--;
$('lightwindow_image_'+i).setStyle({
height: '100%', width: '100%'
});
if (this.imageCount == 0) {
this._processWindow();
}
//alert('IE has been detected')
}
}
else
{//NOT IE, PROBABLY FF, OPERA, OTHER
//this line works for all other browsers
if ($('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
this.checkImage[i].stop();
var imageHeight = $('lightwindow_image_'+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
this.imageCount--;
$('lightwindow_image_'+i).setStyle({
height: '100%', width: '100%'
});
if (this.imageCount == 0) {
this._processWindow();
}
}
}
}.bind(this, i), 1);
Vielen Dank an fapri aus dem Forum!
UPDATE: Wordpress hatte einige Sonderzeichen eigenmächtig formatiert, das führte zu Syntax-Fehlern. Diese sind jetzt behoben.
Danke für dein fix, aber leider geht das, man sieht das Bild mit dem effect nicht lightwindow.
Hm… bisher hat es bei mir funktioniert. Bekommst du eine Javascript-Fehlermeldung? Funktioniert es in anderen Browsern? Vielleicht kommen wir dem Problem ja auf die Spur
Hi,
also nach dem ersten FIX passiert gar nichts und nach dem zweiten FIX öffnet er die verlinkten Bilder sowohl in Firefox, als auch im IE einfach standardmäßig (_self).
Javascript kommt da überhaupt nicht mehr zum Einsatz. :/
Ok, hab noch was herausgefunden.. und zwar lässt sich das Problem beim IE beheben, indem man dem Internet-Explorer als aller erstes den doctype nennt:
Die Zeile muss logischerweise noch vor
Dann funktioniert lightwindow auch im IE, allerdings zerschiesst mir die Zeile dann meine tables im body und ich steh immernoch am Anfang!
Einen Doctype anzugeben ist ja wohl Standard. Wenn deine Tabellen nicht mehr das tun was sie sollen dann ist eventuell das Markup nicht ganz sauber. Aber zum Layouten nutzt du die hoffentlich nich?
Also bei mir passiert das gleiche wie bei benii.
Sobald ich die Zeilen im javascript einfüge funktioniert garnichts mehr.
Hast du es mal mit dem Doctype probiert? Bei mir funktioniert(e) das Script. Mittlerweile setze für solche Sachen ein anderesn Framework (MooTools) ein.
Wo genau muss denn der Doctype angegeben werden?
Auf der .html Seite ist er standardmässig drin.
Wie geht das mit Moo Tools?
/René
Doctype:
natürlich als erstes im Dokument: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
MooTools:
Da gibt es z.B. die Squeezebox (http://digitarald.de/project/squeezebox/)
Also wie ich geschrieben habe?
Als erstes auf der .html Seite ist natürlich der Doctype drin.
Geht aber trotzdem nicht. Bevor ich die Zeilen einfüge geht es aber.
Vielleicht liegt die Ursache also ganz woanders?
/René
Welche Fehlermeldung liefert das javascript denn? Oder hast du die Seite irgendwo online?
Es kommt gar keine Fehlermeldung. Das Bild öffnet sich einfach normal.
Ich habe das geänderte Script mal in einer Galerie meiner Seite eingefügt.
http://www.uw-digi.de/photo/page0/page15/page14/page14.html
In allen anderen galerien ist das Original lightwindow.js mit dem es funktioniert (ausser IE).
/René
Ah Fehler gefunden. Du hast den Quelltext hier 1:1 kopiert, soweit ganz gut. Wordpress scheint dabei aber die ‘ durch ´ ersetzt zu haben. Fällt dem menschlichen Auge kaum auf, den Interpreter aber stoppt das. Also bitte die Hochkommata durch ‘ ersetzen.
Also ich habe die Hochkommas gesetzt aber es muss noch irgendein Fehler drin stecken. Es geht immer noch nicht.
Und ich befürchte ich finde nicht heraus was es ist.
anscheinend gibt es ein Codierungsproblem. Schau dir mal zeile 1221 an: if ( $(‘lightwindow_image_’+i).complete && !(typeof $(‘lightwindow_image_’+i).naturalWidth != “undefined†&& $(‘lightwindow_image_’+i).naturalWidth == 0)) {
die Zeichen vor und nach undefined sollen Anführungszeichen (“) sein. Das bitte noch ersetzen. Solche Fehler finden sich auch ganz leicht wenn man die Add-Ons Web Developer Toolbar oder den Firebug für den Firefox installiert.
Ok. Jetzt sehe ich mittels der genialen web Developer Toolbar, dass es ein Problem mit folgender Zeile gibt:
Fehler: syntax error
Quelldatei: http://www.uw-digi.de/photo/page0/page15/page14/files/javascript/lightwindow.js
Zeile: 1229, Spalte: 20
Quelltext:
this.imageCount–;
Aber wie weiss ich jetzt was daran falsch ist bzw. wie es richtig sein muss?
Danke für Deine Geduld mit mir.
Ok. Ich habe alle Fehler herausgefunden und korrigiert.
Es funktioniert für mich und ich habe mich jetzt mit dem IE ein paar Mal durch die Galerie geklickt und alles läuft prima.
Vielen Dank für deine Unterstützung und die Lehrstunde in Javascript Debugging.
/René
Super das es funktioniert. Woran hat es noch gelegen? Falls Fehler im Script sind würd ich die gern korrigieren. Danke
Dein Script hat von Anfang an funktioniert.
Nur nicht so wie es hier im Blog zu sehen ist.
Der letzte Fehler war (siehe im Source oben)
this.imageCount–; muss sein this.imageCount-–;
Vielleicht solltest du hier lieber ein File linken, wo der .js code drin ist.
Wäre sonst schade um die gute Arbeit die du geleistet hast.
Ich freue mich sehr das es so geht. Der andere Weg über die squeezebox wäre für mich wesentlich schwieriger geworden.
Ich benutze Rapidweaver + Rapidalbum und da ist es nicht so einfach was neues einzubinden.
Vielen dank nochmals
René
Vielen Dank für die Hinweise und natürlich auch für das Lob. Ich habe jetzt nochmal an Artikel gearbeitet und auch Wordpress stellt es jetzt richtig dar. Das File zu verlinken wäre natürlich auch noch eine gute Idee.