[jQuery] Lightbox (maison) ne fonctionne pas sous IE

Bonjour tout le monde, dans le but d'améliorer mes connaissances sur jQuery, je me suis dit que faire une lightbox pouvait être une bonne idée, du coup j'en ai fait une assez simple, qui est activé par les liens qui ont pour attribut "rel" la valeur "jBox" (du coup le lien reste actif pour ceux qui ont le JS désactivé), une fois cliqué sur le lien, je créer mes objets je joue un peu avec la transparence, et j'affiche le site dans une iframe, puis on quitte la lightbox par un clic sur la partie sombre autour de l'iframe.

Vous pouvez la voir à cette adresse : http://cerium50.niloo.fr/up/jBoxBug/

Et voici les deux bugs :
>Sous IE le lien est bêtement suivit, comme s'il ne voyait pas le return false, du coup on ne voit jamais l'iframe et on quitte le site sur lequel on est.
>Sous Opera lorsqu'on redimensionne la fenêtre l'iframe ne se redimensionne pas :/ (l'objet window m'a l'air bien bizarre sous Opera d'ailleurs)

Et voila le code (j'ai tout mis dans le même fichier car c'est plus simple pour faire des tests, bien entendu l'idéal eut été de faire trois fichiers distincts...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>jBox with jQuery.</title>

<style type="text/css">
body {background-color: #888888; color: #333333; font: 14px Verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;}
a {color: #333333;}
a:hover {text-decoration: none;}

#jBox {position: fixed; top: 0; left: 0; background-color: #000000;}
#jWindow {position: fixed; border: 1px solid #888;}
#jBox iframe {position: fixed; background-color: #000000;}
#jTitle {position: fixed; color: #ffffff;}
a[rel=jBox] {outline: none;}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<!--<script src="http://ui.jquery.com/latest/ui/effects.core.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/latest/ui/effects.scale.js" type="text/javascript"></script>-->

<script type="text/javascript">
<!--//

/*
	>To Do :
*/

$(function() { //when document's ready run a function

	$('a[rel=jBox]').click(function() { //when a jBox link is clicked, run a function

		var windowWidth = $(window).width();
		var windowHeight = window.innerHeight;
		var frameWidth = Math.floor(0.9 * windowWidth);
		var frameHeight = Math.floor(0.9 * windowHeight);
		
		var jBox = $('<div></div>').attr('id', 'jBox'); //create #jBox			
		var jTitle = $('<div>' + $(this).attr('title') +'</div>').attr('id', 'jTitle');
		var jWindow = $('<div></div>').attr('id', 'jWindow'); //create #jWindow
		var jFrame = $('<iframe></iframe>').attr('id', 'jFrame')
			.attr('src', $(this).attr('href'))
			.attr('frameborder', '0')
			.attr('width', frameWidth)
			.attr('height', frameHeight);
		
		$(jBox).css({ //put some CSS to jBox > opacity:0, width: 100%, height: 100%
			opacity: 0,
			width: windowWidth,
			height: windowHeight			
		});
		
		$(jWindow).css({ //put some CSS to jBox > opacity : 1, width: 90%, height: 90%, and center
			opacity: 1,
			width: frameWidth,
			height: frameHeight,
			top: (0.1 * windowHeight) / 2,
			left: (0.1 * windowWidth) / 2
		});
				
		$(jTitle).css({
			opacity: 0,
			left: (0.1 * windowWidth) / 2,
			top: (0.1 * windowHeight) / 2 - 18
		});
		
		$(jFrame).css({ //put some CSS to jBox > opacity:1, width: 90%, height: 90%, and center
			opacity: 0,
			width: frameWidth,
			height: frameHeight,
			top: (0.1 * windowHeight) / 2,
			left: (0.1 * windowWidth) / 2
			
		});		
		
		$('body').append(jBox); //append jBox to the body
		
		$('body').append(jWindow); //append jWindow to  jBox
		$('body').append(jTitle);	
		$(jWindow).append(jFrame);		
		
		$(jBox).animate({
			opacity: 0.75 //show jBox
		}, 'normal');
		
		$(jTitle, jWindow).animate({
			opacity: 1 //show jWindow
		}, 'normal');
		
		$(jFrame).load(function() {
			$(jFrame).animate({
				opacity: 1
			}, 'normal');
		});	
		
		return false;
	});

	$('body').click(function() { //when the body of the master document is double clicked
		$('#jBox, #jTitle, jWindow').animate({opacity: 0}, 'slow', function() {
	//	$('#jWindow').empty(); //delete all thing wich are in jWindow
	//	$('#jBox, #jTitle, jWindow').css({opacity: 0}); //for Opera
		$('#jBox, #jWindow, #jTitle, #jFrame').remove(); //delete jWindow & jBox
		});
	});
	
	$(window).resize(function() { //just crop jElements
	
		var windowWidth = $(window).width();
		var windowHeight = window.innerHeight;
		console.log('windowHeight : ' + windowHeight);
		var frameWidth = Math.floor(0.9 * windowWidth);
		var frameHeight = Math.floor(0.9 * windowHeight);
		
		$('#jBox').css({
			width: windowWidth,
			height: windowHeight		
		});
		
		$('#jTitle').css({
			left: (0.1 * windowWidth) / 2,
			top: (0.1 * windowHeight) / 2 - 18
		});
		
		$('#jWindow').css({			
			opacity: 1,
			width: frameWidth,
			height: frameHeight,
			top: (0.1 * windowHeight) / 2,
			left: (0.1 * windowWidth) / 2
		});
		
		$('#jFrame').css({
			width: frameWidth,
			height: frameHeight
		});
		
	});

});
//-->
</script>

</head>

<body>

<a href="http://google.com/" rel="jBox" title="Google" >Google</a>.
<!--

<div id="jBox">
</div>

<div id="jTitle"></div>
	
<div id="jWindow'>
	<iframe id="jFrame"></iframe>
</div>

-->
</body>
</html>

Désolé pour les commentaires dans mon anglais approximatif, c'est l'habitude (stupide sûrement, mais habitude tout de même).

Merci à ceux qui se pencheront sur la question.

Et un petit bug sous Opéra tant qu'on y est :p

[jQuery] Lightbox (maison) ne fonctionne pas sous IE

Supprimer

Modérer

Signaler le message aux modérateurs