
こんにちは。All About ホームページ作成ガイドの西村文宏です。
商品を紹介するページを作成する際、色違い商品やアングルを変えた写真など、1つの商品に対して複数の画像を掲載したいということはないですか?
多くのサイトでは、1つの画像だけを大きく掲載しておき、他の画像はサムネイルの形で並べるレイアウトを採用していることが多いです。
今回は、複数の画像を簡単にスライド表示させることができる「FlexSlider2.7.2(以下FlexSlider2)」の活用方法を紹介します。
スクリプト「FlexSlider2」を活用しよう
下記のサンプルページをご覧ください。
このページは、「FlexSlider2」を使って、4枚の写真を掲載した例です。
このサンプルページでは、最初に1つの写真を大きく掲載し、その下に4つのサムネイル写真を掲載できます。
閲覧者が何も操作しなければ、5秒ごとに自動的に右方向にスライド(アニメーション)して、次々に写真が切り替わっていき、閲覧者がサムネイル写真をクリックすれば、対応する拡大写真の位置までスライドします。
サンプルにあるスライド表示機能は、短いHTMLを記述するだけで簡単に使えます。
ここからは、「FlexSlider2」を使う方法を紹介します。
まずは「FlexSlider2」をダウンロード
「FlexSlider2」は、以下の配布サイトの「Source code (zip)」ボタンをクリックするとZIP形式でダウンロードできます。
このZIPファイルの中には、サンプルも含めて多くのファイルが含まれていますが、自サイト上にアップロードする必要があるのは、「jquery.flexslider-min.js」と「flexslider.css」の2ファイルだけです。
「FlexSlider2」を使うための記述
「FlexSlider2」を使うには、HTML内に以下のように記述します。
記述する箇所と内容は、大きく分けて3つあります。
1. head要素内で、CSSとJSファイルを読み込む
<link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="jquery.flexslider-min.js"></script>
- ※jQueryのバージョンは2.2.4までしか対応していません。
1行目と3行目は、「FlexSlider2」の構成ファイルです。
2行目は、「jQuery」本体を読み込んでいます。
ここではCDNサーバから読み込んでいます。CDNはキャッシュを再利用するので、ページを表示するまでの時間を短縮してくれます。また、ダウンロードしたファイルをサーバに置く必要が無いので、サーバへの負担も少なくなるというメリットもあります。
ただ自身のウェブサイト上に既にあるなら、そちらを読み込んでも構いません。
2. body要素内に、ul要素とli要素を使ってリストの形で画像を記述
<div class="flexslider"> <ul class="slides"> <li data-thumb="flower1.jpg"> <img src="flower1.jpg" alt="花1"> </li> <li data-thumb="flower2.jpg"> <img src="flower2.jpg" alt="花2"> </li> <li data-thumb="flower3.jpg"> <img src="flower3.jpg" alt="花3"> </li> <li data-thumb="flower4.jpg"> <img src="flower4.jpg" alt="花4"> </li> </ul> </div>
上記では、4枚の画像「flower1.jpg」〜「flower4.jpg」を掲載しています。
拡大用画像をimg要素のsrc属性の値に記述し、サムネイル用画像をli要素のdata-thumb属性の値に記述します。
拡大用画像とサムネイル用画像は、同じ画像を指定しても、異なる画像を指定しても構いません。
3. body要素の最後にスクリプトを実行する記述を加える
<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); </script>
上記のJavaScriptソースは、HTMLファイルの末尾(タグの直前)あたりに書いておきます。
ここでは特に修正はせず、上記のソースをそのままコピー&ペーストすると冒頭のサンプルページのように表示されるようになります。
なお、このスクリプト「FlexSlider2」には、他にも様々な表示効果を出せるオプションが用意されています。
body要素の最後に記述したJavaScriptソースのうち、以下の部分で指定します。
<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ 〜〜〜 ……… <ここにオプションを記述> ……… 〜〜〜 }); }); </script>
オプションの記述例5つ
以下に、オプションの記述例を5つご紹介します。
それぞれに、サンプルページを用意していますので、ブラウザで表示させてみてください。
オプションを何も指定しない場合
$(window).load(function() { $('.flexslider').flexslider(); });
何もオプションを指定せずに、上記のようにシンプルに記述することもできます。
この場合は、アニメーションで画像が次々にフェイドインを繰り返します。
なお、サムネイルは表示されずその代わり、表示中の位置を示すドットが表示されます。
スライドアニメーションを指定する方法
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); });
上記のように「animation: "slide"」というオプションを加えると、アニメーションのスタイルが「スライド」になります。
画像が右方向へ次々にスライドしていく形で表示されます。
サムネイルは表示されずに、表示中の位置を示すドットが表示される点は先ほどと同じです。
アニメーションループを指定する方法
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false }); });
上記のように「animationLoop: false」というオプションを加えると、アニメーションがループしなくなります。
1枚目の画像から順にスライドしていき、最後の画像に到達すると、その時点でスライドアニメーションは停止します。
カルーセルパネルのように見せる方法
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", itemWidth: 210 }); });
上記のように「itemWidth: 210」のような感じでオプションを加えると、1画像の横幅を指定できます。
その結果、同時に複数枚の拡大画像が横方向に連なって表示されるようになり、「カルーセルパネル」のように見せられます。
数値は自由に書き換えられますので、いろいろ試してみてください。
同時に何枚の画像が見えるかは、画像そのものの縦横比や、表示領域の横幅次第で変わります。
サムネイルを見せる方法
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); });
「controlNav: "thumbnails"」というオプションを加えると、すべての画像のサムネイルが、拡大画像の下に表示されるようになります。
この場合、先ほどまでの例で表示されていた「表示位置を示すドット」は表示されません。
そのドットの代わりに、サムネイル画像が表示されます。
以上のように、スクリプト「FlexSlider2」を活用すると、複数の画像を簡単にアニメーション効果を伴って拡大表示させることができます。ぜひ、ご活用ください。
ご注意ください
- 本記事の内容は、2025/01/16更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう!
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら