5568 sujets

Sémantique web et HTML

[FancyBox] Rendu différent IE 11 / FF 26

Bonjour,

j'ai une page principale (index3.html) avec 2 possibilités :
1) - Ouvrir une galerie d'image
2) - Ouvrir un autre fichier HTML(iframe.html) par dessus la page actuelle. Dans cette page, il est possible d'ouvrir la même galerie d'image que précédemment.

Le comportement sur FF est OK (normal quoi). Sous IE 11 (Win 8.1),
Le comportement sur IE ne fonctionne pas lors de l'ouverture de la galerie du cas 2. En effet, il affiche la première image sans possibilité de changer.

Voici les fichiers index3.html:
<!DOCTYPE html>
<html>
<head>
	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- Add jQuery library -->
	<script type="text/javascript" src="./fancybox/lib/jquery-1.10.1.min.js"></script>

	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="./fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="./fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="./fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="./fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $(".fancyLink").fancybox({
			fitToView	: false,
			autoSize	: false,
			closeClick	: false,
			openEffect: 'fade' ,
			prevEffect: 'fade',
			nextEffect: 'fade'
		  });
		  
		  $("#popup-fiche").fancybox({
			fitToView	: false,
			width		: '80%',
			height		: '80%',
			autoSize	: false,
			closeClick	: false,
			openEffect	: 'none',
			closeEffect	: 'none'
			});
		}); // ready
		/* ]]> */
	</script>
</head>
<body>
		<a data-fancybox-group="group" href="images/1_b.jpg" class="fancyLink" title="title 01">GALLERY</a>
		<div id="fancyDIV">
			<a data-fancybox-group="group" href="images/2_b.jpg" class="fancyLink" title="title 02"></a>
			<a data-fancybox-group="group" href="images/3_b.jpg" class="fancyLink" title="title 03"></a>
		</div>
		<br /><br />

		<a id="popup-fiche" data-fancybox-type="iframe" href="iframe.html" title="visite 01">POPUP</a>
</body> 
</html>


Fichier de frame iframe.html:
<!DOCTYPE html>
<html>
<head>
	<title>fancyBox - iframe demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<!-- Add jQuery library -->
	<script type="text/javascript" src="./fancybox/lib/jquery-1.10.1.min.js"></script>

	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="./fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="./fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="./fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="./fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $(".fancyLink").fancybox({
			maxWidth	: 300,
			maxHeight	: 400,
			fitToView	: false,
			width		: '70%',
			height		: '70%',
			autoSize	: false,
			closeClick	: false,
			openEffect: 'fade' ,
			prevEffect: 'fade',
			nextEffect: 'fade'
		  });
		  
		}); // ready
		/* ]]> */
	</script>
</head>
<body>
	<h1>fancyBox - iframe demo</h1>

	<p>
		<a href="javascript:parent.jQuery.fancybox.close();">Close iframe parent</a>
		<a href="javascript:parent.jQuery.fancybox.open({href : '1_b.jpg', title : 'My title'});">Change content</a>
	</p>

	<a data-fancybox-group="group" href="images/1_b.jpg" class="fancyLink" title="title 01">open fancybox gallery</a>
		<div id="fancyDIV">
			<a data-fancybox-group="group" href="images/2_b.jpg" class="fancyLink" title="title 02"></a>
			<a data-fancybox-group="group" href="images/3_b.jpg" class="fancyLink" title="title 03"></a>
		</div>
</body>
</html>


Quelqu'un pourrait m'expliquer pour IE fait n'imp' ?

Merci,

Vincent
J'ai eu un retour par la communauté Google+.
Il semblerait que IE7 fonctionne normalement.
Sujet clos
Aller à