Search code examples
javascriptjqueryfirefoxmagnific-popup

magnific popup does not show images in FireFox

I'm using Magnific Popup JQ library to show gallery in pop-up overlay. This is the base code:

<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>

It does not show images in FF browsers (Windows and Ubuntu). In Chrome it works ok. This is the link to the live page: http://ristnatuletorn.eu/index.php?id=8

Can anyone suggest any solution?

Thank you!

Solution

  • It works if you remove the max-height CSS property from the <img>.

    The set max-height: 36px; is just too small, if you go into the console and debug it see what happens ass you go up to say 100px.

    You somehow set this specifically for FF, since in Chrome it's at 633px.

    Cheers