jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」
least.jsはそんな悩みを一掃してくれるかもしれません。
サムネイルをグリッド配置し、タップ時に同じページ内で拡大画像を表示してくれるため、ユーザーにもストレスがなくなりそうです。
sponsors
使用方法
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」サンプル
sponsors
記事作成:2013年6月12日 10:00
記事URL:http://www.skuare.net/2013/06/jqueryleastjs.html
TOP > javascript > 画像関連 > jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」
前の記事:年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」
次の記事:「個性派 jQuery で魅せる WordPress デザインアレンジBOOK」を執筆しました
あなたにはこちもお勧め!
jQuery プラグインまとめ!