Question

我在互联网上搜索“弹出图片”，我找到了一个包含此源代码的网页

<div class="popup-gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner">
    <img src="popup/8558295633_f34a55c1c6_s.jpg" height="75" width="75">
</a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance">
    <img src="popup/8558295631_0f56c1284f_s.jpg" height="75" width="75">
</a>
</div>


<script type="text/javascript">
      $(document).ready(function() {
        $('.albumsgallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          tLoading: 'Loading image #%curr%...',
          mainClass: 'mfp-img-mobile',
          gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          },
          image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
              return item.el.attr('title');
            }
          }
        });
      });
</script>

我想要的是修改jquery代码以适合我的HTML代码

  <div class="albumsgallery">
<ul>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album1</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album2</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album3</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album4</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album5</div></a></li>
</ul>
</div>

请问您能解释我该怎么做。

Answer 1

您看到的网站看起来像是使用了一个插件：magnificPopup。

所以去那里并将你的 HTML改编成插件所需的标记......而不是相反;）

来自MagnificPopup's documentation：

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>

使用jquery访问html元素名称

1 个答案: