1

我正在尝试在Justified Gallery中使用Magnific Popup，但遇到了麻烦。它似乎没有拾取我希望它处理的锚标记，并且单击图像最终会直接进入 href 位置。

我知道它在页面上工作，因为如果我手写一些香草标记，它工作正常：

<a class="gallery-image" href="http://localpath/imagelarge.jpg">
    <img src="http://localpath/imagethumb.jpg">
</a>

但是，由于我使用的是 Justified Gallery，生成的标记并不完全相同：

<div class="justifiedGallery" id="gallery">
    <div class="jg-row" style="height: 128px; margin-bottom: 1px;">
        <div class="jg-image" style="left: 0px;">
             <a class="gallery-image" href="http://localpath/imagelarge.jpg">
                 <img style="width: 192px; height: 128px; display: inline; opacity: 1;" alt="undefined" src="http://localpath/imagethumb.jpg">
             </a>
        </div>
    </div>
</div>

这是我用于工作示例和无效示例的 JavaScript：

<script type="text/javascript">
    $(document).ready(function () {
        $("#gallery").justifiedGallery({
            'usedSuffix': 'lt240',
            'justifyLastRow': false,
            'rowHeight': 120,
            'fixedHeight': false,
            'captions': false,
            'margins': 1
        });

        $('.gallery-image').magnificPopup({
            type: 'image'
        });
    });
</script>

我确实必须调整 Justified Gallery 才能添加 gallery-image 类，但其他一切都是库存。

我在想有什么矛盾的，但我似乎无法找到它。

有人用过这两个吗？我初始化 Magnific 的方式有问题吗？

4

2 回答 2

2

您可以只添加：

$("#gallery").justifiedGallery({
        'usedSuffix': 'lt240',
        'justifyLastRow': false,
        'rowHeight': 120,
        'fixedHeight': false,
        'captions': false,
        'margins': 1
    }).magnificPopup({type:'image', delegate: '.gallery-image'});
于 2013-12-22T09:27:37.133 回答
0

我以前没有使用过 Justified Gallery 插件，但正如我所见，您的标记是正确的。我敢打赌，画廊初始化期间有一种情况，

Gallery插件可能会操作DOM，所以我建议在gallery完成初始化时绑定magnific popup，您可以使用onComplete（Justified Gallery）回调。

于 2013-12-22T08:01:54.070 回答