mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

jQuery版LightBox導入!

[ webサイト, ブログ ] [ CSS, HTML, JavaScript, Rails ]

こんばんは。

先日、当方のWebサイトブログサイトでページ下部へスクロースした際にページトップへ戻れるようボタンを設置しました。その際JavaScriptライブラリ「jQuery」を導入しました。

この影響で、Webサイトで今まで使用していた画像をポップアップしてスライドショーを可能にする「LightBox」(言わば、prototype版)が動かなくなりました。

どうやら、「jQuery」は「prototype」とは共存できないようです。

そこで、jQuery版のLightBoxが存在することを知ったので、早速導入しました。 (ちなみに、WordPressブログの方はデフォルトでjQuery対応のため、問題ありませんでした。)

導入記録

前提条件

  • 導入先はRuby on Railsで作成したWebサイト。 (他の環境の場合でも、若干の変更で対応可能です。)
  • JavaScriptのライブラリjQueryを導入済み。 (過去記事参照「Ruby on Rails - jQueryを導入!」)

1.ソースダウンロード

こちら「jQuery lightBox plugin」からZIPファイルをダウンロードし解凍しておく。

2.ファイル配置

解凍後、cssフォルダ内のファイル「jquery.lightbox-0.5.css」をRailsアプリのstylesheetsフォルダに配置。 imagesフォルダ内のgifファイルをRailsアプリのimagesフォルダに配置。 jsフォルダ内の「jquery.js」以外のjsファイルをRailsアプリのjavascriptsフォルダに配置。 (jQuery未導入なら「jquery.js」もRailsアプリのjavascriptsフォルダに配置)

3.JavaScript, CSSファイルの読み込み

LightBox用のJavaScript, CSSファイルを読み込むため、HTMLソースのタグ内に以下の記述を追加する。 ※jQuery導入済みの場合です。jQuery未導入なら「jquery.js」の読み込みも必要です。 ※以下はRailsでのJavaScript, CSSファイルの読み込み方法です。通常のHTML等なら読み替えてください。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    ・・・ 途中省略 ・・・

<script type="text/javascript">// <![CDATA[
  $(document).ready(function() {
      $('a[rel*=lightbox]').lightBox();
  });

// ]]></script>

    ・・・ 途中省略 ・・・
</head>

4.HTMLソース編集

HTMLソース内の画像リンクにLightBoxを割り当てるため、タグにrel属性を設定します。 これでページ内の画像がグループ化され「PREV」・「NEXT」ボタンでのスライドショーが可能になります。 逆にスライドショーから画像を外すにはrel属性を設定しなければよいです。 ※以下はRailsでのaタグ設定例です。

1
<%= link_to image_tag( "hoge.jpg", :class=> "photo", :size=>"120x90", :alt=>"HOGE" ), "images/hoge.jpg", :rel=>"lightbox" %>

通常のHTMLなら以下のようになるでしょう。

1
<a href="images/hoge.jpg" rel="lightbox"><img src="images/hoge.jpg" alt="HOGE" width="120" height="90" class="photo" /></a>

5.Webサーバリロード

設定を反映させるため、Webサーバをリロード(もしくは再起動)します。

6.動作確認

ブラウザで画像をクリックしてみます。 画像がポップアップされ、「PREV」・「NEXT」ボタンで前後の移動が可能であることを確認します。 ちなみに、当方の出来栄えはこちら → mk-mode SITE : MyCars

その他

prototype版のLightBoxでは同じページ内でも細かなグループ分けが可能でした。 jQuery版のLightBoxではデフォルトではそれが不可能のようです。 グループ分けが必要なら、別途「jquery.lightbox-0.5.js」をカスタマイズする必要があります。 当方のサイトでは別に画像閲覧を売りにしているわけでもないので、デフォルトのままにしています。

参考にしたサイト


以上。

Comments