{"id":25759605,"url":"https://github.com/maechabin/cb-fullscreenslideshow-js","last_synced_at":"2026-04-25T08:36:07.046Z","repository":{"id":57195176,"uuid":"44854721","full_name":"maechabin/cb-fullScreenSlideShow-js","owner":"maechabin","description":"a jQuery plugin to add the feature of the Fullscreen Responsive Background Slideshow (cb-fsss)","archived":false,"fork":false,"pushed_at":"2018-10-16T17:09:45.000Z","size":83,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-09T03:44:40.185Z","etag":null,"topics":["jquery","jquery-plugin","jquery-ui","slideshows"],"latest_commit_sha":null,"homepage":"http://mae.chab.in/archives/2770","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maechabin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-24T06:14:22.000Z","updated_at":"2020-09-19T11:18:35.000Z","dependencies_parsed_at":"2022-09-16T05:14:19.585Z","dependency_job_id":null,"html_url":"https://github.com/maechabin/cb-fullScreenSlideShow-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maechabin/cb-fullScreenSlideShow-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maechabin%2Fcb-fullScreenSlideShow-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maechabin%2Fcb-fullScreenSlideShow-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maechabin%2Fcb-fullScreenSlideShow-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maechabin%2Fcb-fullScreenSlideShow-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maechabin","download_url":"https://codeload.github.com/maechabin/cb-fullScreenSlideShow-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maechabin%2Fcb-fullScreenSlideShow-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262470982,"owners_count":23316595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","jquery-plugin","jquery-ui","slideshows"],"created_at":"2025-02-26T17:36:50.480Z","updated_at":"2026-04-25T08:36:06.998Z","avatar_url":"https://github.com/maechabin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cb-fullscreenslideshow.js (cbfsss)\n\n## about\n\ncb-fullscreenslideshow.js は、画像の配列を読み込んで、ブラウザの画面全体（フルスクリーン）に表示させるための jQuery プラグインです。画像が複数ある場合は、アニメーションを伴ったスライドショーで順々に表示していきます。\n\n- 要素に対してメッソドを実行させるだけの簡単実装\n- アニメーションを伴ったスライドショー\n- レスポンシブ対応\n- オプションでスライドショーのサイズを全画面ではなく任意の値に変更可能\n- オプションでアニメーションの速度、スライドショーの速度を変更可能\n- オプションで画像にエフェクトをつけることが可能\n- スライドショーを開始/停止させるメソッド付き\n\n以下の jQuery メソッドを提供します。\n\n- **.cbFullScreenSlideShow()メソッド**: 指定した要素に対して画像のフルスクリーンスライドショーの機能を付与します。\n\nEnglish here\u003cbr\u003e\nhttp://www.jqueryscript.net/slideshow/Fullscreen-Responsive-Background-Slideshow-with-jQuery-cb-fsss-js.html\n\n## demo\n\n通常スタイル\u003cbr\u003e\nhttp://jsrun.it/maechabin/oFAj\n\n開始、停止機能実装スタイル\u003cbr\u003e\nhttp://jsrun.it/maechabin/kNLM\n\n## usage\n\n### 1. プラグインをダウンロードする\n\nこちらのページから[ダウンロード](https://github.com/maechabin/cb-fullScreenSlideShow-js/archive/master.zip)するか、`[git clone]`コマンドでローカルにコピーします。\n\n```\n$ git clone git@github.com:maechabin/cb-fullScreenSlideShow-js.git 任意のディレクトリ名\n```\n\nnpm 経由でも入手可能です。\n\n```\n$ npm install --save cbfsss\n```\n\n### 2. プラグイン \u0026 外部ファイルを読み込む\n\n使用するプラグインは dist ディレクト内にあります。jQuery と一緒にページに読み込みます。\n\n```html\n\u003cscript src=\"//code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.cb-fsss.min.js\"\u003e\u003c/script\u003e\n```\n\n＊当プラグインは CommonJS に対応しています。require()メソッドで読み込んでも OK です。\n\n```\nvar jQuery = require('jquery');\nrequire('cbfsss');\n```\n\n### 3. 要素を作る\n\nスライドショーの機能を付与させる要素をページ内に作ります。\n\n```html\n\u003cdiv class=\"cb-fsss\"\u003e\u003c/div\u003e\n```\n\n### 4. 画像の配列をオプションに指定してプラグインを実行する\n\nオプションとして、'img'キーの値に、表示させる画像の配列をセットして、プラグインを実行します。\n\n```javascript\n$(\".cb-fsss\").cbFullScreenSlideShow({\n  img: [{\n    src: \"./image/aaa.png\",\n    alt: \"画像1\",\n    link: \"http://example.com/\"\n  },\n  {\n    src: \"./image/bbb.png\"\n    alt: \"画像2\"\n  },\n  {\n    src: \"./image/ccc.png\",\n    link: \"./image/ccc.png\"\n  }]\n});\n```\n\n※フルスクリーンで表示させるので、画像のサイズは大きめのものが望ましいです。\n\n## api\n\n当プラグインでは以下の api を提供します。\n\n- **.cbFullScreenSlideShow(\"stop\")メソッド**: スライドショー機能を付与した要素に対して実行することで、スライドショーを停止させる機能を提供します。\n\n- **.cbFullScreenSlideShow(\"start\")メソッド**: スライドショー機能を付与した要素に対して実行することで、スライドショーを開始させる機能を提供します。\n\n## options\n\n\u003cdl\u003e\n\u003cdt\u003eimg {Array} 必須\u003c/dt\u003e\n\u003cdd\u003eスライドショーさせたい画像の情報（オブジェクト）を配列で指定します。デフォルト値は`[]`。画像の情報は以下の形式で指定します。\n\n```\n{src: 画像のパス（必須）, alt: 画像の説明（任意）, link: 画像の飛び先URL（任意）}\n```\n\n\u003c/dd\u003e\n\n\u003cdt\u003ewidth {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能を付与する要素の幅を指定します。cssでのwidthプロパティに指定できる値で指定します。デフォルト値は `100％` 。\u003c/dd\u003e\n\n\u003cdt\u003eheight {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能を付与する要素の高さを指定します。cssでのheightプロパティに指定できる値で指定します。デフォルト値は `100vh` 。\u003c/dd\u003e\n\n\u003cdt\u003ezindex {Number}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能を付与する要素の重なり順を指定します。値が大きいほど上になります。CSSのz-indexプロパティに指定できる値で指定します。デフォルト値は `999` 。\u003c/dd\u003e\n\n\u003cdt\u003ebackground {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能を付与する要素の背景色と透明度を指定します。スライドショーに網掛け効果を適用させることができます。CSSのbackground-colorプロパティに指定できるrgba値で指定します。デフォルト値は `rgba(1,1,1,0)` 。\u003c/dd\u003e\n\n\u003cdt\u003eduration {Number}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能の画像の切り替わるアニメーションの速さを指定します。数値（単位はミリ秒)で指定します。デフォルト値は `1000` 。\u003c/dd\u003e\n\n\u003cdt\u003einterval {Number}\u003c/dt\u003e\n\u003cdd\u003eスライドショー機能の1枚の画像の表示する時間を指定します。数値（単位はミリ秒)で指定します。デフォルト値は `5000` 。\u003c/dd\u003e\n\n\u003cdt\u003eblur {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショーで表示する画像に「ぼかし」のエフェクトをかけます。cssのfilterプロパティのblur関数の引数に指定できる値（0px〜10px)で指定します。デフォルト値は `0px` 。\u003c/dd\u003e\n\n\u003cdt\u003egrayscale {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショーで表示する画像に「モノクロ」のエフェクトをかけます。cssのfilterプロパティのgrayscale関数の引数に指定できる値（0%〜100%)で指定します。デフォルト値は `0%` 。\u003c/dd\u003e\n\n\u003cdt\u003esepia {String}\u003c/dt\u003e\n\u003cdd\u003eスライドショーで表示する画像に「セピア」のエフェクトをかけます。cssのfilterプロパティのsepia関数の引数に指定できる値（0%〜100%)で指定します。デフォルト値は `0%` 。\u003c/dd\u003e\n\n\u003c/dl\u003e\n\n## license\n\nMIT license\n\n## Update\n\n### v0.3.4\n\nオプションの width のデフィルト値を 100vw から 100%に変更\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaechabin%2Fcb-fullscreenslideshow-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaechabin%2Fcb-fullscreenslideshow-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaechabin%2Fcb-fullscreenslideshow-js/lists"}