Bootstrapを利用した画像ポップアップ・スライダー「Bootstrap Image Gallery」
当ページのリンクには広告が含まれています。
スポンサーリンク
Bootstrapを利用した画像ポップアップ・スライダーを実装できるプラグイン「Bootstrap Image Gallery」を紹介します。
jQueryプラグイン「Bootstrap Image Gallery」
このプラグインの特徴は、なんといっても！簡単にかっこいいWebサイトが作成できる「Bootstrap」のテンプレートを利用しているところです。Bootstrapで作成している（作成予定の）サイトに画像スライダーを追加したい場合に、特におすすめです！
スポンサーリンク
デモで、このプラグインの特徴を体感してみてください。デモページに並んでいる画像のどれかをクリックしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Bootstrap Image Galleryのデモでーす。">
<title>Bootstrap Image Gallery - jQueryプラグインまとめのカルマ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/bootstrap-image-gallery.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Image Gallery Demo</h1>
<div id="links">
<a href="img/1.png" title="Red" data-gallery>
<img src="img/thumb/1.png" alt="Red">
</a>
<a href="img/2.png" title="Green" data-gallery>
<img src="img/thumb/2.png" alt="Green">
</a>
<a href="img/3.png" title="Blue" data-gallery>
<img src="img/thumb/3.png" alt="Blue">
</a>
<a href="img/4.png" title="Black" data-gallery>
<img src="img/thumb/4.png" alt="Black">
</a>
</div>
</div>
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.js"></script>
</body>
</html>
スポンサーリンク