-1

I'm trying to implement magnific popup on my website. It works on IE10, Firefox end even on iPad. But for some reason the images are not showing in IE8 in popup mode. (I have not checked in IE9). All it shows is a white screen. What could be the issue? Here is my link: http://www.fietseling.org/media/routes2013/index.html

This the code: Magnific Popup

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="http://www.fietseling.org/templates/nuni_fietseling/css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script type="text/javascript" src="http://www.fietseling.org/templates/nuni_fietseling/js/jquery.magnific-popup.js"></script> 
</head>
<body>
<div class="window-content">

<img src="fotos/routekaart2013fotos_groot2.jpg" width="3000" height="1809" border="0" usemap="#Map"/>
<map name="Map">
  <area shape="rect" coords="420,25,570,75" alt="Fietseling" href="http://www.fietseling.org/routes/algemene-routekaart">
  <area shape="rect" coords="1320,490,1350,515" alt="Fietseling" class="test-popup-link" href="fotos/hers01_miemaan.jpg">
</map>
</div>
<script>
$(document).ready(function() {
  $('.test-popup-link').magnificPopup({type:'image'});
});
</script>
</body>
</html>

Many thanks

Marc Willems
  • 1
  • 1
  • 2
  • 1
    where is the popup? what should I do to get the popup? post the relevant code? – Praveen Jul 25 '13 at 09:30
  • The link shows a picture of a map with several small icons on it, of places where you can click on to show a popup with a bigger image. – Marc Willems Jul 25 '13 at 09:49
  • If you post the relevant code, it'll be much easier to help you. – Qiu Jul 25 '13 at 09:49
  • @MarcWillems working for me in IE10, 9, 8 with their respective document type. – Praveen Jul 25 '13 at 10:14
  • I had several visitors of the site saying it does not work for them. One visitor upgraded his IE to IE10 and then it worked for him. SO I have tested it for myself in IE8 and it does not work. – Marc Willems Jul 25 '13 at 10:54

1 Answers1

0

I think I got your problem.

When I checked the developer tool, I found that your webpage is using the

document mode as IE5 quirks

Screenshot:

enter image description here

To fix use X-UA-Compatible

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

within your head tag.

Hope you understand :)

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • I have added the meta line to the page, but it seems that it does not solve the popup issue. – Marc Willems Jul 25 '13 at 10:53
  • With your tip about the modes, I used also the developer mode and saw that it doesn't work in Quirks mode and when I change that to IE8 standards, it does work. I have added a DOCTYPE statement to avoid the quirks mode. Thanks. – Marc Willems Jul 25 '13 at 11:09
  • @MarcWillems Glad to hear, my answer helped you. – Praveen Jul 25 '13 at 11:23