ギャラリー
概要
クリック(もしくはタップ)した画像をモーダルウィンドウで表示するギャラリー。
Magnifig Popupというjqueryプラグインを使用しました。
サムネイル画像を正方形にトリミングして並べるというのは中々調べても上手くいかなかったので参考になれば幸いです。
コード
HTML
<ul class="gallery">
<li><a class="image-link" href="/mycode/img/gallery/001.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb001.jpg" alt="画像001"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/002.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb002.jpg" alt="画像002"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/003.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb003.jpg" alt="画像003"></a></li>
</ul><ul class="gallery">
<li><a class="image-link" href="/mycode/img/gallery/004.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb004.jpg" alt="画像004"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/005.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb005.jpg" alt="画像005"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/006.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb006.jpg" alt="画像006"></a></li>
</ul><ul class="gallery">
<li><a class="image-link" href="/mycode/img/gallery/007.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb007.jpg" alt="画像007"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/008.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb008.jpg" alt="画像008"></a></li>
<li><a class="image-link" href="/mycode/img/gallery/009.jpg">
<img class="thumb" src="/mycode/img/gallery/thumb009.jpg" alt="画像009"></a></li>
</ul>
CSS（全ての内容）
.gallery li{
position: relative;
border: solid #f7fff7;
border-width: 1px 2px;
display: table-cell;
}
.gallery li::before{
content: "";
display: block;
padding-bottom: 100%;
}
.thumb{
width: 100%;
height: 100%;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
object-fit: cover;
}
JavaScript
$(document).ready(function() {
$('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300, // don't foget to change the duration also in CSS
opener: function(element) {
return element.find('img');
}
}
});
});