-1

这是我的 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

它加载得很好...

4

1 回答 1

1

我认为您不包括magnific plugin。

$(document).ready(function () {
    $('#gallery').magnificPopup({
        type: 'image',
        delegate: '.box a',
        gallery: {
            enabled: true
        }
    });
});
于 2013-12-03T14:30:42.157 回答