TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
在我看來，取消 photoswipe 并使用lightgallery。
Photoswipe 臃腫，而 lightgallery 做同樣的事，但有更甜美的選擇。
如果您以語義方式輸出中繼器字段圖像網(wǎng)格，那么這將起到作用......
$('.grid').lightGallery({
? selector: '.lightgallery'
});
.grid {
? width: 100%;
? height: 100%;
}
FIGURE {
? margin: 0;
? width: 25%;
? display: block;
? float: left;
? position: relative;
? overflow: hidden;
}
FIGURE A {
? display: block;
? width: 100%;
}
FIGURE A::after {
? content: '';
? display: block;
? padding-top: 100%;
}
FIGURE A IMG {
? height: 100%;
? position: absolute;
? left: 50%;
? top: 50%;
? transform: translate(-50%, -50%);
}
<div class="grid">
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/okTDHas.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/EYTCssm.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/3sAFPmL.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/IqLrd0o.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/6JplNl6.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/SefTwI1.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/qBmDrTU.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/EYTCssm.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/3sAFPmL.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/IqLrd0o.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/6JplNl6.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/SefTwI1.png" alt="" />
? ? </a>
? </figure>
? <figure>
? ? <a class="lightgallery">
? ? ? <img src="https://i.imgur.com/qBmDrTU.png" alt="" />
? ? </a>
? </figure>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>
舉報(bào)