https://github.com/maechabin/cb-fullscreenslideshow-js
a jQuery plugin to add the feature of the Fullscreen Responsive Background Slideshow (cb-fsss)
https://github.com/maechabin/cb-fullscreenslideshow-js
jquery jquery-plugin jquery-ui slideshows
Last synced: 3 months ago
JSON representation
a jQuery plugin to add the feature of the Fullscreen Responsive Background Slideshow (cb-fsss)
- Host: GitHub
- URL: https://github.com/maechabin/cb-fullscreenslideshow-js
- Owner: maechabin
- Created: 2015-10-24T06:14:22.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-16T17:09:45.000Z (over 6 years ago)
- Last Synced: 2024-11-22T23:46:23.944Z (6 months ago)
- Topics: jquery, jquery-plugin, jquery-ui, slideshows
- Language: JavaScript
- Homepage: http://mae.chab.in/archives/2770
- Size: 81.1 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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. プラグインをダウンロードする
こちらのページから[ダウンロード](https://github.com/maechabin/cb-fullScreenSlideShow-js/archive/master.zip)するか、`[git clone]`コマンドでローカルにコピーします。
```
$ git clone [email protected]:maechabin/cb-fullScreenSlideShow-js.git 任意のディレクトリ名
```
npm 経由でも入手可能です。
```
$ npm install --save cbfsss
```
### 2. プラグイン & 外部ファイルを読み込む
使用するプラグインは dist ディレクト内にあります。jQuery と一緒にページに読み込みます。
```html
```
＊当プラグインは CommonJS に対応しています。require()メソッドで読み込んでも OK です。
```
var jQuery = require('jquery');
require('cbfsss');
```
### 3. 要素を作る
スライドショーの機能を付与させる要素をページ内に作ります。
```html
```
### 4. 画像の配列をオプションに指定してプラグインを実行する
オプションとして、'img'キーの値に、表示させる画像の配列をセットして、プラグインを実行します。
```javascript
$(".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%に変更