jQuery
【jQuery】CSSとjQueryを使用したギャラリーFlexbox Gallery
April 3, 2017

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" />
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>
$(document).ready(function(){ $('#container').flexgal(); });