Greybox anpassen

15. August 2008 von Torsten 55 Kommentare

Ich hatte schon mal über die wunderbare Lightbox-Variante Greybox berichtet. Nun habe ich für eine Kundin Greybox extrem anpassen müssen und dabei fasziniert festgestellt, dass sich Greybox sehr einfach anpassen lässt. In diesem Artikel möchte ich zeigen, wie ich dass gemacht habe.

Die Anpassungen betreffen vor allen die CSS-Datei „gb_styles.css“, eine Änderung musste ich an der JavaScript-Datei „gb_scripts.js“ vornehmen.

Aber der Reihe nach. Die erste Aufgabe war das Anpassen der Hintergrundfarben. Der Navigationsstreifen, der im Original vorhanden ist, sollte nicht mehr vorhanden sein. Dazu stellen wir einfach die Hintergrundfarbe der Navigation auf die gleiche Hintergrundfarbe wie den Overlay. Die neue Overlay-Farbe ist ein Grauton: #CFD0D2. Die Default-Werte habe ich als Kommentar hinter die geänderte Zeile geschrieben. Da die Bilder einen eigenen Schatten hatten, wurde auch der 3-Pixel-Border beim Bild aus dem Originalskript ausgeschaltet. Auch der Caption-Text sollte nicht dargestellt werden.

#GB_overlay {
    background-color: #cfd0d2; /* cfd0d2=graue Hintergrund-Farbe / #000 */
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 100; }

.GB_Gallery .content {
    background-color: #cfd0d2; /* #fff; */
    border: 3px solid #cfd0d2; /* #ddd; */ }

.GB_header {
    top: 10px;
    left: 0;
    margin: 0;
    z-index: 500;
    position: absolute;
    border-bottom: 2px solid #cfd0d2; /* #555; */
    border-top: 2px solid #cfd0d2; /* #555; */ }

.GB_header .inner {
    background-color: #cfd0d2; /* #333; */
    font-family: Verdana,Arial,sans-serif; /* Reihenfolge: Verdana nach vorne! */
    padding: 2px 20px 2px 20px; }

.GB_header .caption { visibility:hidden; }

Ein vertikal zentriertes Bild wirkt in meinem Augen immer so, als ob es zu weit unten wäre, daher stelle ich das Bild 20 Pixel weiter oben dar:

.GB_Gallery {
    margin: -20px 22px 0 22px; } /* 1. Wert: 0px */

Die Textfarbe des Bildzählers wurde auf die passende dunkelgraue Textfarbe gesetzt:

#GB_middle {
    color: #646466; /* Textfarbe: dunkelgrau / #eee; */ }

Beim ersten und letzten Bild sind die Pfeile nach links bzw. nach rechts nicht mehr aktiv, aber im Stylesheet wird nur der Cursor angepasst (habe ich mal stehen lassen). Aus diesem Grund existiert aber die notwendige CSS-Klasse bereits, so dass ich den Pfeil sehr einfach komplett verstecken konnte:

#GB_middle .disabled {
    cursor: default;
    visibility:hidden; }

Der vorletzte Eingriff betrifft nun die JavaScript-Datei („gb_scripts.js“). Hier ändern wir den Wert der Opazität von 0,7 auf 1, so dass die Webseite nicht halbtransparent im Hintergrund zu sehen ist, sondern komplett ausgeblendet wird:

AJS.fx.fadeIn(this.overlay,{duration:300,to:1,onComplete:function(){  /* vorher 0.7 */

AJS.setOpacity(this.overlay,1);  /* vorher 0.7 */

Der letzte Punkt und das i-Tüpfelchen ist dann die Ladegrafik. Die ist noch nicht angepasst an die graue Hintergrundfarbe. Aber die Seite http://www.ajaxload.info/ hilft uns und wir erstellen die Wunschgrafik in der passenden Farbe.
[Nachtrag: Eine weitere Seite für Ladegrafiken ist preloaders.net. Via Dr. Web]

Die Grafiken für Next und Previous, sowie Close wurden gegen eigene Kreationen ausgetauscht und so haben wir eine wunderbar angepasste Greybox-Variation, die alle Vorteile von Greybox hat und perfekt in die Webseite integriert ist.

Sobald die Webseite online, werde ich hier das Ergebnis verlinken.
Update: http://katjaembacher.de/

Bei Fragen, Hinweisen oder Kritik hinterlasst gerne einen Kommentar!

Nachtrag: Ich habe die Portfolio-Seite nach Kundenwunsch auch mit einem Tooltip ergänzt. Für Greybox eignet sich qTip ganz hervorragend. Kleiner Hinweis: Im Quelltext muss qTip als erstes verlinkt sein, sonst funktioniert es nicht. Der große Vorteil von qTip ist, dass er das sowieso vorhandene title-Attribut benutzt und mittels der CSS-Datei wunderbar angepasst werden kann.

Nachtrag 2: Der Internet Explorer 6 (IE 5 und kleiner vernachlässige ich mal …) stellt merkwürdigerweise den Hintergrund nicht, wie gewünscht, grau dar. Mit der Webdeveloper-Toolbar bin ich darauf gekommen, dass dieser Bereich im CSS als html > body definiert ist. Das war komisch, weil ich dort ja die Hintergrundfarbe korrekt angegeben habe. Dann bin ich darauf gekommen. In der Datei „loader_frame.html“ gibt es auch einen Style-Bereich. Hier muss die Hintergrundfarbe im Body ebenfalls definiert werden, dann wird auch im IE 6 alles korrekt dargestellt!

  <style>
    body {
      background-color: #cfd0d2; /* ergänzt! */
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #GB_frame {
      visibility: hidden;
      width: 100%;
      height: 100%;
    }

    #loading {
      padding-top: 50px;
      position: absolute;
      width: 100%;
      top: 0;
      text-align: center;
      vertical-align: middle;
    }
  </style>

Noch mehr Greybox-Artikel:
Greybox und ein paar Probleme
Greybox anpassen Teil 2