Lightbox JS ｖ2.0 と Litebox、
配布元サイトの説明を読むとキーボードでも「進む」「戻る」「閉じる」という操作が出来ると書いてあるようなのですが、実際指定されたキーを押してもまったく反応がありません。ちょっと前に試してみた別のjavascriptを用いたスライドショーでも同じようなことがあり、そのときにはjavascript内にあるKeycodeというものを修正したらうまく操作できるようになりました。
ということで、Lightbox JS ｖ2.0とLiteboxもキーボードでナビゲートできるようにするには同じような作業が必要になります。たぶん日本語キーボードと英語キーボードは違うのではないでしょうか、よくわからないけど（＾＾;）
以下、修正が必要な箇所です。
修正するファイルはLightbox JS ｖ2.0はlightbox.js、Liteboxはlitebox-1.0.jsというファイルです。中段にある
key = String.fromCharCode(keycode).toLowerCase(); if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
myLightbox.end();
} else if(key == 'p'){ // display previous image
if(activeImage != 0){
myLightbox.disableKeyboardNav();
myLightbox.changeImage(activeImage - 1);
}
} else if(key == 'n'){ // display next image
if(activeImage != (imageArray.length - 1)){
myLightbox.disableKeyboardNav();
myLightbox.changeImage(activeImage + 1);
の赤字の箇所を
if(keycode == 27){ // close lightbox
myLightbox.end();
} else if(keycode == 37){ // display previous image
if(activeImage != 0){
myLightbox.enableKeyboardNav();
myLightbox.changeImage(activeImage - 1);
}
} else if(keycode == 39){ // display next image
if(activeImage != (imageArray.length - 1)){
myLightbox.enableKeyboardNav();
myLightbox.changeImage(activeImage + 1);
青字のように修正したところ矢印キー「←」「→」とエスケープキー「Esc」によるキーボード操作が可能になりました。おそらく専門家の人にとっては非常に簡単なことなのでしょうが、私の場合「Keycodeって何よ？」というところから出発ですから容易ではありません(苦笑)
これが正しい措置なのか正しくない措置なのかよくわからないのですが、とりあえず上記のような修正を行ったところLightbox JS ｖ2.0とLiteboxのキーボードによるナビゲーションが可能になりましたのでエントリーしておきます。
