这是我的 HTML:
<div id="gallery">
<div id="39" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf170c433d.png" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf170c433d_thumb.png" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="40" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf1711a292.png" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf1711a292_thumb.png" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="41" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf1716b753.png" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf1716b753_thumb.png" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="42" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf171afe23.jpg" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf171afe23_thumb.jpg" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="43" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf171cbbd4.jpg" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf171cbbd4_thumb.jpg" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="44" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf171ecfee.png" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf171ecfee_thumb.png" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="45" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf17232d77.jpg" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf17232d77_thumb.jpg" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="46" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf1724fc13.jpg" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf1724fc13_thumb.jpg" alt="Gallery Image" class="gallery-image">
</a>
</div>
<div id="47" class="box">
<a href="http://assets.avery.localhost/listing/gallery/10_529cf1725ef94.jpg" class="gallery-item">
<img src="http://assets.avery.localhost/listing/gallery/10_529cf1725ef94_thumb.jpg" alt="Gallery Image" class="gallery-image">
</a>
</div>
</div>
然后这是我的 jQuery 用于华丽的弹出事件:
$().ready(function () {
$('#gallery').magnificPopup({
type: 'image',
delegate: '.box a',
gallery: {
enabled: true
}
});
谢谢你的帮助!
嗯,我只是很困惑,因为当我把它放在这个: http ://codepen.io/dimsemenov/pen/JGjHK
它加载得很好...