「cb-fullScreenSlideShow.js」概要

cb-fullscreenslideshow.jsは、画像の配列を読み込んで、ブラウザに全画面（フルスクリーン）でスライドショーを表示させるためのjQueryプラグインです。

• cb-fullscreenslideshow.js (cbfsss)

特徴は以下となります。

以下のjQueryメソッドを提供します。

• .cbFullScreenSlideShow()メソッド: 指定した要素に対して画像のフルスクリーンスライドショーの機能を付与します。

「cb-fullScreenSlideShow.js」デモ

まずは以下のデモをご確認ください。

• 通常スタイル
• 開始、停止機能実装スタイル

「cb-fullScreenSlideShow.js」の実装方法

1. プラグインをダウンロードする

当プラグインはGitHubからダウンロードすることができます。zipファイルとなっているので解凍してお使いください。

• cb-fullScreenSlideShow.jsをダウンロードする

[git clone]コマンドでローカルにコピーしてもよいです。（お使いの環境にgitがインストールされている必要があります。）

npm経由でのダウンロードも可能です。（お使いの環境にNode.jsがインストールされている必要があります。）

使用するファイルは以下となります。（「distフォルダ」内にあります。）

2. プラグイン & 外部ファイル（jQuery）を読み込む

使用するプラグインは「distフォルダ」内にあります。jQueryと一緒にページに読み込みます。

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="cb-fsss.min.js"></script>

当プラグインはCommonJSに対応しています。require()メソッドで読み込んでもOKです。（お使いの環境にNode.jsがインストールされている必要があります。）

var jQuery = require('jquery');
require('cbfsss');

3. スライドショーさせたい要素を用意する

スライドショーの機能を付与させる要素をページ内に作ります。class名は任意です。

4. 画像の配列をオプションに指定して、プラグインを実行する

スライドショーをさせたい画像を用意したら、以下のようにプラグインのオプションとしてセットし、上で作った要素に対して、プラグインを実行します。（フルスクリーンで表示させるので、画像のサイズは大きめのものが望ましいです。）

$('.cb-fsss').cbFullScreenSlideShow({
  img: [
    {src: './image/aaa.png'},
    {src: './image/bbb.png'},
    {src: './image/ccc.png'}
  ]
});

実装はこれだけです。あとはブラウザで実際にスライドショーが実装できているか確認してください。

「cb-fullScreenSlideShow.js」のAPI紹介

cb-fullScreenSlideShow.jsには、スライドショーを停止、開始させる機能が備わっています。以下のメソッドをスライドショーを実装した要素に対して実行することによって、スライドショーの停止、開始を行います。

.cbFullScreenSlideShow(“start”)メソッド

スライドショー機能を付与した要素に対して実行することで、スライドショーを開始させる機能を提供します。

.cbFullScreenSlideShow(“stop”)メソッド

スライドショー機能を付与した要素に対して実行することで、スライドショーを停止させる機能を提供します。

API実装例

スライドショーを実装した要素の中に、それぞれスライドショーを開始、停止させるための要素を作ります。

<div class="image">
  <button class="start">start</button>
  <button class="stop">stop</button>
</div>

上で作った要素をクリックした時に、スライドショーを開始、停止させるためのメソッドを実行させるようにします。

$(function () {
  $('.image').cbFullScreenSlideShow({
    img: [{src: 'aaa.jpg'}, {src: 'bbb.jpg'}, {src: 'ccc.jpg'}]
  });
  // スライドショーを再開させる
  $('.start').on('click', function () {
    $('.image').cbFullScreenSlideShow('start');
  });
  // スライドショーを停止させる
  $('.stop').on('click', function () {
    $('.image').cbFullScreenSlideShow('stop');
  });
});

以下はスライドショーの開始、停止機能を実装したスライドショーのサンプルとなります。

• API実装例サンプル

「cb-fullScreenSlideShow.js」のオプション紹介

「cb-fullScreenSlideShow.js」のオプションは以下の通りです。.cbFullScreenSlideShow()メソッドの引数にオブジェクト形式でセットします。

img {Array} 必須

スライドショーさせたい画像の情報（オブジェクト）を配列で指定します。デフォルト値は[]。画像の情報は以下の形式で指定します。

[{src: 画像のパス（必須}, {src: 画像のパス}]

width {String}

スライドショー機能を付与する要素の幅を指定します。cssでのwidthプロパティに指定できる値で指定します。デフォルト値は‘100%’。

height {String}

スライドショー機能を付与する要素の高さを指定します。cssでのheightプロパティに指定できる値で指定します。デフォルト値は‘100vh’。

zindex {Number}

スライドショー機能を付与する要素の重なり順を指定します。値が大きいほど上になります。CSSのz-indexプロパティに指定できる値で指定します。デフォルト値は999。

background {String}

スライドショー機能を付与する要素の背景色と透明度を指定します。スライドショーに網掛け効果を適用させることができます。CSSのbackground-colorプロパティに指定できるrgba値で指定します。デフォルト値は‘rgba(1,1,1,0)’。

duration {Number}

スライドショー機能の画像の切り替わるアニメーションの速さを指定します。数値（単位はミリ秒)で指定します。デフォルト値は1000。

interval {Number}

スライドショー機能の1枚の画像の表示する時間を指定します。数値（単位はミリ秒)で指定します。デフォルト値は5000。

blur {String}

スライドショーで表示する画像に「ぼかし」のエフェクトをかけます。cssのfilterプロパティのblur関数の引数に指定できる値（0px〜10px)で指定します。デフォルト値は‘0px’。

grayscale {String}

スライドショーで表示する画像に「モノクロ」のエフェクトをかけます。cssのfilterプロパティのgrayscale関数の引数に指定できる値（0%〜100%)で指定します。デフォルト値は‘0%’。

sepia {String}

スライドショーで表示する画像に「セピア」のエフェクトをかけます。cssのfilterプロパティのsepia関数の引数に指定できる値（0%〜100%)で指定します。デフォルト値は‘0%’。

アップデート情報

v0.3.4 [2016-02-09]

オプションのwidthのデフィルト値を100vwから100%に変更

まとめ

今回のプラグインは、シングルページデザインで使うことを想定して作りました。実装もできる限り簡単になるようにしていますので、ダウンロードして色々な用途にお使いいただければと思います。自分としては、flickrなどの画像サービスのAPIを利用して検索した画像をスライドショーさせるようなものを作りたいと思っています。なので、プラグインの方もまだまだ改良していく予定です。

GitHubで当プラグインのソースコードを公開しています。すべてES2015（ES6）で書いていたり、jQuery UI Widgetを使ったWidgetファクトリーパターンで書いていたりするので、今後のプラグインのアップデート状況と併せてその辺りもチェックしていただけたらと思います。

• maechabin/cb-fullScreenSlideShow-js – GitHub

もちろん、実装の甘い部分だったり、機能的に不十分だったり、まだまだ改善の余地はたくさんあると思うので、何かありましたらお知らせいただけると幸いです。