今回、本店にスライドショーを導入しようと思いネットでいろいろ検索してみるとjavascriptを使用した画像ビュアーが結構みつかりました(すべて英語サイト)ちなみに私はかなり英語が苦手です(苦笑)
- jQuery Gallery
サムネイルを拡大画像の上に表示できる。下の映り込みは「へぇ~」と言う感じ。ただ、一枚目に出てくる写真をどうにかしてほしい(笑)それよりも同じページに載っていたコレのほうをチャレンジしてみたい。 - ThickBox 2.1
これは実際に設置して採用しようと思っていたのですが、「進む」「戻る」を下の小さいリンクで行わないといけないのでどうもしっくりきませんでした。 - Smooth SlideShow v2
これも実際設置してみて採用しようとしたのですが、なぜか私の環境でうまく動かなかったので断念(おそらく設置ミスがあるのだと思いますが) - Highslide
いろいろなことが出来るものですなぁ。ドロップシャドウやドラッグして移動、拡大されるときのアニメーションもイイ感じ。 - Revamped Slideshow
ナビゲーションツールバー付き。小さいモニターでもナビゲートできるのは便利かも。ちなみにサンプル画像がタイランド。 - Lightbox JS v2.0
シンプルでコメントも入れられいい感じ。 - Litebox
設置方法、スタイルシートなど上のLightbox JS v2.0と同じでしたが、一部のjavascriptが異なっていました(データサイズがまったく違う)軽いからLightをLiteにしたのかなぁ。 - Slidebox 0.5
Lightboxと同じ感じ。
などなど。
個人的に今回のスライドショーに求めていたことは
- 必ずコメント(キャプション)を入れられること
- 小さいアイコンをクリックしなくても「進む」「戻る」が可能なこと(掲載している写真の約半数が縦位置の写真なのでクリックする場所が動くとブラウズしづらいと思っているから)私のサイトの場合、自動再生は不要なのでなくてもOK。
- サムネイルは小さいながらも写っているものがそこそこわかる今までのスタイルを踏襲したかったので、現状のようにどのサムネイルをクリックしても、そのクリックした写真から「進む」「戻る」が出来ること。
- 35mmフルフレームで撮影することが信条なので、表示された写真の上に文字やツールバーが重ならないこと(四隅まではっきり見えること)
- シロウトの私でも設置しやすいこと(のちの作業が楽なこと(笑))
- どうせならカッコイイもの(Cool)なもの&ちょっとはカスタマイズできそうなもの。
結果、上のような条件を満たしたものはLightbox JS v2.0で、昨日アップしたものはこれになっています。
。。。がしかし、どうも同じ仕様(ただしjavascriptのファイルサイズまったくちがう)のLiteboxが気になっていたのでさきほどそれもアップしてみました。試しに拙宅の物故PC(Win98 Pen2&IE6)でブラウズしてみたところ、なんとなくLiteboxのほが軽く表示されるような気がします。おそらくその「軽さ」が影響しているのかXPで見た場合(ほぼ最良と思われるネット環境下の場合)の動きも微妙に違いますね。
Lightbox JS v2.0を使ったページは ココ
Liteboxを使ったページは ココ
すでに東南アジアのリゾートホテル写真集で Liteboxを採用してしまったので上記リンクは消失しています。
現在の 東南アジアのリゾートホテル写真集 は jQuery の Lightbox を使っています。
///// point /////
- 「進む」「戻る」は画像上で左クリックです
- 「閉じる」は赤い×アイコン
- おすすめはキーボードの「←」「→」を使って閲覧
- キー操作で閉じるには「Esc」エスケープキー
//////////////////
縦位置になった場合、小さいモニタだと写真が切れてしまう気もしますが、現時点では本店で使用するにはBESTなスライドショーだと思います。
いままではひとつのホテルをアップするたびに拡大写真の枚数と同じだけページ(htmlファイル)を作っていましたが(いわゆる力技で処理していたので)このスライドショーを導入することでサーバー内のファイル数も激減することでしょう。
過去の掲載分もすべてスライドショーで処理したほうがいいのでしょうが、いやはやなんとも、すでにヘトヘトであります。
追記:Lightbox JS v2.0 と Liteboxでキーボードによる操作を可能にするにはjavascriptの一部を修正しないとダメなようです。次のエントリーをご覧ください。