CODEWITHSUNDEEP
javascriptjqueryfirefoxmagnific-popup
m.s.
m.s.

Reputation: 7

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!

Upvotes: 0

Views: 1689

Answers (3)

Kibin Uy
Kibin Uy

Reputation: 1

I've tried something but is not responsive anymore. Just used fixed popup size.

Comment out the following @ Line 1210. item.img.css('max-height', mfp.wH-decr);

Hope this helps!

Cheers!

Upvotes: -1

TheTank
TheTank

Reputation: 41

I know it is a bit late, but since the answer was never posted... Try declaring DOCTYPE. I had the same issue and this fixed it for me. It is likely that your official site has a DOCTYPE declared and your test code did not.

Upvotes: 4

Fonzy
Fonzy

Reputation: 691

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

Upvotes: 1

Related Questions