skuare.net

レスポンシブなサイトが増えている昨今、画像ギャラリーの見せ方に悩む人は多いのではないでしょうか。
least.jsはそんな悩みを一掃してくれるかもしれません。
サムネイルをグリッド配置し、タップ時に同じページ内で拡大画像を表示してくれるため、ユーザーにもストレスがなくなりそうです。

使用方法 least.js is a Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoadからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href=least.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="least.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(function(){
$('#gallery').least();
});
</script>
あとは画像を下記のルールで追加していけば完成です。
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<!-- ここから一個の画像 -->
<li>
<a href="拡大画像"></a>
<amp-img data-original="サムネイル画像" src="white.gif" width="240" height="150" alt="alt" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
サムネイルにのせる見出し
</h2>
</li>
<li>
<p>
サムネイルにのせるテキスト
</p>
</li>
</ul>
</div>
</li>
<!-- ここまで一個の画像あとは繰り返し -->
</section>

jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」サンプル