はじめに
Leastは、高品位な写真ギャラリーが作成できるJQueryプラグインです。
2014年04月20日 13時06分
Leastは、高品位な写真ギャラリーが作成できるJQueryプラグインです。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp/demo $ wget -q https://github.com/kamilczujowski/least/archive/gh-pages.zip $ unzip -q master.zip $ rm -f master.zip $ mv least-gh-pages least
least.min.cssを指定します。
<link href="least/css/least.min.css" rel="stylesheet">
least.min.jsおよび、jquery.lazyload.min.jsを指定します。
<script src="least/js/least.min.js"></script> <script src="least/js/jquery.lazyload.min.js"></script>
Leastでは、下記のクラスを使用してコンテンツを作成します。
| クラス | 概要 |
|---|---|
| infoLayer | サムネイル表示されたイメージのキャプション定義します。 |
| projectInfo | 元画像が表示された際に表示するキャプションを定義します。 |
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<li>
<a href="img/056-01.jpg"></a>
<img src="img/056-01.jpg" class="thumb" alt="056-01">
<div class="infoLayer">
<ul>
<li><h2>草原</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけた草原の写真です。
</div>
</li>
</ul>
</section>
SQUARE MENUのロードを行うJavaScriptを追加します。
<script>
$(function() {
$('#gallery').least();
});
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>056</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="least/css/least.min.css" rel="stylesheet">
<style>
body { background: #888; margin-top: 10px; }
.thumb { width: 240px; height: 160px; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<li>
<a href="img/056-01.jpg"></a>
<img src="img/056-01.jpg" class="thumb" alt="056-01">
<div class="infoLayer">
<ul>
<li><h2>草原</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけた草原の写真です。
</div>
</li>
<li>
<a href="img/056-02.jpg"></a>
<img src="img/056-02.jpg" class="thumb" alt="056-02">
<div class="infoLayer">
<ul>
<li><h2>レインボーブリッジ</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけたレインボーブリッジの写真です。
</div>
</li>
<li>
<a href="img/056-03.jpg"></a>
<img src="img/056-03.jpg" class="thumb" alt="056-03">
<div class="infoLayer">
<ul>
<li><h2>マンハッタン</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけたマンハッタンの写真です。
</div>
</li>
<li>
<a href="img/056-04.jpg"></a>
<img src="img/056-04.jpg" class="thumb" alt="056-04">
<div class="infoLayer">
<ul>
<li><h2>向日葵</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけた向日葵の写真です。
</div>
</li>
<li>
<a href="img/056-05.jpg"></a>
<img src="img/056-05.jpg" class="thumb" alt="056-05">
<div class="infoLayer">
<ul>
<li><h2>月</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
足成で見つけた月の写真です。
</div>
</li>
<li>
<a href="img/056-06.jpg"></a>
<img src="img/056-06.jpg" class="thumb" alt="056-06">
<div class="infoLayer">
<ul>
<li><h2>夜空</h2></li>
<li><p>写真を見る</p></li>
</ul>
</div><!-- infoLayer -->
<div class="projectInfo">
写真ACで見つけた夜空の写真です。
</div>
</li>
</ul>
</section>
</div><!-- col -->
<div class="col-md-3"></div>
</div><!-- row -->
</div><!-- container -->
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="least/js/least.min.js"></script>
<script src="least/js/jquery.lazyload.min.js"></script>
<script>
$(function() {
$('#gallery').least();
});
</script>
</body>
</html>