Flexbox GalleryはCSSとjQueryを使用してランダムサイズの画像を持つギャラリーを作成するjQueryプラグイン。

必要なファイルを追加

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Flexbox Gallery Javascript file -->
<script src="/js/lib/flexbox-gallery.js"></script>
<!-- Flexbox Gallery CSS file -->
<link href="/js/lib/flexbox-gallery.css" rel="stylesheet" />

HTML markup

div id="container"要素を作成し、divまたはfigure要素に画像をセット

<div id="container">
  <figure><img src="/images/pic1.jpg" /></figure>
  <figure><img src="/images/pic2.jpg" /></figure>
  <figure><img src="/images/pic3.jpg" /></figure>
  <figure><img src="/images/pic4.jpg" /></figure>
</div>

Flexbox Galleryを呼び出す

$(document).ready(function(){
  $('#container').flexgal();
});

• Tag
• Flexbox
• Gallery
• jQuery