Press "Enter" to skip to content

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.

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*/
}

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/.

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.

4 Comments

  1. Dank Ihnen klappt das Anzeigen der Bilder im FF mit der Greybox.

    Doch Punkt 1 habe ich nicht ganz kapiert, das klappt bei mir nicht

    Ersetzen diese 4 Zeilen den alten CSS eintrag? Oder wird das ergänzt? Beides klappt bei mir nicht, auch wenn ich den Pfad auf nur "Greybox" geändert habe.

    Können Sie mir bitte weiter helfen?

    Mir fällt auf, daß Zeile 1 und 3 identisch sind. Ist das richtig?

    LG
    Harald

  2. ct ct

    Ja, die Zeilen dürfen natürlich nicht identisch sein, ist inzwischen korrigiert. Zeile 1 lädt das von Greybox mitgelieferte Stylesheet, Zeile 3 lädt ein speziell für den Internet Explorer modfiziertes Stylesheet, in dem einige Werte des Original-Stylesheets überschrieben werden.

    Diese 4 Zeilen stehen in der PHP-Datei, in der die Greybox angezeigt werden soll, im Head-Bereich.

    Leider musste ich heute feststellen, dass es Konflikte zwischen Greybox und jQuery gibt. Man kann aber Greybox ohne Probleme benutzen, wenn man nicht gleichzeitig auch jQuery benutzt. Wenn man aber auf derselben Seite jQuery benutzt, ist möglicherweise ein Image Viewer/eine Slide Show besser, die auf jQuery aufsetzt (einfach mal nach jquery image gallery suchen).

  3. Hier bin ich mal wieder.

    Für den Hack Greybox geben Sie folgendes an:

    —-
    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/.
    —-

    Der Link ist nicht mehr aktuell. Kann ich die modifizierte Datei von Ihnen bekommen? Das wäre nett.

    Die Änderung mit loader_frame.html klappt nicht mehr, da INternetseiten im IE dann nicht geladen werden. Deshalb würde ich gerne da andere ausprobieren!

    diedrichs@harald-diedrichs.de

    Liebe Grüße
    Harald

Schreibe einen Kommentar zu Diedrichs Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert