Web Development
Bootstrap Modal Carousel / モーダルカルーセルプラグイン
Bootstrapのモーダルを簡単に作成し、便利な機能を追加しする事でアクセシビリティ向上が可能です。
主な機能
- モーダルウインドの自動生成
- 簡単な設定のみで、モーダルウインドを自動的にページに追加できます。
- 前後画像への移動ボタンを簡単に追加可能
- プラグインのオプション設定のみで前後画像への移動が出来ます。
- キーボード操作簡単に追加可能
- プラグインのオプション設定のみで前後画像への移動やモーダルウインドを閉じる操作をキーボードに割り当てできます。
設置作業代行
- 日程調整
- 即日〜
- 作業時間
- 半日程度
- 作業費用
- ￥3,000円
(消費税込み)
使い方
JavaScript
jQueryとBootstrapを読み込んだ後、bootstrapModalCarousel-x.x.x.min.jsを読み込んでください。
<script type="text/javascript" charset="UTF-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="//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キー」 |