Web Development

Bootstrap Modal Carousel / モーダルカルーセルプラグイン

Bootstrapのモーダルを簡単に作成し、便利な機能を追加しする事でアクセシビリティ向上が可能です。

主な機能

モーダルウインドの自動生成
簡単な設定のみで、モーダルウインドを自動的にページに追加できます。
前後画像への移動ボタンを簡単に追加可能
プラグインのオプション設定のみで前後画像への移動が出来ます。
キーボード操作簡単に追加可能
プラグインのオプション設定のみで前後画像への移動やモーダルウインドを閉じる操作をキーボードに割り当てできます。

フリーダウンロード

最新版
Ver. 1.0.1
リリース日
2014/10/17

設置作業代行

日程調整
即日〜
作業時間
半日程度
作業費用
¥3,000円
(消費税込み)

設置予定URL

オンラインデモ

使い方

JavaScript

jQueryとBootstrapを読み込んだ後、bootstrapModalCarousel-x.x.x.min.jsを読み込んでください。


<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="bootstrapModalCarousel-x.x.x.min.js"></script>

その後、ページがロードされたらリンクを生成するために、対象のエレメントに対しbsModalCarousel()を実行します。
対象エレメント配下の.img-modalクラスを持った画像をモーダル表示します。


<div id="image-list-1" class="row">
	<div class="col-sm-3">
		<img class="img-modal" src="./image-1.jpg" alt="画像1" />
		<p>画像1</p>
	</div>
	<div class="col-sm-3 text-center">
		<img class="img-modal" src="./image-2.jpg" alt="画像2" />
		<p>画像2</p>
	</div>
	<div class="col-sm-3 text-center">
		<img class="img-modal" src="./image-3.jpg" alt="画像3" />
		<p>画像3</p>
	</div>
	<div class="col-sm-3 text-center">
		<img class="img-modal" src="./image-4.jpg" alt="画像4" />
		<p>画像4</p>
	</div>
</div>

<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
	$('#image-list-1').bsModalCarousel();
});
</script>

解説

#image-list-1の配下にある.img-modalクラスを持った画像をモーダル表示対象とします。

前後画像のカルーセル動作は、#image-list-1をひとつのグループとして、繰り返し表示します。


オプション指定

modalId
デフォルト:'imageModal' | 任意の文字列
モーダルウインドに付与するID名です。
externalCssFile
デフォルト:'./bootstrapModalCarousel-1.0.0.css' | 任意の文字列
モーダルウインドのスタイルを記載した外部CSSファイルパスです。
addMoveButtons
デフォルト:false | true
前後画像表示のカーソル表示の有無です。
keyboardAccess
デフォルト:false | true
キーボード操作の有無です。

オプション指定例


$('#sampleElement').bsModalCarousel({
	'modalId'         : 'sampleModal',
	'externalCssFile' : './bootstrapModalCarousel-1.0.0.css',
	'addMoveButtons'  : true,
	'keyboardAccess'  : true
});

操作方法

1. このページを開くと自動でモーダルウインドの準備が完了します。

2. 画像をクリックすると、モーダルウインドが開き、画像が大きく表示可能です。

3. 前後の画像を表示するには、モーダルウインド左右のカーソルをクリックするか、キーボードの「← (左キー)」「→ (右キー)」「Fキー」「Jキー」で可能です。

4. モーダルウインドを閉じるには、モーダルウインド上の閉じるボタンをクリックするか、キーボードの「ESC (エスケープキー)」で可能です。

キーボード操作

操作 キー
前の画像 「左キー」
「Fキー」
次の画像 「右キー」
「Jキー」
閉じる 「ESCキー」

カスタマイズ / サポート 最新版 ダウンロード