Magnific Popup Gallery 不工作

Question

我正在尝试使用 Magnific Popup Lightbox Gallery 插件创建画廊。我已经检查了 Dmitry Semenov 的文档并完全按照他的说明复制了代码块。这是我的 <head> 部分，其中包含所有文件：

<head>
 <title>Gallery</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="styles/core_styles_gallery2.css">
  <link rel="stylesheet" type="text/css" href="styles/magnific-popup.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="scripts/jquery.magnific-popup.js"></script>
  <script src="scripts/jQuery_gallery.js"></script>
</head>

如您所见，只有 bootstrap 文件和我的 css 工作表、jQuery 库文件，以及 2 个 .css 和 .js 文件开发人员说要包含的宏伟弹出窗口。这是我的 HTML 图库代码块（开发人员在他的示例中使用了 class "hoverZoomLink"）：

<div class="article-content">
    <div class="container-fluid">
        <div class="container">
            <div class="popup-gallery">
                <a href="styles/images/gallery/image.jpg" class="hoverZoomLink"><img src="styles/images/gallery/image.jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(1).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(1).jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(2).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(2).jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(3).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(3).jpg" width="75" height="75"></a>
            </div>  
        </div>
    </div>
</div>

最后，这是应该初始化弹出窗口的 jQuery 代码（位于我包含在 <head> 中的外部 jQuery_gallery.js 文件中）：

$(document).ready(function() {
$('.popup-gallery').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') + '<small>by Marsel Van Oosten</small>';
        }
    }
});});

嗯，没有任何效果。当我单击图像时，它们只是在另一个选项卡中打开。我是编程和 Web 开发的新手，我试图理解这些错误，但我不知道我做错了什么。请帮帮我！

Answer 1

像这样尝试从开发者页面中的示例开始（当然更改 href 和 src）：

<a href="image.jpg" class="image-link">
   <img src="thumbnails.jpg" />
</a> 

// Initialize popup as usual
$('.image-link').magnificPopup({
  type: 'image',
  mainClass: 'mfp-with-zoom', // this class is for CSS animation below

  zoom: {
    enabled: true, // By default it's false, so don't forget to enable it

    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function


    opener: function(openerElement) {
      return openerElement.is('img') ? openerElement : openerElement.find('img');
    }
  }

});

看看这是否有效，如果这不起作用也不是代码错误。

编辑：搜索了一个完整的示例，尝试以下代码：

<a href="http://dummyimage.com/600x400/eee/000.jpg" data-group="1" class="galleryItem test">group 1 image 1</a> – 
<a href="http://dummyimage.com/600x400/000/fff.jpg" data-group="1" class="galleryItem test123">group 1 image 2</a>

<br/><br/>

<a href="http://dummyimage.com/600x200/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 1</a> – 
<a href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 2</a>

在 JS 中：

var groups = {};
$('.galleryItem').each(function() {
  var id = parseInt($(this).attr('data-group'), 10);

  if(!groups[id]) {
    groups[id] = [];
  } 

  groups[id].push( this );
});


$.each(groups, function() {

  $(this).magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: false,
      gallery: { enabled:true }
  })

});

Magnific Popup Gallery 不工作

Magnific Popup Gallery not working

html

jquery

magnific-popup