Question

我使用Magnific Popup JQ库在弹出式叠加层中显示图库。这是基本代码：

<html>
<head>
<title>Ristna tuletorn. Маяк на острове, Эстония. - Gallery test</title>
<base href="http://ristnatuletorn.eu/" />
<link href="assets/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $('.open-popup-link').magnificPopup({
    type:'image',
    items: [
    {src:'/assets/gallery/1/11.JPG'},
    {src:'/assets/gallery/1/2.jpg'},
    {src:'/assets/gallery/1/1.jpg'},
    {src:'/assets/gallery/1/3.jpg'},
    {src:'/assets/gallery/1/4.jpg'},
    {src:'/assets/gallery/1/5.JPG'},
    {src:'/assets/gallery/1/6.jpg'},
    {src:'/assets/gallery/1/7.JPG'},
    {src:'/assets/gallery/1/8.JPG'},
    {src:'/assets/gallery/1/9.jpg'},
    {src:'/assets/gallery/1/10.JPG'},
    {src:'/assets/gallery/1/12.JPG'},
    {src:'/assets/gallery/1/13.JPG'},
    {src:'/assets/gallery/1/14.JPG'},
    {src:'/assets/gallery/1/15.JPG'},
 ],             
                          gallery: {
                             enabled: true
                                    }
        });
    });

</script>
<link rel="stylesheet" href="/assets/components/gallery/css/web.css" type="text/css" />
</head>
<body>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

</body>
</html>

它不会在FF浏览器（Windows和Ubuntu）中显示图像。在Chrome中它可以正常工作。这是指向实时网页的链接：http://ristnatuletorn.eu/index.php?id=8

有人可以建议任何解决方案吗？

谢谢！

Answer 1

我知道有点晚了，但由于答案从未发布过......请尝试声明DOCTYPE。我有同样的问题，这为我解决了。您的官方网站可能已声明DOCTYPE且您的测试代码没有。

Answer 2

如果从<img>中删除max-height CSS属性，它就可以。

集合max-height: 36px;太小了，如果你进入控制台并进行调试，看看会发生什么事情，你可以说100px。

你以某种方式专门为FF设置了这个，因为在Chrome中它是633px。

干杯

Answer 3

我尝试了一些东西，但不再响应了。刚刚使用了固定的弹出窗口大小。

注释掉以下@ Line 1210。 item.img.css('max-height', mfp.wH-decr);

希望这有帮助！

干杯！

magnific popup不会在FireFox中显示图像

3 个答案: