スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[JavaScript]bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第19回目の授業です。

サイト制作中の生徒さんから、

サムネイルをクリックすると画像が拡大するギャラリーページを作りたい。
◆その際、たくさんのサムネイル画像を一覧で全て表示させるのではなく、縦スクロールが必要ないよう横にスライドさせたい

との要望がありました。

なるほど、拡大画像はlightBox、スライダーはbxSliderというjQueryの有名プラグインでできそうですね。

ニーズにぴったりなプラグインを新たに探すというのも一つの手ですが、使い慣れたプラグインで実装できれば、それも良いですよね!

ということで、今回は既知のプラグインを組み合わせて、コンパクトなギャラリーページを作ってみましょう!

完成イメージはこんな感じ。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

サンプルページはこちらです。

手順

  1. 公式サイトより、プラグインのソースファイルを入手する
  2. 必要なファイルを自サイトの適当なフォルダに収める
  3. HTMLを書く
  4. 必要ファイルを読み込み、javascriptの設定を記述する
  5. CSSを書く

1.公式サイトより、プラグインのソースファイルを入手する

※記事更新日より月日が経過している場合、ダウンロードできるバージョンが違い、設定方法も変わっている場合があります。
この記事は2013年2月現在のものです。

lightBoxはprototypeのものも昔からよく使われていますが、今回はjQueryで合わせます。

各ページのダウンロードリンクよりzipファイルをダウンロードしたら、解凍しておきましょう。
(prototypeって何?って方はこちら

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

2.必要なファイルを自サイトの適当なフォルダに収める

解凍したフォルダの中には、サンプル用の画像やhtml、オプション設定のためのjsファイル等が含まれています。

この中で、必要なファイルを自サイトの適当なフォルダに移動させます。

(lightBoxのソースファイル)

解凍すると、中にはこのような構成でファイルが入っています。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

必要なのは、

  • css/jquery.lightbox-0.5.css
  • imagesフォルダ内の画像全て
  • js/jquery.lightbox-0.5.js

これらのファイルです。

jsフォルダ内には他にも色々入っていますが、

●jquery.js →jQuery本体。サーバ上からファイルを読み込む場合は不要。
●jquery.lightbox-0.5.js →lightBoxのライブラリファイル。
●jquery.lightbox-0.5.min.js →上記ファイルの改行なし版。ファイルサイズが若干小さくなります。上記の代わりにこちらでもいいです。
●jquery.lightbox-0.5.pack.js →これ何ですかね(^_^;)無くても動きましたが、心配なら入れておきます。

という具合です。

photosフォルダとindex.htmは、サンプル用なので要りません。

(bxSliderのソースファイル)

解凍すると、中にはこのような構成でファイルが入っています。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

最低限必要なのは、

  • imagesフォルダ内の画像
  • jquery.bxslider.css
  • jquery.bxslider.js

です。

その他のファイルは、

●plugins/jquery.easing.1.3.js →スライドの動き方に変化を付けたい場合に使うオプションファイル。
●plugins/jquery.fitvids.js →スライドの幅をレスポンシブ対応させたい場合のオプションファイル。
●jquery.bxslider.min.js →jquery.bxslider.jsの改行なしバージョン。ファイルサイズが若干小さくなるので、こちらを使ってもいいです。
●readme.md →設置の仕方、各種設定方法などが書いてあります。ダブルクリックでは多分開きません。ブラウザかさくらエディタあたりにドラッグすると読めます。

という具合です。

これらを踏まえて、今回はこんな感じで各ファイルを収めました。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

cssフォルダ内
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

imagesフォルダ内
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

jsフォルダ内
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

photosフォルダ内
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

今回は、ボタン類の画像はimagesフォルダ、ギャラリー用の画像はphotoフォルダと分けましたが、imagesにまとめてもいいです。

ファイル同士の階層関係を変えてしまうと、スクリプトやcss内の相対パスも変えなくてはいけなくなったりするので、これくらいが無難だと思います。 逆に、それらのソースを見て該当のパスの書き方が分かれば、もっと自由にファイルを格納できます(今回は割愛)。

さて、では設置作業に移りましょう。

3.HTMLを書く

今回の要望には、

◆たくさんのサムネイル画像を一覧で全て表示させるのではなく、縦スクロールが必要ないよう横にスライドさせたい

という条件がありました。

横スライドをbxSliderで実装するのですが、普通に使うと、表示されている1枚の画像をスライドで次々と切り替える仕様になります。

ですが、bxSliderは画像だけでなくコンテンツごとスライドさせることができるので、それを利用します。

<HTML>

<div id="wrapper_red">
  <div class="contSlider">
    <ul>
      <li><a href="photos/img01.jpg"><img src="photos/thumb_img01.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img02.jpg"><img src="photos/thumb_img02.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img03.jpg"><img src="photos/thumb_img03.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img04.jpg"><img src="photos/thumb_img04.jpg" width="100" height="100" /></a></li>
    </ul>
    <ul>
      <li><a href="photos/img05.jpg"><img src="photos/thumb_img05.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img06.jpg"><img src="photos/thumb_img06.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img07.jpg"><img src="photos/thumb_img07.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img08.jpg"><img src="photos/thumb_img08.jpg" width="100" height="100" /></a></li>
    </ul>
    <ul>
      <li><a href="photos/img09.jpg"><img src="photos/thumb_img09.jpg" width="100" height="100" /></a></li>
      <li><a href="photos/img10.jpg"><img src="photos/thumb_img10.jpg" width="100" height="100" /></a></li>
    </ul>
  </div>
<div class="clear"></div>
</div>

次の行程で、bxSliderのスクリプトの設定を

<script type="text/javascript">
  $(document).ready(function(){
  $('.contSlider').bxSlider({
  });
 });
</script>

とするのですが、この例でいうとHTMLで「contSlider」のクラスを設定したdivの子要素(ここではul)が、一つ分のスライドとなります。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

そしてlightBox用に、サムネイル画像に拡大画像へのリンクを張っておきます。

拡大画像、サムネイル画像はそれぞれ用意しておきます。
サムネイル画像はサイズを決めて一律にしておくと、一覧の見た目がきれいだと思います。
cssの調整も楽ですしね。

4.必要ファイルを読み込み、javascriptの設定を記述する

この手順と次のcss設定の手順は、どっちが先でもいいかなとも思ったのですが、スクリプトの適用と同時に勝手に設定されるスタイルなんかもありますので、先にjavascriptの設定をしておきます。

まずはheadタグ内に、各種ファイルを読み込みます。

<!-- jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- Javascript file -->
<script src="js/jquery.lightbox-0.5.js" type="text/javascript"></script>
<script src="js/jquery.bxslider.js" type="text/javascript"></script>

<!-- CSS file -->
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

jQueryファイルは、例のようにサーバから呼んでも、lightBoxのフォルダの中にあったjquery.jsをjsフォルダに入れて、そこから読むようにしてもどちらでもいいです。

jsファイルの中ではjQueryファイルを一番に読み込みます。

style.cssはページ装飾用のcssで、新規に作成したものです。

そして続けて(headタグ内)、下記記述をします。

<!-- lightboxのための記述 -->
<script type="text/javascript">
  $(function() {
      $('.contSlider a').lightBox();
  });
</script>
            
<!-- bxSlider(複数段のスライダー)のための記述 -->
<script type="text/javascript">
  $(document).ready(function(){
    $('.contSlider').bxSlider({
    });
  });
</script>

lightBoxについては、「contSliderクラスの付いたタグの、子要素のaタグ」を条件に発動するように
「$('.contSlider a').lightBox();」としています。
contSliderの前のピリオド、aの前の半角スペースに注意します。

bxSliderについては、スライドさせる数個のコンテンツ(ここではul)をさらにdiv要素で囲っておいて、クラス名を付け、そのクラス名を「$('.contSlider').bxSlider({」のように書きます。

ここでも、記述の順番に注意します。

lightBoxのための記述をbxSliderより先にしないと、拡大画像の左下に出る「Image 1 of 20」の画像のトータル数が何か変になります。

このように、異なるライブラリを同じページに設定する場合、読み込む順番によって不具合が出たり、そもそも同居できないものもありますので、あれっと思ったらそのあたりも疑ってみてください。

5.CSSを書く

(style.css)

ul {
  margin: 0;
  padding: 0;
}
img { border: none; }
.clear { clear: both; }
  
#wrapper_red {
  width: 240px; /*サムネイル画像の幅×横に並べる数+margin分*/
  margin: 0 auto;
  border: 5px solid #C30;
  padding: 20px 60px 0;
}
#wrapper_red li {
  float: left;
  margin: 10px;
}

ポイントは、スライダー本体(ここでは.contSlider)を囲むdiv要素(ここでは#wrapper_red)の幅の設定です。

ここに、サムネイル画像の幅×横に並べる数と、画像間のmarginを足した数値をセットします。

ここでは、サムネイル画像が幅100pxで、2列に並べ、画像のマージンを10px四方にするので、
100px×2+(10px×2×2)で、240pxになります。

高さの設定はしなくてもいいです。
横何列かだけ決めておけば、あとはliの数によって調整されます。
HTMLの方でliを4つにすれば2行に、liを8つにすれば4行になります。

liにfloatをかけるのも忘れずに。また、画像のマージンもここで設定しています。

ulのmargin、paddingをリセットしていない場合はずれてしまいますので、リセットしておきます。

img {border: none;}は、リンクの線を消すための記述です。

.clear {clear: both;}は、フロート解除のものですが、汎用cssにclearfixを用意している場合はそちらを使った方がスマートです。その際は#wrapper_redにclearfixを適用します。

さて、ここでブラウザで確認してみましょう。

サムネイル画像もきちんと並んで、bxSliderのボタン類も出ていて、クリックするとスライドすれば、とりあえずは無事にjavascriptが反映されています。

デフォルトでは、左右の矢印ボタンがスライダーの内側に入るようになっています。
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

これを外側へやりたい場合は、jquery.bxslider.cssを編集します。

100行目と105行目あたり、セレクターでいうと「.bx-wrapper .bx-prev」「.bx-wrapper .bx-next」。

ここの「left:10px;」「right:10px;」を、マイナスの値に書き換えてやります。

これで外側に来ましたね。

では画像をクリックしてみましょう。
lightBoxの拡大画像が出ましたね!

でも、bxSliderの左右のボタンが見えてしまっています。
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

これも、jquery.bxslider.cssを編集します。

125行目の「.bx-wrapper .bx-controls-direction a」の宣言の中に、「z-index: 9999;」の記述がありますね。

これは、他のどの要素よりも前面に表示させるようにしていますので、これをコメントアウトしておきます。

(jquery.bxslider.css)
bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

はい、完成です!

他にも、矢印ボタンを他の画像にしたいとか、スライダー下の丸の色を変えるとか、その位置とか、jquery.bxslider.cssの修正で色々できますので試してみてくださいね。

サンプルページでは、横一列で作る場合の例も載せてあります。
こちらはbxSliderの、カルーセルスライダーのオプションを使っています。

サンプルページのソースを表示させて、cssなども合わせて見てみてくださいね

サンプルページはこちら

今日は少し難しかったかもしれませんが、jQueryの理解を深めるきっかけになれば幸いです。

それでは、お疲れ様でした!

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。