今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. テーブルをレスポンシブ対応に「rt Responsive Tables」
  3. 背景画像や色をランダムに変更「RandomBackground」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

Bootstrapを利用した画像ポップアップ・スライダー「Bootstrap Image Gallery」

スポンサーリンク

Bootstrapを利用した画像ポップアップ・スライダーを実装できるプラグイン「Bootstrap Image Gallery」を紹介します。

jQueryプラグイン「Bootstrap Image Gallery」

このプラグインの特徴は、なんといっても!簡単にかっこいいWebサイトが作成できる「Bootstrap」のテンプレートを利用しているところです。Bootstrapで作成している(作成予定の)サイトに画像スライダーを追加したい場合に、特におすすめです!

スポンサーリンク

デモで、このプラグインの特徴を体感してみてください。デモページに並んでいる画像のどれかをクリックしてみてください。

「Bootstrap Image Gallery」のデモ

デモのソース(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">&times;</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>
スポンサーリンク

関連記事(一部広告含む)