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>

正如您所看到的那样，只有引导程序文件和我的css表，jQuery库文件，以及开发人员说要包含的大胆弹出窗口的2 .css和.js文件。这是我的HTML库代码块（类＆＃34; hoverZoomLink＆＃34;在他的示例中由dev使用）：

<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 ofcourse）：

<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无法正常工作

1 个答案: