Hack Greybox

Mit Greybox lassen sich Internet-Seiten bzw. Bilder ohne Pop-up-Fenster anzeigen. Darüber hinaus können Sets von Internet-Seiten bzw. Bildern als Galerie angezeigt werden. Greybox ist völlig kostenlos, gut relativ dokumentiert und leicht zu implementieren. Allerdings gibt es einige Probleme, die nur durch Hacks gelöst werden können.

1. Darstellung der Greybox im Internet Explorer
Internet Explorer zeigt die Kopfzeile in der Greybox nicht richtig an: Die Vor-/Zurück-Schaltflächen haben zu wenig Abstand zur aktullen Seitenzahl und die Schließen-Schaltfläche ist hinter dem vertikalen Scrollbalken verschwunden.
Lösung: Anlegen eines zweiten Stylesheets (z. B. gb_style_ie.css), das nach dem mitglieferten Stylesheet (gb_style.css) geladen wird:

<link href="/3rdparty/greybox/gb_styles.css" rel="stylesheet" type="text/css">
<? if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE") !== false) { >
<link href="/3rdparty/greybox/gb_styles_ie.css" rel="stylesheet" type="text/css" />
<? } ?>

Der Inhalt des Stylesheets gb_style_ie.css muss dann so aussehen (Kommentare können entfernt werden):
.GB_header table {
width: 96%; /*IE statt 100%*/
}

#GB_middle .left {
margin-right: 10px; /*IE statt padding-right*/
}

#GB_middle .right {
margin-left: 10px; /*IE statt padding-right*/
}

2. Laden der Bilder im Firefox
Firefox lädt Bilder meist nur dann, wenn sie sich bereits im Cache befinden. Um dieses Problem gibt es verschiedene Möglichkeiten: Entweder werden die Dateien bereits vorher in den Cache geladen, z. B. über einen Iframe in der aufrufenden Datei, was allerdings zu unnötigem Traffic führt. Die zweite Möglichkeit besteht in einem Hack der Datei loader_frame.html. Dazu muss ganz am Ende der Datei folgende zweimal ein Timeout eingefügt werden. Die Höhe des Timeouts muss ggf. durch Probieren korrigiert werden (ursprünglicher Code auskommentiert):

if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
// loaded();
setTimeout("loaded()", 450);
});
}
else {
// loaded();
setTimeout("loaded()", 450);
}

Ein anderer Ansatz ist eine modifizierte gb_scripts.js mit einer Browserweiche für Firefox: http://joelthecoder.wordpress.com/2008/08/11/greybox-and-firefox-back-button-issue/.

3. Anzeige von großen Bildern
Ein weiteres Problem stellt die Anzeige von Bilder dar, die größer sind als der Bildschirm. Auch hier gibt es zwei Möglichkeiten: Entweder die Bilder werden, wenn sie ein gewisses Maß überschreiten, verkleinert dargestellt. Dazu wird in der Datei loader_frame.html die Funktion loaded() verändert: Nach den beiden Zeilen

var width = img_holder.width;
var height = img_holder.height;

wird eine maximale Höhe bzw. Breite festgelegt (in der Regel die Höhe). Wenn diese maximale Höhe bzw. Breite die aktuelle Höhe bzw. Breite überschreitet, wird der Skalierungsfaktor ermittelt und die jeweils andere Dimension angepasst. (Nicht vergessen auf ganze Zahlen zu runden!) Dieses Verfahren führt zu unnötigem Traffic. Deswegen empfiehlt sich eine andere Möglichkeit: Mit PHP lässt sich ein verkleinertes Thumbnail erzeugen, was bereits die erforderlichen Maße hat und in die Greybox geladen wird.