ブラウザの背景に全画面スライドショーを実装するjQueryプラグイン「cb-fullScreenSlideShow.js(cb-fsss.js)」

先日『CSSでフルスクリーン(全画面) + 縦横中央配置レイアウトを作る【3ステップ + おまけ】』という記事を書きましたが、シングルページデザインのWebサイトを作る時、要素をフルスクリーンで表示させるレイアウトを取り入れることも増えてきています。そんな時に、背景に複数の画像(ヒーローイメージ)を使ってスライドショーを実装させることもあるかと思います。今回そんな全画面スライドショーを実装するjQueryプラグインを作ってみたので紹介します。

cb-fsss-demo
cb-fullscreenslideshow.js (cbfsss)

「cb-fullScreenSlideShow.js」概要

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

特徴は以下となります。

  • 要素に対してメッソドを実行させるだけの簡単実装
  • アニメーションを伴ったスライドショー
  • レスポンシブ対応
  • オプションでスライドショーのサイズを全画面ではなく任意の値に変更可能
  • オプションでアニメーションの速度、スライドショーの速度を変更可能
  • オプションで画像にエフェクトをつけることが可能
  • スライドショーを開始/停止させるメソッド付き

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

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

「cb-fullScreenSlideShow.js」デモ

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

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

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

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

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

$ git clone git@github.com:maechabin/cb-fullScreenSlideShow-js.git 任意のディレクトリ名

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

$ npm install --save cbfsss

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

  • dist/cb-fsss.min.js

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名は任意です。

<div class="cb-fsss"></div>

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

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

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

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

上でも触れたように、当プラグインはnpm経由でインストールし、Browserifyなどを使ってビルドすることが可能です。当ブログでは、そうしたnpmで公開されているjQueryプラグインを使う方法についての記事もアップしているので参考にしてみてください。

「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>
HTML

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

$(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');
  });
});
JavaScript

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

「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ファクトリーパターンで書いていたりするので、今後のプラグインのアップデート状況と併せてその辺りもチェックしていただけたらと思います。

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

コメント一覧

  1. 網掛け効果はどうやったらかけられるのでしょうか・・・javascriptの知識がないので、。「.cbFullScreenSlideShow()メソッドの引数にオブジェクト形式でセットします。」の意味を教えて頂けますでしょうか?

    すとう  返信

    • すとうさん

      コメントありがとうございます。

      > 「.cbFullScreenSlideShow()メソッドの引数にオブジェクト形式でセットします。」の意味を教えて頂けますでしょうか?

      オプションの指定は以下のような感じで行います。以下は透明度「0.8」の「黒」を網掛け効果として指定する場合です。

      $('.selector').cbFullScreenSlideShow({
        background: 'rgba(1,1,1,0.8)'
      });

      同様に「50%」の「セピア」のエフェクトをかける場合は以下のように指定します。

      $('.selector').cbFullScreenSlideShow({
        sepia: '50%'
      });

      オプションは同時に複数指定することも可能です。以下はスライドショーの感覚を100msとして、「50%」の「セピア」のエフェクトをかける場合の指定方法です。

      $('.selector').cbFullScreenSlideShow({
        interval: 100,
        sepia: '50%'
      });

      上記との通り、.cbFullScreenSlideShow()メソッドの引数にオプションをオブジェクトで渡しているのがわかるかと思います。

      ぜひお試しください。その他にもご不明点があれば、ご遠慮なくお尋ねください。

      今後ともよろしくお願いいたします。

      Takanori Maeda  返信

  • 必須

コメント