jQuery版LightBox導入！
Updated:
先日、当方のWebサイト・ブログサイトでページ下部へスクロースした際にページトップへ戻れるようボタンを設置しました。その際JavaScriptライブラリ「jQuery」を導入しました。
この影響で、Webサイトで今まで使用していた画像をポップアップしてスライドショーを可能にする「LightBox」（言わば、prototype版）が動かなくなりました。
どうやら、「jQuery」は「prototype」とは共存できないようです。
そこで、jQuery版のLightBoxが存在することを知ったので、早速導入しました。 （ちなみに、WordPressブログの方はデフォルトでjQuery対応のため、問題ありませんでした。）
導入記録
前提条件
- 導入先はRuby on Railsで作成したWebサイト。 （他の環境の場合でも、若干の変更で対応可能です。）
- JavaScriptのライブラリjQueryを導入済み。 （過去記事参照「Ruby on Rails - jQueryを導入！」）
１．ソースダウンロード
こちら「jQuery lightBox plugin」からZIPファイルをダウンロードし解凍しておく。
２．ファイル配置
解凍後、cssフォルダ内のファイル「jquery.lightbox-0.5.css」をRailsアプリのstylesheetsフォルダに配置。 imagesフォルダ内のgifファイルをRailsアプリのimagesフォルダに配置。 jsフォルダ内の「jquery.js」以外のjsファイルをRailsアプリのjavascriptsフォルダに配置。 （jQuery未導入なら「jquery.js」もRailsアプリのjavascriptsフォルダに配置）
３．JavaScript, CSSファイルの読み込み
LightBox用のJavaScript, CSSファイルを読み込むため、HTMLソースの<head>タグ内に以下の記述を追加する。 ※jQuery導入済みの場合です。jQuery未導入なら「jquery.js」の読み込みも必要です。 ※以下はRailsでのJavaScript, CSSファイルの読み込み方法です。通常のHTML等なら読み替えてください。
<head>
・・・ 途中省略 ・・・
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('a[rel*=lightbox]').lightBox();
});
// ]]></script>
・・・ 途中省略 ・・・
</head>
４．HTMLソース編集
HTMLソース内の画像リンクにLightBoxを割り当てるため、タグにrel属性を設定します。 これでページ内の画像がグループ化され「PREV」・「NEXT」ボタンでのスライドショーが可能になります。 逆にスライドショーから画像を外すにはrel属性を設定しなければよいです。 ※以下はRailsでのaタグ設定例です。
<%= link_to image_tag( "hoge.jpg", :class=> "photo", :size=>"120x90", :alt=>"HOGE" ), "images/hoge.jpg", :rel=>"lightbox" %>
通常のHTMLなら以下のようになるでしょう。
<a href="images/hoge.jpg" rel="lightbox"><img src="images/hoge.jpg" alt="HOGE" width="120" height="90" class="photo" /></a>
５．Webサーバリロード
設定を反映させるため、Webサーバをリロード（もしくは再起動）します。
６．動作確認
ブラウザで画像をクリックしてみます。 画像がポップアップされ、「PREV」・「NEXT」ボタンで前後の移動が可能であることを確認します。 ちなみに、当方の出来栄えはこちら → mk-mode SITE : ＭｙＣａｒｓ
その他
prototype版のLightBoxでは同じページ内でも細かなグループ分けが可能でした。 jQuery版のLightBoxではデフォルトではそれが不可能のようです。 グループ分けが必要なら、別途「jquery.lightbox-0.5.js」をカスタマイズする必要があります。 当方のサイトでは別に画像閲覧を売りにしているわけでもないので、デフォルトのままにしています。
参考にしたサイト
-
[jQuery LightBox Pluginの使い方 Web制作支援 ShanaBrian Website](http://shanabrian.com/web/library/jlightbox.php “jQuery LightBox Pluginの使い方 Web制作支援 ShanaBrian Website”) - Query lightBox pluginでprototype版世代のrelグループセットを有効にする方法 :: 東京・練馬のフリーランスWeb制作者ブログ
以上。
Comments