Skip to content
a jQuery plugin to add the feature of the Fullscreen Responsive Background Slideshow (cb-fsss)
Branch: master
Clone or download
Latest commit 6a99ebd Oct 16, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo コード修正 Oct 16, 2018
dist コード修正 Oct 16, 2018
src コード修正 Oct 16, 2018
test commit cb-fsss.min.js Oct 30, 2015
.gitignore prototype Oct 24, 2015
.prettierrc prettier導入 Oct 16, 2018
README.md readme修正 Oct 16, 2018
package-lock.json pakageをアップデート Oct 16, 2018
package.json pakageをアップデート Oct 16, 2018

README.md

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 git@github.com: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%に変更

You can’t perform that action at this time.