ホーム>番外編>FlexSlider2 の導入
FlexSlider2 の導入

画像をスライドショーとして表示する jQuery はたくさん紹介されています

「軽量でオプションが豊富」と云われるプラグインのうち、「ふるさと富来」でも利用している jQuery 「FlexSlider2」の導入方法についてメモとして残します。

プラグインのダウンロード

「FlexSlider2」のホームページからプラグインをダウンロードします。

必要なファイルは以下の2ファイルと1フォルダーで、任意の箇所に設置します。

  1. flexslider.css
  2. jquery.flexslider-min.js
  3. fonts (フォルダー)
HTML の記述

■ <head>〜</head>間に記述します。

1) <link rel="stylesheet" href="z_flexslider/flexsliderV.css" type="text/css" media="screen" />

2) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

3) <script src="z_flexslider/jquery.flexslider-min.js" ></script>

4) <script type="text/javascript" charset="utf-8">
  $(window).load(function(){
   $('.flexslider').flexslider({
   pausePlay: true,
   slideshowSpeed: 4000,
   pauseOnHover: true,
   animation: "fade",
   start: function(slider){
   $('body').removeClass('loadings');}

    });
   });
    </script>

■ オプションの設定は[,]で区切って追加しますが、 最後のオプションには[,]を付けません。

pausePlay: true*停止ボタンの有効/無効(false)
slideshowSpeed: 4000*スライドスピードの設定(Default: 7000)
pauseOnHover: true*スライドショーを設定した場合、画像上にマウスオンした時に停止(Default: false)
animation: "fade"*アニメーションタイプの指定。
"fade"または"slide"で指定。
start: function(slider)*最初のスライドがロードされた瞬間に発生するコールバック。

■ <body>〜</boday>間には画像を記述。

<center>
   <div class="flexslider">
   <ul class="slides">
   <li><img src="画像の[URL]" alt="" /><p class="caption">説明文</p></li>
   </ul>
   </div>
</center>

画像は、<li><img src="[url]"</li> で追加して記述していきます。

以上の設定だけで、横長の画像スライドショーは問題なく動いてくれます。
縦長の画像スライドショーは CSS の一部を書き換える必要があります。

CSS の書き換え

スクロールしなくも縦長画像のスライドショーを表示したいので、上下のエリアを少しでも確保する必要があります。 そこで、CSS を修正します。

■ flexslider.css をコピーし、同じフォルダーに別の名前で保存して一部を修正していきます。

※ 最上部あたりにある箇所の書替え・・・。

.caption{
  color : #000000 ;
  font-size : small ;
  font-weight : bold ;
  text-align : center ;
  margin : 5px auto ;  /* 追加 */
 }

h2{
  color : #eee8aa ;
  text-align : center ;
  margin : 0 auto ;  /* 追加 */
  padding : 0px 0px ;
  width : 100% ;
  min-width : 400px ;
  height : 30px ;  /* 追加 */
}

.flexslider{
  margin: 0px auto;
  max-width: 440px; /* (Default: 720px) */
  max-height: 660px; /* (Default: 510px) */
}

※ /* FlexSlider Default Theme */ 箇所の書替え

.flexslider {
  margin: 0 0 30px;   /* (Default: 60px) */ 
  background: #fff; border: 4px solid #fff; position: relative;
  -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;     -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }

Copyright © 2009 ふるさと富来 All Rights Reserved
inserted by FC2 system