1 回答

TA貢獻1846條經驗 獲得超7個贊
在我看來,取消 photoswipe 并使用lightgallery。
Photoswipe 臃腫,而 lightgallery 做同樣的事,但有更甜美的選擇。
如果您以語義方式輸出中繼器字段圖像網格,那么這將起到作用......
$('.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>
- 1 回答
- 0 關注
- 132 瀏覽
添加回答
舉報