cbfsss
Fullscreen Responsive Background Slideshow with jQuery
Last updated 4 months ago by maechabin .
MIT license · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cbfsss 
SYNC missed versions from official npm registry.

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%に変更

Current Tags

  • 0.3.9                                ...           latest (4 months ago)

7 Versions

  • 0.3.9                                ...           4 months ago
  • 0.3.4                                ...           3 years ago
  • 0.3.3                                ...           4 years ago
  • 0.3.2                                ...           4 years ago
  • 0.3.1                                ...           4 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (6)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |