各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

複数のサムネイル画像から拡大画像をスライド表示させる方法(第2回)

  • publish_advertise
2013/10/22

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は、複数のサムネイル画像に連動して、拡大画像がスライドして表示されるという、おもしろい効果が簡単に出せるスクリプト「FlexSlider2」の使い方をご紹介いたしました。

 

今回は、他の様々な表示効果を出すための、オプションの記述方法をご紹介いたします。

前回の内容とあわせてご参照ください。「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」を活用すると、

複数の画像を簡単にアニメーション効果を伴って拡大表示させることができます。

ぜひ、ご活用ください。


 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.10.17
複数のサムネイル画像から拡大画像をスライド表示させる方法(第1回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る