Question

我不能让画廊与大型弹出窗口一起工作。当我点击图片时，我收到“图片无法加载”。

以下是列出图片的html文件：

<div class='container'>
    <div class='picture'><img src='images/gallery/a.jpg'/></div>
    <div class='picture'><img src='images/gallery/b.jpg'/></div>
    <div class='picture'><img src='images/gallery/c.jpg'/></div>
    <div class='picture'><img src='images/gallery/d.jpg'/></div>
    <div class='picture'><img src='images/gallery/e.jpg'/></div>
</div>

这里是jquery代码：

$.get( 'html/gallery.html', function( data ) {
        $('#page_content').append(data);

        $('.container').magnificPopup({
        type: 'image',
        delegate: 'div',
        gallery:{
            enabled: true,
            navigateByImgClick: true,
            arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
            tPrev: 'Previous (Left arrow key)',
            tNext: 'Next (Right arrow key)',
            tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
        }
    });

我试图将“委托”值更改为“div”或“img”，但没有结果。（我跟着这个Magnific popup: getting "The image could not be loaded" and image url is undefined）

感谢您的帮助：）

Answer 1

问题解决了...... Magnific popup需要一个href属性才能工作。

解决方案：

<div class='container'>
    <div class='picture' href='images/gallery/a.jpg'><img src='images/gallery/a.jpg'/></div>
    <div class='picture' href='images/gallery/b.jpg'><img src='images/gallery/b.jpg'/></div>
    ....
</div>

Magnific popup：获取“图像无法加载”

1 个答案: