Lightbox no..218.144.142.67 【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

このページの記事目次（タグ: Lightbox の検索結果 4 件）

スポンサーサイト [--/--/--]
iPad，iPhone，Android，DS，Wii など閲覧時の操作性対策を2つ [2012/04/03]
rel="lightbox" を入れずに jQurey lightBox を [2010/07/12]
jQuery lightBox　グループ化を操る3つの方法 [2010/06/23]
Lightbox JS （あえて旧Ver.）をカスタマイズ [2009/03/20]

スポンサーサイト

--/--/-- (--) カテゴリー：スポンサー広告

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

--/--/-- ～ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

iPad，iPhone，Android，DS，Wii など閲覧時の操作性対策を2つ

2012/04/03 (火) カテゴリー：ブログカスタマイズ上級

最近は PC・スマートフォン・タブレット時代などとも言われるように、ブログの閲覧環境も多種多用になっていますね。現在、FC2ブログでは PC用・スマートフォン用・携帯（ガラケー）用のテンプレートがあります。振り分けは以下のような感じ。

PC用テンプレートが適応
PC，iPad，3DS，DSi，Wii，PSP，PS3，PSVita...等
追記： 2013年3月頃～ iPad はスマホ用にも切り替え可能になっています。
スマホ用テンプレートが適応
※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
iPhone，iPod touch，Android，Windows Mobile，BlackBerry，...等
携帯用テンプレートが適応
スマートフォンに分類されない各社携帯電話

下の図は、このサイトで良くアクセスされるページ（1週間分の上位集計）です。

アクセス解析：
PC用テンプレートでの閲覧を辿ると iPad, DS, Wii 等の他、「iPhone や Android 等のPC版表示」でもアクセスされていることが判ります。

クリックで画像を拡大します

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

という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。

ある条件の時は lightBox を機能させない　
jQuery lightBox （拡大した画像や背景の何処をクリックしても閉じられるようにしてある）をタッチ操作のもの（iPad，iPod，iPhone，Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい！
ナビゲーションメニューの誤タップ対策　
タッチ操作のもの（iPad，iPod，iPhone，Android，3DS 等）では、:hover（マウスオーバー）でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ（誤クリック）していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

旧ナビゲーション： iPad などのタッチパネルでの操作を特に意識しなかったもの

クリックで画像を拡大します
現ナビゲーション：タッチパネルでの操作時に誤タップすることがないようにしたもの

クリックで画像を拡大します

FC2ブログ共有テンプレート『ari_seo1』『ari_seo2M』『ari_seo2L』のナビゲーションは今のところ旧タイプのままで、この部分を修正する予定はしていません。ユーザーさんは、使いやすいものを選んで必要に応じて各自で書き換えて使ってください。

1.　ある条件の時は lightBox を機能させない

追記（2012/04/05）：
$(window).width()　が取得する値が DS で見た時に期待とは異なっていたので、 $('html').prop('clientWidth') 　を試してみたところ、IE や Firefox ではOKなのに、Chrome と Opera で起動しなくなってしまいました。さらに　$('html').width()　も試してみたのですが、これもブラウザ表示領域とは異なる感じでした。なかなか難しいですね。。取り敢えず　$(window).width()　か　$('html').width()　のどちらかが無難なのかも。。

別に lightBox に限らず応用できると思います。「if　width（表示幅）が 800pxより大きく、且つ、スマートフォン用UA（ユーザーエージェント）でない場合・・・」が目的の条件式にしてあります。 801px以上としたのは、Wii（Wii版 Opera9）の解像度が横800px（固定）だからです。何故かカクカクオーバーレイが機能する時と、クルクルするだけでいつまでも画像が表示されないケースがあるようなので... （法則は不明）普通に画像を開く方が良心的な気がします。

追記（2012/04/04）：
3DS の　$(window).width()　ウィンドウサイズは横980px でした（モニターは横320px，他ズーム次第で変動..）。そのため、除外対象に Nintendo を加え 3DS や DSi を除外できるように変えました。当然、Wii も含まれます。 800px には拘らなくても良いかも。。

※PS3（プレイステーション3）からのアクセスもちょこちょこありますが、こちらは解像度 1,920x1,080 の場合が多く、かなり快適に使えるみたいなので lightBox もおそらくスムーズに動くのではないかなと... 予想。 PSP は 800px以下なので、除外対象になります。

それ以外のものも機能はするけれど、開いたものを触って不意に閉じてしまったり... など閲覧者の予測しにくい動作になるよりは、普通にリンクで開く方がいいかなと思いました。

2.　ナビゲーションメニューの誤タップ対策
※共有テンプレートユーザーさん向けの説明になります。

ナビゲーションメニューの該当部分を以下のように変更。
※ class="navitop" が入っているリンクです。間違えないようにご注意ください。

<a href="javascript:void(0);" class="navitop this">

こんな感じにします。 href=" " を省いてしまうと、IE6，IE7 では :hover が効かなくなってしまうので、href="javascript:void(0);" （何もしない）を入れておきます。リンク先はないので target="_blank" なども削除しておいてください。

これだけでもOKなのですが、リンクではない部分とリンクを明確にするために
スタイルシートの該当部分に

#nav .navitop {
（中略）
cursor:default;
}

を追加しておくと良いかと思います。
その場合、プルダウン無しでリンクを残す部分には

<a href="./archives.html" class="navitop this" style="cursor:pointer" title="サイトマップへ">

のようにしておくとリンクと判りやすいと思います。

iPad などタッチ操作のものでは、タップ（クリック）してプルダウンを開くような動作になります。プルダウンするメニューが長くなっている場合、下の方は環境によっては選択しにくいと思いますので、その辺りも考慮してみると良いかもしれません。。

今回の変更は、テンプレユーザーさんからの要望がキッカケで考えてみたものです。確かにこの方が良さそうな感じもしたので、このサイトのものも変更してみました。

少しずつでも閲覧しやすいブログに近づけていきたいですね。。
~~あ... ちなみに私、スマートフォン持ってないです。。しょぼ～ん~~
追記： 2012/04/28～旦那が iPad を持つようになったので動作確認はOKです。

スポンサーサイト

キーワード検索：スマートフォン iPad iPhone DS Wii jQuery Lightbox

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

2012/04/03 ～ | Comment (7) tweet? | ↑ ページ先頭へ ↑ |

rel="lightbox" を入れずに jQurey lightBox を

2010/07/12 (月) カテゴリー：ブログカスタマイズ上級

以前の記事 jQuery lightBox　グループ化を操る3つの方法で紹介した方法。 jQuery版の lightBox は rel="lightbox" を入れなくてもOK（不要）なんだと勘違いしていた私。

このサイトでは lightBox で開きたい画像リンクには rel="lightbox" を入れているので、問題なかったのですが、先日ある方のサイトで rel="lightbox" を入れずに lightBox を適応させてみたところ、画像クリックで lightBox が機能したものの、範囲内の <a> 全てが反応してしまい、読み込み状態のままになり不具合があることが判りました。

既に画像リンクが沢山ある状態で、全てに rel="lightbox" を追加するのは大変な作業だと思いますので．．．かなり必死に探したところ jQuery lightBox での適応方法を紹介しているサイトをみつけましたので、紹介します。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

[ 参考：ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法 | THE HAM MEDIA ]　← この方法を先日のソースに適応させると、以下のようになります。

rel="lightbox" を入れずに、範囲内全ての画像リンクで lightBox をグループ化して適応する方法

追記： 2011/09/28
jQuery1.3以降を利用している場合のエラー対策として、当初のソース　
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')　や　a[@rel*=lightbox]　から @ を除いたソースに修正しました。（別記事のコメント参照） jQuery1.2.3 など 1.3より前のバージョンでもこの方法で問題ないようです。

画像のリンクに class="lightbox" が自動付与された状態になります。
#content 部分に、記事全体を囲っているような ID を指定すればOKです。（上図参照）

rel="lightbox" を入れずに、記事毎全ての画像リンクで lightBox をグループ化して適応する方法（FC2ブログ用）

画像のリンクに class="lightbox" が自動付与された状態になります。
 ～  部分が記事数分繰り返されるので、テンプレートの <%topentry_body>（記事本文が入る変数）部分を id="entry_no<%topentry_no>" で囲っておけば、記事毎のグループ化にも対応できます。（上図参照）

先日の記事も修正済みですので、詳細や基本的な設定方法は jQuery lightBox　グループ化を操る3つの方法を参照してください。

また、この方法は jQuery版 lightBox での方法ですが、 Lightbox 2（prototype版）， Lightbox plus， Lightbox JS　でも rel="lightbox" 自動付与の方法はあるようです。

jQuery lightBox での自動付与　【今回のもの】
ブログやサイトで使う写真や画像を自動的にLightBoxで・・・ | THE HAM MEDIA
Lightbox 2（prototype版）での自動付与
Lightbox JS v2.0 導入しつつ改造 - LogJET
Lightbox plus での自動付与
Lightbox Plus で画像を同一画面オーバーレイして表示 :: Drk7jp
Lightbox JS での自動付与
Customizing FC2BLOG - Lightbox JS を使ってFC2BLOGの画像をカスタマイズ

既にたくさんの記事（画像リンク）があり、これから lightBox を使ってみたいようなケースでは rel="lightbox" を1つずつ追加するより簡単な方法かもしれませんね！

キーワード検索： jQuery Lightbox javascript カスタマイズ

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

2010/07/12 ～ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

jQuery lightBox　グループ化を操る3つの方法

2010/06/23 (水) カテゴリー：ブログカスタマイズ上級

私が Lightbox JS （旧バージョン）から jQuery版 lightBox に乗り換えたのは半年前の 2010年1月のこと。 Lightbox JS はライブラリも不要で軽い，どこをクリックしても画像を閉じられる，カスタマイズしやすいなどの理由で気に入っていたのですが、 1回目にスクリプトが機能していないケースが多いことだけが気になっていました。

上手く機能しなくても別窓で表示されるだけなので大きな問題でも無いかもしれませんが、1回目と 2回目の動作が異なるのはやはり少し戸惑うかな．．．と。読み込み完了と正常起動のタイミングは Highslide JS が最も良く、次いで jQuery lightBox や Prototype Lightbox 2 など、 Lightbox JS （旧バージョン）は少しイマイチな印象です。

図1

図2

図3

※実際には、ここまで無駄に大きいサイズにしたり、前後の画像のサイズを変えていることは少ないですが、ここでは動作確認用として敢えてバラバラのサイズにしてあります。

jQuery lightBox は動きも軽く、どこをクリックしても画像を閉じるようにできる（簡単なCSS調整でカスタマイズ可能）、自動グル―プ化で 2枚目以降の画像の表示が速い．．．ということで、jQuery lightBox に変更しました。

自動グループ化を上手くコントロールするための設置方法

jQuery lightBox の大きな特徴の1つに自動グループ化というものがあると思います。そして．．．この便利な機能に逆に戸惑うこともあるのではないでしょうか？

一番オーソドックスな設置方法 （私のサイトでの設置方法）
私は、それ程多用していないので．．． CSSを調整して 1枚1枚画像を開いてもらうような見た目にしていますが、繋がりのない画像が「次へ」「前へ」でグループ化されている状態はあまり良くはないですよね。。。;
記事毎にグループ化させる設置方法 （推奨！）
FC2ブログなら、テンプレート自体に一工夫するだけで記事毎に lightBox をグループ化させることができます。他のスクリプトにも応用でき、記事の編集作業も要りませんのでお奨めの方法です。 FC2ブログ以外でも工夫次第で設置できる場合もあると思います。
rel="lightbox[グループ名]" の設定を有効にする方法
Prototype Lightbox 2 にあったグループ化（ rel="lightbox[任意のグループ名]" ）の設定を jQuery lightBox でも使えるようにするカスタマイズです。 1つの記事内でさらにグループを分けたい場合や 2. の方法が使えない場合、Lightbox 2 をこれまで使用していていた場合などにお奨めです。

ちなみに私は全部試して結局 1. の方法を選んでいますが．．．後はお好みで！
3. のカスタマイズについては、[ prototype版LihgtboxからjQuery版Lightboxへの移行 | Beach Resort Photoclip ] に詳しく書かれていますのでそちらを参照してください。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

jQuery lightBox の準備，アップロード

http://leandrovieira.com/projects/jquery/lightbox/　から jquery-lightbox-0.5.zip をダウンロードします。 ※IE で「ファイルが壊れています」と表示されダウンロードできない場合、Firefox 等なら正常にダウンロードできると思いますのでお試しください。

解凍したフォルダにはサンプルファイルなど色々含まれていますが、実際に必要になるのは以下のファイルです。 jsファイルは基本的に同じものが 3種類用意されていますが、軽くて扱いやすい jquery.lightbox-0.5.min.js （Minified 10KB）を選んでいます。

jquery.lightbox-0.5.css　→　jquery-lightbox-05.css
jquery.lightbox-0.5.min.js　→　jquery-lightbox-05-min.js
※FC2ブログではファイル名に . ドットが含まれているとアップロードできません。なので、ドットを含まない名前に直して利用します。
lightbox-blank.gif
lightbox-btn-close.gif
lightbox-btn-next.gif
lightbox-btn-prev.gif
lightbox-ico-loading.gif

jquery.lightbox-0.5.min.js の修正，アップロード

jquery.lightbox-0.5.min.js （jquery-lightbox-05-min.js）をテキストエディタ（図2）などで開き、14行目（コードの最初の行，画像のパス部分）をアップロードした画像のパスに修正していきます。 .gif というところを探してその部分5か所を http://blog-imgs-00.fc2.com/a/b/c/ ～ /xx.gif などと修正すればOKです。

その他、14行目や 18行目などの設定で「日本語」を使った場合、文字コードを正しく指定して保存してください。（FC2ブログの場合、EUC になります）

修正した jquery-lightbox-05-min.js を再度アップロードします。

<head> ～ </head> 部分に以下を記入 [A]

ファイルのパス部分は、実際にアップロードしたものに書き換えてください。

jQuery ライブラリ本体（バージョン1.2.3）は、ダウンロードしたフォルダにも含まれています。私は、Googleのサーバーから直接読み込んで使用しています。
[ 参照： Google AJAX Libraries APIを利用しよう！ | THE HAM MEDIA ]

追記（2013/03/26）：

この記事のコメント No.1588 ～ No.1592　jQuery lightBoxのバグ？

jQuery ライブラリ本体のバージョンによっては、キーボードを使った操作などで不具合が出るケースがあるようです。バージョンは最新版が良いという訳でもないようなので、各自確認してみてください。 jQuery(ver 1.2.3) や jQuery(ver 1.3.2) 辺りが無難かも。。 1.2.3 は、その後のバージョンのものよりファイルサイズも軽いです。但し、「zenback」を利用している場合には jQuery(ver 1.2.6) にして、記事後半の説明も参照してください。

<head> ～ </head> 部分 [A] より下に以下を追加

1.　一番オーソドックスな設置方法の場合

追記： 2011/09/28
jQuery1.3以降を利用している場合のエラー対策として、当初のソース　
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')　や　a[@rel*=lightbox]　から @ を除いたソースに修正しました。（コメント参照） jQuery1.2.3 など 1.3より前のバージョンでもこの方法で問題ないようです。

↑ このようなスクリプト（いずれか）を追加します。 #content は、このテンプレートの場合の一例です。記事全体を囲っているような ID を指定します。（図3）

前者は、rel="lightbox" が不要のもの　（範囲内全ての画像リンクで lightBox 適応）
後者は、rel="lightbox" を入れたもの　（範囲内特定の画像リンクで lightBox 適応）

2.　記事毎にグループ化させる設置方法の場合（FC2ブログ用）

↑ このようなスクリプト（いずれか）を追加します。 FC2ブログの変数を使っていますので、 ～  部分が記事数分繰り返されます。

前者は、rel="lightbox" が不要のもの　（記事内全ての画像リンクで lightBox 適応）
後者は、rel="lightbox" を入れたもの　（記事内特定の画像リンクで lightBox 適応）

このスクリプトを有効にするために、テンプレートの <%topentry_body>（記事本文が入る変数）部分を id="entry_no<%topentry_no>" で囲っておきます。（図3）

※ソースは私のテンプレートを例にしていますが、基本的にはどのテンプレートも同じなので <%topentry_body> （記事本文が入る変数）を探してそれを囲っている <div> などに id="entry_no<%topentry_no>" を追加すればOKです。

テンプレートによっては、記事本文を囲む特定のID （ id="e_<%topentry_no>" など）が予め入っている場合もあると思います。その場合、それを利用すればOKです！

※ブログパーツ「zenback」を利用している場合の注意事項

「zenback」を利用しているブログにおいては、このままだと IEでの閲覧時に zenback が読み込み中のままとなり機能しない不具合が起こるようです。

これを回避するためには jQuery のバージョンを 1.2.3 から 1.2.6 に変更し、さらに、$(function(){ という記述を jQuery(function($){ と書き換えれば大丈夫とのことです。

取り敢えず、設置完了！

rel="lightbox" が不要な設定にしてある場合、既に使える状態です。

rel="lightbox" が必要な設定にしてある場合、画像ファイル（.gif .png .jpg ）へのリンク <ａ> に rel="lightbox" を追加すればOKです。 <a> に title="テキスト" を入れておくと、それが画像のキャプションとして入りますので必要に応じて設定します。

<a href="～.png" title="IE7 でのスクリーンショット" target="_blank" rel="lightbox"><img src="～.png" alt="縮小画像" width="138" height="118" /><br />クリックで画像を拡大します</a>

例えばこんな感じ。面倒だと思う方は rel="lightbox" 不要な設定がおススメ。

表示位置を変更したり、「次へ」「前へ」のリンク幅を狭くして画像を閉じやすいように．．．など。自分好みにカスタマイズして使っています。

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

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

2010/06/23 ～ | Comment (32) tweet? | ↑ ページ先頭へ ↑ |

Lightbox JS （あえて旧Ver.）をカスタマイズ

2009/03/20 (金) カテゴリー：ブログ雑記・その他

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

この手の javascript は数多く存在し、中でも一番多く使われていそうなものが 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> に以下を追加

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

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

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

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

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

画像ファイル（.gif .png .jpg ）へのリンク <ａ> に 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 】

lightbox.js　　12KB
lightbox.css　　01KB
ari_close.png　　03KB

これで縦幅の大きい画像でも上から下にスクロールさせれば全体を確認できるようになりました。（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

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

2009/03/20 ～ | Comment (8) tweet? | ↑ ページ先頭へ ↑ |

申し訳ありません。　お探しの記事は現在、このユーザータグ（Keyword）を設定していない可能性があります。右上の検索BOXで再度用語を短めに入力していただくと記事が見つかる場合があります。

Lightbox 【 ありのごとくあつまりて 】

スポンサーサイト

iPad，iPhone，Android，DS，Wii など 閲覧時の操作性対策を2つ

1. ある条件の時は lightBox を機能させない

2. ナビゲーションメニューの誤タップ対策※共有テンプレートユーザーさん向けの説明 になります。

rel="lightbox" を入れずに jQurey lightBox を

rel="lightbox" を入れずに、範囲内全ての 画像リンク で lightBox をグループ化して適応する方法

rel="lightbox" を入れずに、記事毎全ての 画像リンク で lightBox をグループ化して適応する方法 （FC2ブログ用）

jQuery lightBox グループ化を操る3つの方法

自動グループ化を上手くコントロール するための設置方法

jQuery lightBox の 準備，アップロード

jquery.lightbox-0.5.min.js の 修正，アップロード

<head> ～ </head> 部分に以下を記入 [A]

<head> ～ </head> 部分 [A] より下に以下を追加

1. 一番オーソドックスな設置方法 の場合

2. 記事毎に グループ化させる設置方法 の場合 （FC2ブログ用）

※ブログパーツ 「zenback」 を利用している場合の注意事項

取り敢えず、設置完了！

Lightbox JS （あえて旧Ver.） をカスタマイズ

Lightbox JS の設置方法

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

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

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

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

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

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

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

Lightbox 【ありのごとくあつまりて】

iPad，iPhone，Android，DS，Wii など閲覧時の操作性対策を2つ

1.　ある条件の時は lightBox を機能させない

2.　ナビゲーションメニューの誤タップ対策
※共有テンプレートユーザーさん向けの説明になります。

rel="lightbox" を入れずに、範囲内全ての画像リンクで lightBox をグループ化して適応する方法

rel="lightbox" を入れずに、記事毎全ての画像リンクで lightBox をグループ化して適応する方法（FC2ブログ用）

jQuery lightBox　グループ化を操る3つの方法

自動グループ化を上手くコントロールするための設置方法

jQuery lightBox の準備，アップロード

jquery.lightbox-0.5.min.js の修正，アップロード

1.　一番オーソドックスな設置方法の場合

2.　記事毎にグループ化させる設置方法の場合（FC2ブログ用）

※ブログパーツ「zenback」を利用している場合の注意事項

Lightbox JS （あえて旧Ver.）をカスタマイズ

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

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

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

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

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

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

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