HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > jQuery lightBox グループ化を操る3つの方法

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

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

jQuery lightBox plugin
図1
jquery.lightbox-0.5.min.js
図2
テンプレートの構造
図3


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

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

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

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

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

  1. 一番オーソドックスな設置方法 (私のサイトでの設置方法)
    私は、それ程多用していないので... CSSを調整して 1枚1枚 画像を開いてもらうような見た目 にしていますが、繋がりのない画像が 「次へ」「前へ」 で グループ化されている状態は あまり良くはないですよね。。。;
  2. 記事毎に グループ化させる設置方法推奨!
    FC2ブログなら、テンプレート自体に一工夫するだけで 記事毎に lightBox をグループ化させることができます。 他のスクリプトにも応用でき、記事の編集作業も要りませんので お奨めの方法です。 FC2ブログ以外でも工夫次第で設置できる場合もあると思います。
  3. 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.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]

<link rel="stylesheet" type="text/css" href="http://blog-imgs-00.fc2.com/a/b/c/ ~ /jquery-lightbox-05.css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ~ /jquery-lightbox-05-min.js"></script>

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

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

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

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

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

<script type="text/javascript">
$(function(){
$('#content a').lightBox();
});
</script>

※↑ 範囲内の <a> 全てに反映してしまうようで使えませんでした。

※↓ 2010/07/09 修正版 [ 詳細: rel="lightbox" を入れずに jQurey lightBox を ]
<script type="text/javascript">
$(function(){
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
.addClass("lightbox");
$('#content a.lightbox').lightBox();
});
</script>
<script type="text/javascript">
$(function(){
$('#content a[rel*=lightbox]').lightBox();
});
</script>


追記 : 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ブログ用)

<script type="text/javascript">
$(function(){
<!--topentry-->
$('#entry_no<%topentry_no> a').lightBox(); 
<!--/topentry-->
});
</script>

※↑ 記事内の <a> 全てに反映してしまうようで使えませんでした。

※↓ 2010/07/09 修正版 [ 詳細: rel="lightbox" を入れずに jQurey lightBox を ]
<script type="text/javascript">
$(function(){
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
.addClass("lightbox");
<!--topentry-->
$('#entry_no<%topentry_no> a.lightbox').lightBox();
<!--/topentry-->
});
</script>
<script type="text/javascript">
$(function(){
<!--topentry-->
$('#entry_no<%topentry_no> a[rel*=lightbox]').lightBox(); 
<!--/topentry-->
});
</script>


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

↑ このようなスクリプト(いずれか)を追加します。 FC2ブログの変数 を使っていますので、<!--topentry--> ~ <!--/topentry--> 部分が 記事数分 繰り返されます。

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

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

<!-- ▼記事部分▼ -->
<!--topentry-->
<!-- *=*=*=*=*=*=*=*=*=* -->

<div class="entry_m" id="entry_no<%topentry_no>">

<%topentry_body>

</div><!--/class=entry_m-->


<!-- *=*=*=*=*=*=*=*=*=* -->
<!--/topentry-->
<!-- ▲記事部分▲ -->

※ソースは私のテンプレートを例にしていますが、基本的にはどのテンプレートも同じなので <%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 ) へのリンク <a> に 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" 不要な設定 がおススメ。

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


スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-142.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 32件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る

※2014-04-29まで FC2ブログ有料プラン を適応中です。