ありのごとくあつまりてLightbox JS (旧バージョン) サンプル テンプレートです。
http://arinogotokuatumarite.blog19.fc2.com/index.php?style2=Lightbox_JS&no=67 ← no=62,no=76... など変更できます

この記事に含まれるタグ (Keyword) :
Lightbox  カスタマイズ  画像  javascript  

Lightbox JS (あえて旧Ver.) をカスタマイズ

カテゴリー: ブログ雑記・その他

拡大画像など 画像ファイルへのリンク を 同じウィンドウでポップアップ風に表示する方法。 先日、急に導入してみたくなり、色々と調べ 実際に試してみました。

この手の javascript は 数多く存在し、中でも一番多く使われていそうなものが Lightbox のようですが、一言で Lightbox と言っても 色々なバージョンや種類があり、どれを使おうか本当に悩んでしまいました。

Lightbox サンプル画像
クリックで画像を拡大します
 

Lightbox サンプル画像
クリックで画像を拡大します
 
↑ a:hover を使って

で、Slimbox, Lightbox JS (旧バージョン,1.0),Lightbox Plus を実際に試して、最終的に Lightbox JS (旧バージョン) を選びました。

追記 (2010/01/09) :
jQuery版 lightBox に変更しました。

jQuery版 では、主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブで大きい画像を開きます。

現在は JQuery版 を適応していますので、旧バージョンの動作確認は Lighbox JS のサンプルテンプレート からどうぞ。

※ページの読み込みが完全に終わっていないうちに 画像へのリンク をクリックすると、Lightbox は作動せず、通常の表示となります。 これは javascript (onload) の仕様で、この Lightbox に限ったものではないようです。

これに決めた理由は ↓
  • どれよりも一番軽い ! (約17KB)
  • どこをクリックしても画像を閉じられる
  • カスタマイズしやすい ...etc

私の場合、画像のグループ化 (スライドショーのような機能) は必要ないと思ったので、とにかく 「軽さ」 と 「扱いやすさ」 を重視しました。


※rel="lightbox" の自動付与 (rel="lightbox" を書かなくてOKというもの) は、多くのタイプで 実装可能 かと思います。 [ 関連:rel="lightbox" を入れずに jQurey lightBox を ]


Lightbox系のスクリプト 比較一覧
海外のサイトですが、ここからサンプルを見て回っても面白いと思います。 「Lightbox v2.0」 の軽量版クローン 「Litebox」, HTMLや動画も表示できる 「Floatbox (Lightbox系)」, 様々な表示タイプから選べる 「Highslide JS (Lightbox とは異なるタイプ,やや設置難?)」 など本当に数多く存在するんですね!


Lightbox JS の設置方法


追記 : 2009/07/12 FC2ブログユーザーの方へ
適用中のテンプレートではなくても トップページ以外を簡単に確認するための方法 (便利なプレビュー用リンク) を紹介しています。 是非、使ってみてください。
[ 関連記事 : 複製テンプレートでトップページ以外を確認 ]

1. 配布サイト から必要ファイルをダウンロード

ファイルは lightbox.js (12KB) , lightbox.css (1KB) , overlay.png (1KB) , loading.gif (2KB) , close.gif (1KB) の5つです。

2. 画像ファイルをサーバーにアップロード

配布サイトから入手した overlay.png, loading.gif, close.gif をサーバーにアップロードしておきます。 (FC2ブログの場合には、ここで 画像ファイルの保存場所 を確認しておきます。 不具合などで、画像サーバーが移動しているケースもまれにあるので・・・

FC2ブログの場合、lightbox.js , lightbox.css 中にある 画像 (overlay.png , loading.gif , close.gif) の相対指定を 絶対指定 に変更しないと 何故か認識しませんでした。 通常は 相対指定のままでOK だと思いますが、認識しない場合 (FC2ブログを含む) には 該当箇所を 絶対指定 に変更します。
※絶対指定 とは http://blog-imgs-18.fc2.com/a/r/i/
arinogotokuatumarite/overlay.png のような指定です。

3. lightbox.js , lightbox.css をサーバーにアップロード

カスタマイズは後からでも出来るので... とりあえずアップ。

4. HTML の <head> ~ </head> に以下を追加

<link rel="stylesheet" type="text/css" href="http://blog-imgs-18.fc2.com/a/r/i/ ・・・ /lightbox.css" />
<script type="text/javascript" src="http://blog-imgs-18.fc2.com/a/r/i/ ・・・ /lightbox.js"></script>

通常は相対指定でOKですが、FC2ブログの場合などでは上のような 絶対指定 で記入 (赤文字部分 を変更) します。

( 5. 必要に応じ 以下の項目を追加 ) ← !!

※<body> に 別のonloadイベント が設定されている場合、これだけでは作動しないので、body onload 部分に initLightbox(); を追加してください。

<body onload="~; initLightbox();">

また、他のスクリプトの onclick 実行後、Lightbox が作動しないという現象にもこれが有効のようで、このブログの タグ検索結果ページ検索結果ページ では onclick="~; initLightbox();" となっている箇所があります。 「何故動かないんだろう?」 という現象が起こったら一度お試しください。

6. 画像ファイルへのリンクに rel="lightbox" を追加

画像ファイル (.gif .png .jpg ) へのリンク <a> に rel="lightbox" を追加 すればOK。 例えば ↓ のような感じで使います。 ■色文字部分 が含まれていれば基本的に大丈夫ですが、 <a> に title="" を入れておくと、それが Lightbox でも表示されるようになります。 必要に応じて入れられるので便利です!

<a href="~.gif" rel="lightbox" title="オランウータン (41KB)" target="_blank"><img src="~.gif" alt="Lightbox サンプル画像" width="140" height="135" /><br />クリックで画像を拡大します</a>
<a href="~.png" rel="lightbox" title="エディタは K2Editor を使っています" target="_blank">lightbox.js カスタマイズの注意点</a>

これで完成! あとは必要に応じてカスタマイズすればOKです。
lightbox.js カスタマイズの注意点 (← Lightbox )

Lightbox JS の表示位置などを カスタマイズ


Lightbox を設置して最初に困ったのが、ブラウザの縦幅 より 大きいサイズの画像を表示した際 「表示した画像の中心がブラウザの中央に合わせて表示されてしまう」 というものです。 単純に写真などであればこれでOKだと思いますが、私の場合、スクリーンショットなど 説明用として 横幅,縦幅の大きい画像 を使うことが多いので、これだと逆に面倒になる可能性もありました。

で、ちょっとだけカスタマイズしてみました。 変更箇所は Lightbox の表示位置をページ上部にしたところ と 一部メッセージ (lightbox.js), 閉じる用画像 に合わせた余白やサイズ部分 (lightbox.css) です。

【 プレビュー (HTML版) : lightbox.js , lightbox.css

これで 縦幅の大きい画像でも 上から下にスクロールさせれば全体を確認できるようになりました。 (Sleipnir2, IE8, IE7, IE6, Firefox3, Opera9, Google Chrome2 などで動作確認済。) それに 旧バージョンは どこをクリックしても画像が閉じられる というものなので、私のような使い道の方には便利かも。

後は、おまけです。
右のサンプルのように a:hover 効果を追加したい場合には・・・

Lightbox サンプル画像
クリックで画像を拡大します
 
a img.filter{
filter:Alpha(Opacity=70);
-moz-opacity:0.70;
opacity:0.70;}

a:hover img.filter{
filter:Alpha(Opacity=100);
-moz-opacity:1.0;
opacity:1.0;}

を スタイルシート に加え、<img> に class="filter" を追加すれば Lightbox に限らず 画像リンク に使えます。 (IE,Firefox,Opera,Google Chrome,Netscape,Safari などに対応 ※但し CSS Validator (W3C CSS 検証サービス) ではエラーと指摘されます。 値やクラス名は適当に変更してください。

<a href="~.gif" rel="lightbox" title="シロクマ (38KB)" target="_blank"><img src="~.gif" class="filter" alt="Lightbox サンプル画像" width="140" height="135" /><br />クリックで画像を拡大します</a>

[ 関連記事 : jQuery lightBox グループ化を操る3つの方法 ]
[ 関連記事 : フリーソフト集 3) グラフィック 編 ]
[ 関連記事 : 減色ツールの使い分け 画像をさらに軽量化! ]

[ 参考 : Lightbox JS v2.0 導入しつつ改造 - LogJET ]

※追記: ↓現在は 記事内容とは別の方法に変わっていましたが... 参考まで。
[ 参考 : ThickBox3.1からLightboxに乗り換えた - KUMA TYPE ]
[ 参考 : Lightbox Plus で画像を同一画面オーバーレイして表示 :: Drk7jp ]
[ 参考 : Slimbox - mootoolsベースのLightbox | buena suerte! ]

[ イラスト : イラストレーターわたなべふみの「子供と動物のイラスト屋さん」 ]

キーワード検索 : Lightbox  カスタマイズ  画像  javascript  

この記事を含むカテゴリー : テンプレ・FC2マニア » ブログ雑記・その他

はてなブックマーク  Google Bookmarks Yahoo!ブックマーク Facebook Twitter FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-67.html

2009/03/20 ~ | Comment (8) | Trackback (0) | ↑ ページ先頭へ ↑ |

Comment


リンクありがとうございました。

当サイトのエントリーをご紹介いただきありがとうございます。

記事タイトルの一部省略については無問題です。

FC2BLOGは全体的にサイトの動作がもっさりしているので、余計なエフェクトがない旧バージョンのlightboxが合っていますね。

denpaboy2 |  2009/03/27 (金) 20:19 [ 編集 ] No.45


こちらこそ。ありがとうございました。

rel="lightbox" の自動付与 は、(既にたくさんの拡大画像を使っている場合など)
必要と感じる方も多いと思うので denpaboy2 さんの記事

Lightbox JS を使ってFC2BLOGの画像をカスタマイズする
http://denpaboy2.blog92.fc2.com/blog-entry-81.html

※追記: 現在サイトは閉鎖されてます。

はとても参考になりました。
Lightbox の 旧バージョン、利用者は他のタイプに比べて少ないかもしれませんが、かなりシンプルな動きだと思うので、もっと増えるといいですね。

paruparu |  2009/03/27 (金) 22:30 [ 編集 ] No.46


教えてください

はじめまして。
解決法を探していたらこちらに辿り着きました。

私も軽くて簡単に設置できる理由からLightbox JS を選んだのですが、
INDEXエリア、検索エリアで画像をクリックして閉じると、
その直後の画面がなぜかページ最上部になっているんです。

個別エリア、カテゴリ、アーカイブエリアでは、
閉じると元の位置(サムネイル画像を表示してる位置)になっており何ら問題はありません。

試しにテンプレートを変更してみたりしましたが、やはり不具合は直りません。
原因がわからずに途方にくれています。

どうすれば修正できるんでしょうか?
心当たりがありましたら是非教えていただきたいです。
よろしくお願いします。

ももさく |  2011/03/09 (水) 22:00 [ 編集 ] No.957


ももさくさんへ

はじめまして。
>INDEXエリア、検索エリアで画像をクリックして閉じると、
不具合が起こるエリアが ココだけに限っているとしたら、何かこのエリアの設定or このエリアの該当記事 が関係していると考えるのが自然ですよね。

ただ、
>試しにテンプレートを変更してみたりしましたが、やはり不具合は直りません。
とのことなのでちょっと原因を見つけるのは難しそうですね。。。
一部のブラウザに限ったものか、殆どのブラウザでなのか、そのエリアだけの設定は無いか を一つずつテストするしかないかと思います。

私も今は 「jQuery版 lightBox」 に変更したので、思いきって不具合の起こらないものに変更するというのも1つの方法かもしれません。

paruparu |  2011/03/10 (木) 01:45 [ 編集 ] No.960


そうですね。「jQuery版 lightBox」に変更しようと思います。

こちらの記事に従って設定してみましたが、動きません(泣
今日はもう疲れてしまったので、明日またゆっくり設置してみます。

ありがとうございました。

ももさく |  2011/03/10 (木) 21:53 [ 編集 ] No.963


ももさくさんへ

jQuery lightBox グループ化を操る3つの方法http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html

これどおりに設置してもらえれば、全く動かない ということは多分ないと思うので、
一つずつ確認してみてくださいね。

これまでの経験上、「動かない」 という場合の理由は、

・サンプルソースのパスを書き換えず そのまま貼りつけた。
・FC2ブログにドット(.)を含むファイル名のままアップしようとして、出来ていなかった。
・jQuery本体 が2つ以上設定されている。(他のスクリプト や プラグイン等)
・jQuery の設定順序が間違っている。 必ず本体が先です。
・範囲設定 id の設定が間違っている。 テンプレート毎に設定は異なります。
・他のスクリプトと干渉して 一部のブラウザでエラーが出る。

こんなところでしょうか。 実際にソースを拝見できないのであくまでも予測でしか回答できませんが、頑張って設置してみてくださいね。

paruparu |  2011/03/11 (金) 01:08 [ 編集 ] No.964


できました!

「なんか少ないなー」と思って再度記事を読み返しました。
・・・</head>以下に設置するスクリプトがまるまる抜けておりました(大汗

ひとつずつ確認しながら設定したところ、
記事ごとにグループ化して表示出来るようになりました☆

大変お騒がせしました。
今後もいろいろと参考にさせていただきますね。
ありがとうございました。

ももさく |  2011/03/11 (金) 18:46 [ 編集 ] No.965


ももさくさんへ

<head> ~ </head> 部分  [A] より下 のことですか?
</head>以下 に入れるスクリプトはないので。。。 一応ご確認ください。

paruparu |  2011/03/11 (金) 22:08 [ 編集 ] No.966

コメントを投稿する 記事: Lightbox JS (あえて旧Ver.) をカスタマイズ


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback