宏伟的弹出窗口：出现“无法加载图像”

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>'
        }
    });

我试图将“ delegate”值更改为“ div”或“ img”，但没有结果。（我遵循了这个宏伟的弹出窗口：获取“无法加载图像”并且图像url未定义）

感谢帮助 ：）

Answer 1

问题很好解决...宏弹出式窗口需要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>