cbfsss

cb-fullscreenslideshow.js (cbfsss)

about

cb-fullscreenslideshow.js は、画像の配列を読み込んで、ブラウザの画面全体（フルスクリーン）に表示させるための jQuery プラグインです。画像が複数ある場合は、アニメーションを伴ったスライドショーで順々に表示していきます。

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

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

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

English here
http://www.jqueryscript.net/slideshow/Fullscreen-Responsive-Background-Slideshow-with-jQuery-cb-fsss-js.html

demo

通常スタイル
http://jsrun.it/maechabin/oFAj

開始、停止機能実装スタイル
http://jsrun.it/maechabin/kNLM

usage

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

こちらのページからダウンロードするか、[git clone]コマンドでローカルにコピーします。

$ git clone [e-mail]:maechabin/cb-fullScreenSlideShow-js.git 任意のディレクトリ名

npm 経由でも入手可能です。

$ npm install --save cbfsss

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

使用するプラグインは dist ディレクト内にあります。jQuery と一緒にページに読み込みます。

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

＊当プラグインは CommonJS に対応しています。require()メソッドで読み込んでも OK です。

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

3. 要素を作る

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

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

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

オプションとして、'img'キーの値に、表示させる画像の配列をセットして、プラグインを実行します。

$(".cb-fsss").cbFullScreenSlideShow({
  img: [{
    src: "./image/aaa.png",
    alt: "画像1",
    link: "http://example.com/"
  },
  {
    src: "./image/bbb.png"
    alt: "画像2"
  },
  {
    src: "./image/ccc.png",
    link: "./image/ccc.png"
  }]
});

※フルスクリーンで表示させるので、画像のサイズは大きめのものが望ましいです。

api

当プラグインでは以下の api を提供します。

• .cbFullScreenSlideShow("stop")メソッド: スライドショー機能を付与した要素に対して実行することで、スライドショーを停止させる機能を提供します。

• .cbFullScreenSlideShow("start")メソッド: スライドショー機能を付与した要素に対して実行することで、スライドショーを開始させる機能を提供します。

options

img {Array} 必須

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

{src: 画像のパス（必須）, alt: 画像の説明（任意）, link: 画像の飛び先URL（任意）}

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%` 。

license

MIT license

Update

v0.3.4

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