Greybox anpassen – Teil 2 (Tastatursteuerung)

Im ersten Teil meiner Reihe „Greybox anpassen“ hatte ich ein bisschen das CSS verändert und nur eine kleine Änderung am Javascript vorgenommen, um Greybox ein anderes Aussehen zu verpassen. In diesem Beitrag werde ich nun eine Tastatursteuerung für Greybox bauen.

Dazu nehme ich die Dateien aus dem „greybox_source“-Ordner, als erstes die Datei: „set.js“ aus dem Unterordner „set“. Hier ergänzen wir in der Funktion „showSet“ einen EventHandler für das Event „keyup“. („keypress“ bereitet Probleme bei Safari). Der Event-Handler ist an das Element „document“ gekoppelt und soll die Funktion „Taste“ aufrufen: (Update: In einer vorherigen Version stand hier noch „window“. Mit „window“ funktioniert das Skript aber nicht im Internet Explorer! Statt „keypress“ nehme ich auch lieber „keyup“, so dass das Bild erst wechselt, wenn die Taste wieder losgelassen wird.)

showSet: function(start_index) {
        this.current_index = start_index;

        var item = this.current_set[this.current_index];
        this.show(item.url);
        this._setCaption(item.caption);

        this.btn_prev = AJS.IMG({'class': 'left', src: this.img_prev});
        this.btn_next = AJS.IMG({'class': 'right', src: this.img_next});

        AJS.AEV(this.btn_prev, 'click', AJS.$b(this.switchPrev, this));
        AJS.AEV(this.btn_next, 'click', AJS.$b(this.switchNext, this));
        AJS.AEV(document, 'keyup', AJS.$b(this.Taste, this)); // added by Torsten Landsiedel

        GB_STATUS = AJS.SPAN({'class': 'GB_navStatus'});
        AJS.ACN(AJS.$('GB_middle'), this.btn_prev, GB_STATUS, this.btn_next);

        this.updateStatus();
    },

Unter der Funktion „switchNext“ müssen wir dann natürlich die neue Funktion „Taste“ einbauen:
(Ergänzung durch Leser Cherry: Dazu muss hinter der letzten Funktion switchNext ein Komma angehängt werden!)

Taste: function(e) { // added by Torsten Landsiedel
        var keycode = e.keyCode;

        if ( (keycode == 19) || (keycode == 27)){   // esc or break - hide greybox
            GB_hide();
        } else if ((keycode == 33) || (keycode == 37)){   // arrow left or page up - previous image
            if(this.current_index != 0) {
               this.current_index--;
               this.updateFrame();
               this.updateStatus();
            }
        } else if ((keycode == 34) || (keycode == 39)){   // arrow right or page down - next image
            if(this.current_index != this.current_set.length-1) {
               this.current_index++
               this.updateFrame();
               this.updateStatus();
            }
        } else if (keycode == 36){   // pos1 - first image
            if(this.current_index != 0) {
               this.current_index = 0;
               this.updateFrame();
               this.updateStatus();
            }
        } else if (keycode == 35){   // end - last image
            if(this.current_index != this.current_set.length-1) {
               this.current_index = this.current_set.length-1;
               this.updateFrame();
               this.updateStatus();
            }
        }
     }

Es existiert allerdings noch ein Problem: Da das Bild ja als Overlay über die Seite gesetzt wird, befindet sich der Fokus für die normale Tastatursteuerung immer noch auf dem ursprünglichen Thumbnail. Drückt man also die Return-Taste wird das Iframe ein zweites Mal geladen, was unsere gesamte Steuerung kaputt macht. Da hilft nur noch ein Reload der Seite.
Meine Lösung (es gibt sicher noch andere Lösungen), war es einfach abzufragen, ob bereits eine Greybox existiert und nur wenn dem nicht so ist, das Iframe zu laden. Dazu gibt es die Variable GB_CURRENT, die leer (null) ist, wenn keine Greybox aktiv ist. Also ergänze ich in der „set.js“ die Funktion „showImageSet“ um eine if-Abfrage:

GB_showImageSet = function(set, start_index, callback_fn) {
  if (GB_CURRENT == null) { // (if) added by Torsten Landsiedel
    var options = {
        type: 'image',
        fullscreen: false,
        center_win: true,
        width: 300,
        height: 300
    }
    var gb_sets = new GB_Sets(options, set);
    gb_sets.addCallback(callback_fn);
    gb_sets.showSet(start_index-1);
    return false;
  } // End if
}

Als zusätzlichen Ausstieg mit der Maus, kann man den Overlay zum Schließen der Bildanzeige benutzen, dazu ändere ich im Ordner „base“ in der Datei „base.js“ in der init-Funktion die Variable overlay_click_close auf „true“:

GreyBox = new AJS.Class({
    init: function(options) {
        this.use_fx = AJS.fx;
        this.type = "page";
        this.overlay_click_close = true; // von false auf true geändert!
        this.salt = 0;
        this.root_dir = GB_ROOT_DIR;
        this.callback_fns = [];
        this.reload_on_close = false;
        this.src_loader = this.root_dir + 'loader_frame.html';

        //Solve the www issue
        var h_www = window.location.hostname.indexOf('www');
        var src_www = this.src_loader.indexOf('www');
        if(h_www != -1 && src_www == -1)
            this.src_loader = this.src_loader.replace('://', '://www.');

        if(h_www == -1 && src_www != -1)
            this.src_loader = this.src_loader.replace('://www.', '://');

        this.show_loading = true;
        AJS.update(this, options);
    },
 

Damit der User auch weiß, dass der Overlay anklickbar ist, ändere ich in der CSS-Datei noch eine Kleinigkeit, der Cursor wird als Pointer dargestellt, so wie bei einem Link:

#GB_overlay {
    background-color: #cfd0d2; /* cfd0d2=graue Hintergrund-Farbe / #000 */
    position: absolute;
    margin: auto;
    cursor: pointer; /* Cursor soll Pointer sein, so wie bei einem Link! */
    top: 0;
    left: 0;
    z-index: 100; }

Jetzt können wir mit der Anleitung von der Greybox-Website die Javascript-Dateien komprimieren. Der Link zu Shrinksafe ist leider nicht aktuell auf der Seite, daher hier nochmal der aktuelle Link zu Shrinksafe.
[Nachtrag: Eine Anleitung zum Greybox selbst komprimieren findet sich nun auch hier im Blog.]

Hier ist die Tastatursteuerung in Aktion zu sehen:
http://www.katjaembacher.de/

Wie das Original-Greybox ist diese Anpassung lizenziert unter der LGPL.

Getestet unter:
Firefox 2.x/3.x
Safari 3.x/4.x
Opera 9.64
Internet Explorer 6/7/8
Konqueror

Läuft nicht unter:
Internet Explorer

Bei Fragen, Hinweisen oder Kritik freue ich mich auf viele Kommentare! Insbesondere bei Hinweisen auf Funktionieren in anderen Browsern.

Noch mehr Greybox-Artikel aus diesem Blog.