Beach Resort Photoclip

Highslide JS

このところ動画も含めいろいろやりたいことが出てきたのでこのサイトで使用中のWordPressプラグインや javascript 等をひとつひとつ見直していましたら、POPアップウィンドウで使っている Highslide JS - JavaScript thumbnail viewer が、気がつけば結構バージョンが上がっていましてすでに Ver.4 となっていました（さっきまでここは3.3でした）

それではと、、、、最新版に移行させようといろいろ確認していましたら
、、、あれっ？IE（インターネット・エクスプローラ）だと現状のままだと動作していませんね。
、、、あれあれっ？ずっとこういう状態だったの？もしかして

いま気づいたのですが、数ヶ月前に入れたあるWordPressプラグインとバッティングしていたようでIEのみポップアップが動作せずにページ移動して画像を表示する状態になっていました。IEを常用している方はおそらく拡大画像が閲覧しづらかったのではないかと思います。

現在は正常に動作するようになっています。どうもすみません

ちなみに 「Highslide JS でポップアップ」 というのは これ です。

ものはついでとばかり YouTube のプレーヤーもポップアップ可能かどうか試してみたところ何の問題もなく表示されました。ここ もしくはサムネイルをクリックすると YouTube のプレーヤーがポップアップします。

ブログのど真ん中に YouTube のプレーヤーが鎮座しているのがどうも好きになれなかったのでこれでその件に関しては解決できそうです。

東南アジアのリゾートホテル写真集のほうに動画を入れるときにも使えそう。。。

1)サムネイル画像の拡大に使うより、文字リンクをクリックすることで拡大されるときのほうが個人的に好き

詳細がわからないようなサムネイル（横幅100px以下の小さいサムネイル）の拡大表示として使う場合は別として、単にサムネイルのポップアップとして使うよりは文字のリンクをクリックして画像がポップアップされたほうが使い勝手がいいかもしれません。その方向でジンバランのImpressionを更新してみました。別ウィンドウが開くような構成よりずっとスマートで効率よくブラウズできると思います。

2)ドラッグができる

別ウインドウが開くJavaの場合は、そのウィンドウを開いたまま元ページを読むことができます。ところが本店で写真閲覧用に使った「Litebox」は常にクリックしたウィンドウの中心部にオーバーレイがかぶった状態で展開されるので同時に元ページの文章を読むことができません。その点、「Highslide JS」はドラッグができる上に、複数の画像を拡大したままスクロールができるのでいろいろ便利な使いかたがあると思います。

3)欠点

「Highslide JS」に対応したリンクをクリックした時に使っている（閲覧している）ブラウザのウィンドウ幅（高さ）がポップアップされる画像の幅（もしくは高さ）よりも小さいと（正確にはマージンがあるので画像よりも大きいから大丈夫というわけではない）画像が縮小されてポップアップされてしまうこと。こればっかりは閲覧していただく方のPC環境に依存することなのでなんとも言えないというのが正直なところ。

結論としては「使い分けるのがベスト！」(苦笑)。。。そんなこんなの使用感でしたっ。

「ナットーぉぉぉぉぉ、食べてますか～ぁ！」A猪木氏風に叫ぶ

そろそろ飽きてきた人、イヤになってきた人もいることでしょう(^_^;)
基本的に自分で決めたことを継続できる人は納豆に頼らなくても「デキる」のです(笑)自戒も含む(爆)どよ～ん

以前、「スライドショーあれこれ」というエントリーの中でも紹介した「Highslide JS」、テストしてみます。画像をクリックすると拡大されるはずだがうまくいくか。ドラッグも可能とのことだが。

←アマンダリの傘

（しばらくして。。。）やった、一発でうまくいきました。
というわけで、これからBeach Resort Photoclipに新規掲載していく「Impression」ページの画像にはこの「Highslide」というのを部分的に使ってみたいと思います（すでにサヤンのImpressionは対応してみました）

要点としては
●サムネイルをクリックすると拡大されます。
●ドラッグが可能です。
●閉じるときには拡大画像上をクリックします（[Esc]キーでもOKみたいです）

試験的にフォーシーズンズ・ランカウイ内の拡大写真をLiteboxで閲覧するように変更しました。（Impression除く）イッキにやると、のちのち墓穴を掘りそうな気がしたので（不具合があると大変なので。。。正直に言うと気が変わるかもしれないので）ちょっと様子を見てみようと思います。不具合などありましたら、ぜひコメントしてください。よろしくお願いします。特に問題がなければ、次回掲載分より同じ手法を使う予定です。
/////
ブラウズ時はマウスを使うよりもキーボード操作のほうが楽だと思います。

【追記】 IE6、IE7での閲覧時、ファンクションキーの「F11」を押して全画面表示にしてご覧いただくと天地に余裕ができます（ちなみに元通りのウィンドウに戻すにはもう一度「F11」を押します）（2006/11/14）

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のキーボードによるナビゲーションが可能になりましたのでエントリーしておきます。