MyCode

ギャラリー

概要

クリック(もしくはタップ)した画像をモーダルウィンドウで表示するギャラリー。

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');
            }
        }
    });
});

最近の投稿

計数器

シンプルな計数器です。各桁の間の色を変えたかった…

HTMLタグエスケープ

HTML中で「<」などの文字を使うと、タグとして認…

ギャラリー

クリック(もしくはタップ)した画像をモーダルウィン…

検索フォーム

そのまま。様々な検索フォームです。ボタン画像はICO…

楽天市場検索順位チェッカー

楽天市場内での検索結果における指定ショップの順位…

mMenu

JavaScriptを使用せずにCSSのみで作られたレスポンシ…