Netztaucher

Erkenntnisse eines Netzbewohners

Greybox anpassen – Teil 2 (Tastatursteuerung)

13 Kommentare


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.

Diese Seite zu Mister Wong hinzufügen

Autor: Torsten

Webworker, Moderator im deutschen WordPress.com Supportforum und lebendiges Videoformate-Lexikon.

13 thoughts on “Greybox anpassen – Teil 2 (Tastatursteuerung)

  1. Pingback: Greybox anpassen « Netztaucher

  2. Pingback: Greybox und ein paar Probleme … « Netztaucher

  3. Hi,

    ich habe das Problem mit der Greybox, dass ich bei einer 1024 auflösung webseiten die auch 1024 optimiert wurden nur mit horizontalen scrollbalken sehen kann. Also wäre es super wenn man die greybox einfach rechts und links bis an den rand erweitern könnte damit der scrollbalken nicht mehr erscheint (mehr platz für die zu ladende webseite).

    gruß

  4. Hallo Dirk1977,

    schau dir mal die gb_scripts.js ab Zeile 420 an. Greybox lässt hier 10% der Breite als Rand zu den Seiten. Mit ein bisschen herumprobieren kannst du die Ränder so einstellen, wie du möchtest. Ganz bis an den Rand würde ich allerdings nicht gehen, wg. dem Scrollbalken der Seite, der sonst die Greybox verschieben würde …

    Gruß, Torsten

  5. Pingback: Greybox selbst komprimieren « Netztaucher

  6. Hi, I have installed greybox and everything’s perfect. I have designed
    a close-button (png img) and successfully removed the text „Close“
    from the script and made the header transparent so only the button is
    seen (almost at the far right of the header – somehow I’m missing a
    space there).Anyway, I would like the button to be on the right side
    of the box, vertically aligned to the top like in the poor drawing I
    made:

    ———————
    | | X
    | |
    ———————

    Hope this is possible, and somebody can help me.
    Greetings, Vlad.

  7. Pingback: Greybox selbst komprimieren | Torsten Landsiedel

  8. Hallihallo,

    ich habe einige Probleme mit Greybox und wäre für Tipps sehr dankbar!

    1. Positionierung von GB_window
    GB_window lässt sich bei mir nicht per CSS positionieren (ich möchte es ein paar Pixel tiefer setzen), weil Werte für „top:0;“ direkt ins HTML des DIV geschrieben werden und darum die Einstellungen im Stylesheet ignoriert werden. Kann aber nicht finden, WO diese Werte eingesetzt werden in den Code – any idea?

    2. Selbst komprimieren
    Die Tipps zum Hinzufügen des Schließens per Klick auf den Overlay sind SUPER, das brauche ich auch (Nutzer übersehen den Schließen-Button oft). Am liebsten hätte ich auch noch ein Schließen bei ESC…
    Anyway: Die Komprimiererei mag nicht so funktionieren, wie hier beschrieben. ShrinkSafe scheint weiterentwickelt zu sein, es gibt jetzt eine Onlinefunktion http://shrinksafe.dojotoolkit.org/ und im Download (wieder?) nur noch ein einzelnes File. Weil ich ein JS-DAU bin, stehe ich hier auf dem Schlauch: Kann ich die Online-ShrinkSafe-erei nutzen und welche Scripte muss ich dann wohin shrinken? Base selbst ist ja gar nicht enthalten bei der Endversion der Greybox…

    1.000 Dank!
    Herzlich, Nicola Straub

  9. Ahhhh, (fast) alles zurück: Abstand funktioniert doch – und zwar mit padding-top für das GB_window. Prima! Und das „this.overlay_click_close = true;“ habe ich jetzt einfach direkt in gb_scripts.js im greybox-Verzeichnis reingefummelt. Dann brauche ich das base.js nicht und auch keine Komprimierung. Damit kann ich erst mal leben. Auch wenn es natürlich schön wäre, die oben beschriebene Tastatursteuerung selbst einmal ausprobieren zu können – vielleicht würde man daraus ja sogar ein „Schließen bei ESC“ hinbekommen.
    Aber wie gesagt: Erst mal kann ich mit dem Erreichten leben… DANKE für diese Anleitung jedenfalls noch mal!

  10. Huhu!
    Jahaa, aber ohne Komprimierung geht ja Obiges halt leider nicht. Bei mir ist es halt so, dass ich eine Microsite öffne. Insofern brauche ich von der Tastatursteuerung tatsächlich NUR die ESC-Taste (hatte ich schlecht beschrieben, ich würde gern versuchen, die anderen Tastencodes rauszuwerfen, was ich mir selbst als JS-DAU halbwegs zutrauen würde, das hinzubekommen. Ich weiß nur nicht, was ich dann mit dem base.js tun soll hinterher – weil die Komprimieren-Anleitung eben so nicht mehr klappt bzw. eben ShrinkSafe jetzt primär eine Onlinefunktion ist und/oder es nur noch EINE Shrinksafe-Datei gibt im Download. Shrinke ich das bearbeitete base.js (mit der Onlinefunktion) kommt dabei ein kleineres base-shrinkend.js heraus, das aber (für mich) keine Ähnlichkeit hat mit einem der bestehende Greybox-JS-Files… ;-(

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s