Beach Resort Photoclip Blog Branch

このブログは「東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip」と統合しました。お手数ですがご覧いただいている投稿のタイトルをコピーして 東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip の右上部にある検索窓にペースト後、検索ボタンをクリックしていただければ該当記事が表示されます。
申し訳ありませんがよろしくお願いいたします。

*-*-*-*-*-*-*-*-*-*-*-*-*-*

IE7の正式版が先日公開されましたね。IE7を使ってからIE6のスキンを見ると「古っ」という感じがします。当然RSSにも対応しているので（遅すぎ？）頃合をみてIE7へ移行されたほうがいいと思います。
さて、もぅずーっと前からどうにかしたいと思っていた本店の拡大写真用のページを次回掲載分から刷新しようと思っています。とは言え、Flashを使ったカッコイイやつはシロウトゆえ到底無理なのでjavascriptでやってみることにしました。その気になって検索してみると結構いろいろなものが見つかりますね。どれもカッコイイものばかりで結構悩みます。

///// point /////
●「進む」「戻る」は画像上で左クリックです
●「閉じる」は赤い×アイコン
●おすすめはキーボードの「←」「→」を使って閲覧
●キー操作で閉じるには「Esc」エスケープキー

このブログは「東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip」と統合しました。お手数ですがご覧いただいている投稿のタイトルをコピーして 東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip の右上部にある検索窓にペースト後、検索ボタンをクリックしていただければ該当記事が表示されます。
申し訳ありませんがよろしくお願いいたします。

*-*-*-*-*-*-*-*-*-*-*-*-*-*

今回、本店にスライドショーを導入しようと思いネットでいろいろ検索してみるとjavascriptを使用した画像ビュアーが結構みつかりました（すべて英語サイト）
ちなみに私はかなり英語が苦手です(苦笑)

●jQuery Gallery
サムネイルを拡大画像の上に表示できる。下の映り込みは「へぇ～」と言う感じ。ただ、一枚目に出てくる写真をどうにかしてほしい(笑)それよりも同じページに載っていたコレのほうをチャレンジしてみたい。
●ThickBox 2.1
これは実際に設置して採用しようと思っていたのですが、「進む」「戻る」を下の小さいリンクで行わないといけないのでどうもしっくりきませんでした。
●Smooth SlideShow v2
これも実際設置してみて採用しようとしたのですが、なぜか私の環境でうまく動かなかったので断念（おそらく設置ミスがあるのだと思いますが）
●YUI based configurable slideshow
ページの片隅に置けそうな感じのスライドショー。。。と言っても、閲覧中に横のほうで常に写真が入れ替わっている状態というのは気になってしかたないか。。。
●Highslide
いろいろなことが出来るものですなぁ。ドロップシャドウやドラッグして移動、拡大されるときのアニメーションもイイ感じ。
●Revamped Slideshow
ナビゲーションツールバー付き。小さいモニターでもナビゲートできるのは便利かも。ちなみにサンプル画像がタイランド。
●Lightbox JS ｖ2.0
シンプルでコメントも入れられいい感じ。
●Litebox
設置方法、スタイルシートなど上のLightbox JS ｖ2.0と同じでしたが、一部のjavascriptが異なっていました（データサイズがまったく違う）軽いからLightをLiteにしたのかなぁ。
●Slidebox 0.5
Lightboxと同じ感じ。

などなど。

個人的に今回のスライドショーに求めていたことは
1. 必ずコメント（キャプション）を入れられること
2.小さいアイコンをクリックしなくても「進む」「戻る」が可能なこと（掲載している写真の約半数が縦位置の写真なのでクリックする場所が動くとブラウズしづらいと思っているから）
私のサイトの場合、自動再生は不要なのでなくてもOK。
3.サムネイルは小さいながらも写っているものがそこそこわかる今までのスタイルを踏襲したかったので、現状のようにどのサムネイルをクリックしても、そのクリックした写真から「進む」「戻る」が出来ること。
4.35mmフルフレームで撮影することが信条なので、表示された写真の上に文字やツールバーが重ならないこと（四隅まではっきり見えること）
5.シロウトの私でも設置しやすいこと（のちの作業が楽なこと(笑)）
6.どうせならカッコイイもの（Cool）なもの＆ちょっとはカスタマイズできそうなもの。

結果、上のような条件を満たしたものはLightbox JS ｖ2.0で、昨日アップしたものはこれになっています。
。。。がしかし、どうも同じ仕様（ただしjavascriptのファイルサイズまったくちがう）のLiteboxが気になっていたのでさきほどそれもアップしてみました。試しに拙宅の物故PC（Win98 Pen2＆IE6）でブラウズしてみたところ、なんとなくLiteboxのほが軽く表示されるような気がします。おそらくその「軽さ」が影響しているのかXPで見た場合（ほぼ最良と思われるネット環境下の場合）の動きも微妙に違いますね。

Lightbox JS ｖ2.0を使ったページはココ
Liteboxを使ったページはココ
すでに本店でLiteboxを採用してしまったので上記リンクは消失しています。

///// point /////
●「進む」「戻る」は画像上で左クリックです
●「閉じる」は赤い×アイコン
●おすすめはキーボードの「←」「→」を使って閲覧
●キー操作で閉じるには「Esc」エスケープキー
//////////////////

縦位置になった場合、小さいモニタだと写真が切れてしまう気もしますが、現時点では本店で使用するにはBESTなスライドショーだと思います。
いままではひとつのホテルをアップするたびに拡大写真の枚数と同じだけページ（htmlファイル）を作っていましたが（いわゆる力技で処理していたので）このスライドショーを導入することでサーバー内のファイル数も激減することでしょう。
過去の掲載分もすべてスライドショーで処理したほうがいいのでしょうが、いやはやなんとも、すでにヘトヘトであります。
追記：Lightbox JS ｖ2.0 と Liteboxでキーボードによる操作を可能にするにはjavascriptの一部を修正しないとダメなようです。次のエントリーをご覧ください。

Lightbox JS ｖ2.0とLitebox、キーボードでナビゲートできるようにするには

このブログは「東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip」と統合しました。お手数ですがご覧いただいている投稿のタイトルをコピーして 東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip の右上部にある検索窓にペースト後、検索ボタンをクリックしていただければ該当記事が表示されます。
申し訳ありませんがよろしくお願いいたします。

*-*-*-*-*-*-*-*-*-*-*-*-*-*

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

このブログは「東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip」と統合しました。お手数ですがご覧いただいている投稿のタイトルをコピーして 東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip の右上部にある検索窓にペースト後、検索ボタンをクリックしていただければ該当記事が表示されます。
申し訳ありませんがよろしくお願いいたします。

*-*-*-*-*-*-*-*-*-*-*-*-*-*

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

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

このブログは「東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip」と統合しました。お手数ですがご覧いただいている投稿のタイトルをコピーして 東南アジアのリゾートホテル写真集 ::: Beach Resort Photoclip の右上部にある検索窓にペースト後、検索ボタンをクリックしていただければ該当記事が表示されます。
申し訳ありませんがよろしくお願いいたします。

*-*-*-*-*-*-*-*-*-*-*-*-*-*

このところエントリーのパワーが落ちていますが（今週はこれで2回目(汗)）気晴らしに玄関口をガラリと模様替えしてみました。丸々一週間費やしましたが、雰囲気変わって気分はというと。。。正直くたびれました(笑)
ページ上にも書いてありますが、IE6＆7、Firefox（Win）で表示状況を確認しています。MacはFirefoxで確認したところ、「What’s New」のスクロールバーが折りたたまれずに表示されっぱなしになります。ブラウズするにはさほど影響はありませんが、ちょっとかっこ悪いっす(–;)古いSafariでは垂れ流し状態になります(爆)。。。対処はいずれそのうちに。
では、みなさま楽しい週末を！