こんにちは。All About ホームページ作成ガイドの西村文宏です。
ある商品を紹介するページを作成する際、色違い商品やアングルを変えた写真など、1つの商品に対して複数の画像を掲載したいことがあります。
たいていは、1つの画像だけを大きく掲載しておき、他の画像はサムネイルの形で並べておくレイアウトを採用されるのではないでしょうか。
そのようなレイアウトで、複数の商品画像を「使いやすく」かつ「おもしろく」見せる効果が出せる「FlexSlider2」というスクリプトがあります。
下記のサンプルページをご覧ください。
このページは、「FlexSlider2」を使って、4枚の写真を掲載した例です。
上記のサンプルページでは、最初に1つの写真が大きく掲載されていて、その下に4つのサムネイル写真が掲載されています。
閲覧者が何も操作しなければ、5秒ごとに自動的に右方向にスライド（アニメーション）して、次々に写真が切り替わっていきます。
閲覧者がサムネイル写真をクリックすれば、対応する拡大写真の位置までスライドします。
このような機能が、短いHTMLを記述するだけで簡単に使えます。
今回は、この「FlexSlider2」を使う方法をご紹介いたします。
■FlexSlider2をダウンロード
「FlexSlider2」は、以下の配布サイトからダウンロードできます。
右側のサイドバーにある「Download 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>
1行目と3行目は、「FlexSlider2」の構成ファイルです。
2行目は、「jQuery」本体を読み込んでいます。
ここではCDNサーバから読み込んでいますが、自身のウェブサイト上に既にあるなら、そちらを読み込んでも構いません。
2.『 body要素内に、ul要素とli要素を使ってリストの形で画像を記述』
<div>
<ul>
<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つご紹介いたします。
それぞれに、サンプルページを用意していますので、ブラウザで表示させてみてください。
■オプションを何も指定しない場合
$(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」を活用すると、複数の画像を簡単にアニメーション効果を伴って拡大表示させることができます。
ぜひ、ご活用ください。
SHARE
ご注意ください
- 本記事の内容は、2016/09/20更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら