jQuery lightSlider の使い方や設定

CATEGORY: jQuery | TAG: Youtube, フォトギャラリー, プラグイン, レスポンシブ

2014年12月31日

jQuery スライダープラグイン lightSlider の基本的な使い方や設定に関する個人的なメモ。この時点での lightSlider のバージョンは「Version 1.1.1」。

ライセンス：MIT License
レスポンシブ対応
ギャラリーモード（スライドショー）
サムネイル表示
Slide, Fade アニメーション
youtube, vimeo , google map 対応

jQuery lightSlider のダウンロード

jQuery lightSlider のページの上部メニュー右側にある「Download」をクリックしてダウンロード。時々紛らわしい広告が表示されている場合があるので注意。

ダウンロードしたファイルを解凍すると以下のようなファイルやフォルダがある。

「lightSlider」というフォルダを適当なところに配置。「lightSlider」フォルダの中には「css」「fonts」「img」「js」というフォルダがあり、必要なファイル等が入っている。

jQuery lightSlider の読み込み

以下のように head 内等で「lightSlider.css」「jquery」「jquery.lightSlider.min.js」を読み込む。jQuery が必要なので読み込むのを忘れないように。

パスは環境に合わせて変更。以下は「lightSlider」フォルダをトップレベルに配置した場合の例。

<link type="text/css" rel="stylesheet" href="lightSlider/css/lightSlider.css" /> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="lightSlider/js/jquery.lightSlider.min.js"></script>

jQuery lightSlider の HTML の記述

ul と li 要素を使ってマークアップ。
ul 要素には任意の id 属性を付けておく（何でもよい）。イニシャライズの際にその id を指定。
サムネイル画像のパスの指定は「data-thumb」属性を使い、li 要素内に設定。

以下はサムネイル画像は「images/thumbs」に、lightSlider を使って表示する画像は「images」保存してある場合の例。

<ul id="lightSlider">
      </li>
      <li data-thumb="images/thumbs/1.jpg">     
        <img src="images/1.jpg"/>
      </li>
        <li data-thumb="images/thumbs/2.jpg">
        <img src="images/2.jpg"/>
      </li>
      ・・・
</ul>

jQuery lightSlider のイニシャライズ（呼び出し）

ul 要素の id 属性を指定してイニシャライズ。

以下で指定しているオプション

item:スライダーに表示する画像の数
auto:スライドショーを自動で開始するかどうか
speed: スライド（アニメーション）の時間。ミリ秒
pause:停止している時間。ミリ秒
gallery:ギャラリー表示るかどうか。
thumbItem:ギャラリー表示の際に表示するサムネイルの数
loop: ループするかどうか
adaptiveHeight:高さを可変にするかどうか（レスポンシブでギャラリー表示する場合は、true にすると良いみたい。サムネイルとの間のスペースが調整されるみたい。。。）

<script>
jQuery(function($){  
    $("#lightSlider").lightSlider({
        item:1,
        auto: true,
        speed: 500,
        pause: 4000,
        gallery:true,
        thumbItem:5,
        loop: true,
        adaptiveHeight:true 
    }); 
}); 
</script>

サンプル１

Easing（イージング）の設定

CSS の Easing の指定が可能。

初期化の際に「cssEasing」のオプションで cubic-bezier 関数の値を使って指定できる。またその際には、「useCSS: true」を同時に指定する。

以下のページから cubic-bezier の値を取得可能。

http://easings.net/ja#

<script>
jQuery(function($){  
    $("#lightSlider").lightSlider({
        item:1,
        auto: true,
        speed: 500,
        pause: 4000,
        gallery:true,
        thumbItem:5,
        loop: true,
        adaptiveHeight:true ,
        useCSS: true,
        cssEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
    }); 
}); 
</script>

Vertical モード

lightSlider で垂直方向へスライドさせるモード。

オプションの「vertical」を「true」に設定し「verticalHeight」で高さを指定。

「gallery:true」でギャラリー表示させると、サムネイル画像は下ではなく、右側に表示される。

<script>
jQuery(function($){  
    $("#lightSlider").lightSlider({
        item:1,
        vertical: true,
        verticalHeight:593,
        auto: true,
        speed: 500,
        pause: 4000,
        loop: true,
        gallery:true,
        adaptiveHeight:true
    }); 
});
</script>

サンプル２

lightSlider を使って Youtube を表示

Youtube 等の動画の表示方法が見つからなかったので、適当に試した方法。

HTML

<ul id="lightSlider">
    <li data-thumb="http://i1.ytimg.com/vi/dH3GSrCmzC8/hqdefault.jpg">
        <div class="youtube">
            <iframe width="960" height="540" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div><!--end of .youtube-->
    </li>
    <li data-thumb="http://i1.ytimg.com/vi/qfGHxzKeHvM/hqdefault.jpg">
        <div class="youtube">
            <iframe width="960" height="540" src="//www.youtube.com/embed/qfGHxzKeHvM" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div><!--end of .youtube-->
    </li>
    <li data-thumb="http://i1.ytimg.com/vi/csGnvbJCQKU/hqdefault.jpg">
        <div class="youtube">
            <iframe width="960" height="540" src="//www.youtube.com/embed/csGnvbJCQKU" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div><!--end of .youtube-->
    </li>
</ul>

CSS

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}
     
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

イニシャライズ

<script>
jQuery(function($){  
    $("#lightSlider").lightSlider({
        item:1,
        speed: 500,
        pause: 4000,
        loop: true,
        adaptiveHeight:true,
        gallery: true
    }); 
});
</script>

サンプル３

lightSlider のオプション

JQuery lightSlider のページに掲載されているオプションとメソッド。

オプション

<script type="text/javascript">
$(document).ready(function() {
    $("#lightSlider").lightSlider({
    item: 3,
    autoWidth: false,
    slideMove: 1, // slidemove will be 1 if loop is true
    slideMargin: 10,
     
    addClass: '',
    mode: "slide",
    useCSS: true,
    cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
    easing: 'linear', //'for jquery animation',////
     
    speed: 400, //ms'
    auto: false,
    loop: false,
    slideEndAnimatoin: true,
    pause: 2000,
     
    keyPress: false,
    controls: true,
    prevHtml: '',
    nextHtml: '',
     
    rtl:false,
    adaptiveHeight:false,
     
    vertical:false,
    verticalHeight:500,
    vThumbWidth:100,
     
    thumbItem:10,
    pager: true,
    gallery: false,
    galleryMargin: 5,
    thumbMargin: 5,
    currentPagerPosition: 'middle',
     
    enableTouch:true,
    enableDrag:true,
    freeMove:true,
    swipeThreshold: 40,
     
    responsive : [],
     
    onBeforeStart: function (el) {},
    onSliderLoad: function (el) {},
    onBeforeSlide: function (el) {},
    onAfterSlide: function (el) {},
    onBeforeNextSlide: function (el) {},
    onBeforePrevSlide: function (el) {}
    });
});
</script>

メソッド

<script type="text/javascript">
$(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3);
    slider.goToPrevSlide();
    slider.goToNextSlide();
    slider.getCurrentSlideCount();
    slider.refresh();
    slider.play();
    slider.pause();
});
</script>

その他の情報

JQuery lightSlider の Github ページ
https://github.com/sachinchoolur/lightslider

以下の jsfiddle ページで設定を変更したりして試すことができる。

http://jsfiddle.net/sachin377/2patspw2/

Web Design Leaves