サイトのイラストギャラリーではLuminous と Macyを併用しているのですがLuminousの代わりにPhotoSwipe Simplifyを使ってみたら案外すんなりとできたので手順をメモしておきます。
使用感としては、PhotoSwipe～の方が拡大機能付き＋スワイプ対応と高機能な一方、Luminousは必要なファイル数が少なく導入が簡単…といった感じです。
今後掲載していく分はPhotoSwipe Simplifyを使ってみると楽しいかも。
デモページ
STEP 1: 必要なファイルの読み込み
ギャラリーを作るにはMacyとPhotoSwipe Simplify が必要です。それぞれのファイルを入手する手順は個別記事にまとめたのでここでは割愛します。
ファイルを揃えたらCSSの読み込みから始めていきます。まずはPhotoSwipeのCSSを<head>内で読み込みます。
<!-- PhotoSwipe CSS -->
<link rel="stylesheet" href="./css/photoswipe.css">
<link rel="stylesheet" href="./css/default-skin/default-skin.css">また、MacyのCSSを用意するのも忘れずに。<li>タグの箇条書き黒丸を消すためのものです。
#macy {
list-style: none;
}
#macy li {
display: block;
}今回はこれだけのために別ファイルを用意するのも面倒だったので、下のようにPhotoSwipeのCSSを読み込んだ後に直接書きました。
<!-- PhotoSwipe CSS -->
<link rel="stylesheet" href="./css/photoswipe.css">
<link rel="stylesheet" href="./css/default-skin/default-skin.css">
<!-- custom CSS -->
<style type="text/css">
/* Macyの見た目を整えるCSS */
#macy {
list-style: none;
}
#macy li {
display: block;
}
</style>続いてJavascriptの読み込みとオプションの設定です。
ここではPhotoSwipe系のファイルを準備してからMacyのファイルを読み込んでいます。
<!-- PhotoSwipe JS -->
<script src="./js/photoswipe.min.js" charset="utf-8"></script>
<script src="./js/photoswipe-ui-default.min.js" charset="utf-8"></script>
<!-- PhotoSwipe Simplify JS -->
<script src="./js/photoswipe-simplify.min.js" charset="utf-8"></script>
<script charset="utf-8">
photoswipeSimplify.init({
history: false,
loop: false,
arrowEl: false,
});
</script>
<!-- Macy JS をIEで有効化するための polyfill -->
<!-- Minified version of `es6-promise-auto` below. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<!-- Macy JS -->
<script src="./js/macy.js"></script>
<script>
var macy = Macy({
container: '#macy',
columns: 5,
margin: {
x: 4,
y: 6,
},
breakAt: {
1200: 5,
992: 4,
768: 3,
544: 2,
375: 1
}
});
</script>STEP 2: 個々の画像のマークアップ
サムネイルの画像タグに、拡大表示させたい画像にリンクを設定したアンカータグを設置します。
キャプションと作者名を表示したい場合はdata-caption属性にキャプション、data-author属性に作者名を入力します。
<a href="./pic/1.jpg" data-caption="サンプル画像１" data-author="Photo by unsplash.com">
<img src="./pic/1.jpg" alt="">
</a>
...なお、上の例ではサムネイル画像は作らずにリンク先の画像をサムネイルとしています。
あとはid属性に「macy」を指定した<ul>タグと<li>タグを、箇条書きを作る要領で設置していきます。
<ul id="macy">
<li><a href="./pic/1.jpg" data-caption="サンプル画像１" data-author="Photo by unsplash.com"><img src="./pic/1.jpg" alt=""></a></li>
<li><a href="./pic/2.jpg" data-caption="サンプル画像２" data-author="Photo by unsplash.com"><img src="./pic/2.jpg" alt=""></a></li>
<li><a href="./pic/3.jpg" data-caption="サンプル画像３" data-author="Photo by unsplash.com"><img src="./pic/3.jpg" alt=""></a></li>
...
</ul>最後に、 [data-pswp] を指定した要素で上記を囲めば完了です。
<div data-pswp>
<ul id="macy">
<li><a href="./pic/1.jpg" data-caption="サンプル画像１" data-author="Photo by unsplash.com"><img src="./pic/1.jpg" alt=""></a></li>
<li><a href="./pic/2.jpg" data-caption="サンプル画像２" data-author="Photo by unsplash.com"><img src="./pic/2.jpg" alt=""></a></li>
<li><a href="./pic/3.jpg" data-caption="サンプル画像３" data-author="Photo by unsplash.com"><img src="./pic/3.jpg" alt=""></a></li>
...
</ul>
</div>STEP3: ロールオーバーでカラーにする
おまけとして、CSSの filter機能を利用し、最初はグレースケールのサムネイル画像を、ロールオーバーでカラーに変化させるギミックを付けます。
（ただしIEでは非対応です）
まず、CSSに通常時とロールオーバー（hover）時でどのくらいグレースケールを適用するかをパーセントで指定します。ここでは、通常時は完全なグレースケール、ロールオーバー時はほんのり低彩度なカラー画像になるようにしました。
また、変化させるのにかかる時間は「transition」で制御します。ここでは0.5秒かけてカラーになる設定です。
これに、「fromGray」という名前を付けました。
.fromGray {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s;
}
.fromGray:hover {
-webkit-filter: grayscale(20%);
filter: grayscale(20%);
}あとはSTEP 2のhtmlで、サムネイル画像のclass属性に「fromGray」を指定すれば完成です。
<div data-pswp>
<ul id="macy">
<li><a href="./pic/1.jpg" data-caption="サンプル画像１" data-author="Photo by unsplash.com"><img src="./pic/1.jpg" class="fromGray" alt=""></a></li>
<li><a href="./pic/2.jpg" data-caption="サンプル画像２" data-author="Photo by unsplash.com"><img src="./pic/2.jpg" class="fromGray" alt=""></a></li>
<li><a href="./pic/3.jpg" data-caption="サンプル画像３" data-author="Photo by unsplash.com"><img src="./pic/3.jpg" class="fromGray" alt=""></a></li>
...
</ul>
</div>