Javascript + XMLHttpRequest + Lightbox avec IE

Invité · 24/03/2009, 15h07

Bonjour, je vais essayer d'expliquer clairement mon problème.

J'ai fai une galerie d'image avec les bibliothèque jquery et lightbox. Jquery me permet d'avoir un menu en forme d'accordéon et lightbox permet d'afficher l'image en grand.

Fonctionnement de la galerie :
- on clique sur la rubrique que l'on souhaite (ex : Menuiserie)
- on clique sur la "mini" photo pour afficher la moyenne
- on clique sur la moyenne pour afficher la grande photo

Dans firefox aucun problème, par contre dans IE la grande photo s'ouvre dans la page même ! comme si il ne voyait pas la bibliotheque Lightbox...

Je ne vois pas mon erreur merci de m'aider. Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>  
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  
<script type="text/javascript">
 
var $z = jQuery.noConflict();
$z(document).ready(function()
{
	$z = jQuery.noConflict();	
    $z('a.light').lightBox();
});
 
</script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
 
$j(document).ready(
function()
{
	$j(".ascenseur").next("div").hide();
	$j(".ascenseur").click(
	function()
	{
		if($j(this).next("div").is(":hidden"))
		{
			$j(".ascenseur").next("div:visible").slideUp();
			$j(this).next("div").slideDown();
		}
	});
});
 
preload = function (o, img_src, w, h) {
  var img = new Image ();
  img.onload = function () {
    o.onload = null;
    if (w) o.width  = w;
    if (h) o.height = h;
    o.src = img.src
  };
  img.src = img_src;
} 
</script>
</head>
 
 
// include de la page galerie, et lorsque l'on clique sur la rubrique Menuiserie
// de la galerie , j'envoie un requete XMLHttpRequest qui appelle une page mini.php qui affiche les mini et moyenne image dans une <div>
// Dans ma page mini.php j'ai été obligé de recoler le code suivant pour que sa marche dans firefox
 
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>    
<script type="text/javascript">
 
var $y = jQuery.noConflict();
$y(document).ready(function()
{
	$y = jQuery.noConflict();	
    $y('a.light').lightBox();
});
 
</script>
 
// ensuite je met mon lien sur la moyenne image
 
<div id="gallery">
<a href="images/galerie/rep/nomphotos" class="light">
<img src="images/ajax-loader.gif" onload="preload (this, 'images/galerie/nomphotos" border="0"/>
</a>
</div>

Infos : Quand je met mon lien directement dans la page galerie.php sa marche, dès que je le met dans la page mini.php qui est apellé par XMLHttpRequest , sa ne marche plus dans IE...

Merci de vos réponses.

Invité · 28/03/2009, 13h54

Après 3 jour de galère j'ai fini par arrêter de me prendre la tête mais bon je trouverai......

J'ai opter pour 2 fonction java script. Bien sur elle ne fournisse pas les effets de la lightbox... En revanche sa répond à mon projet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
//insertion du css
<link type="text/css" rel="stylesheet" href="css/popup.css"/>
 
//javascript
function popupImage(urlImage,label,WidthImage, HeightImage) {
 
 
	// Taille de la fenêtre
	if (window.innerHeight) {
		largeur = window.innerWidth;
		hauteur = window.innerHeight;
	} else {
		largeur = document.body.offsetWidth;
		hauteur = document.body.offsetHeight;
	}
	var imgl =WidthImage;
	var img2 =HeightImage;
	var s ='<div id="popupIn" style="width:'+ imgl +'px; height:'+ img2 +'px;">';
	s += '<div id="bouttonfermer"><a href="javascript:closePopup();" class="lien"><img border="0" src="images/popup_fermer.gif" /></a></div>';
	s += '<a href="javascript:closePopup();"><img class="image_zoom" src="'+ urlImage +'"/></a>';	
	s += '<br />';
	s += '<p style="width:'+(WidthImage)+'px; " class="popupTexte">'+label+'</p>';
	s += '</div>'
	document.getElementById('receptacle').innerHTML = s; 
 
 
	document.getElementById('popup').style.display = 'block';
	document.getElementById('receptacle').style.display = 'block';
	document.getElementById('receptacle').style.opacity = 1;
	document.getElementById('receptacle').style.left = ( (largeur - imgl - 20) / 2)+'px';
	document.getElementById('zoom').style.display = 'none';
}
 
function closePopup()	{
	document.getElementById('popup').style.display = 'none';
	document.getElementById('receptacle').style.display = 'none';
	document.getElementById('zoom').style.display = 'block';
}

Voila pour le javascript puis le css ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*popup*/
#popup	{
 
	position:fixed !important;
    /* fix IE */
	position:absolute;	
	border:1px solid #445566;
	top:0; 
	left:0; 
	width:100%;
	height:100% !important;
	height: expression(document.body.clientHeight 100% 0);
	background-color:#000;
	filter:alpha(opacity=60); 	
	-moz-opacity:0.60;	
	opacity: 0.60;
	display:block;
	margin:0 0 0 0;
	text-align:center;
 
 
}
 
#popupIn {
	position:absolute;
	filter:alpha(opacity=100); 	
	-moz-opacity:1;	
	opacity: 1;	
	background-color:#FFFFFF; 
	border-top: 4px solid #FFFFFF;	
	border-right: 4px solid #FFFFFF; 
	border-bottom: 4px solid #FFFFFF; 
	border-left: 4px solid #FFFFFF; 
	margin-left:auto;	
	margin-right:auto;	
	background-image:url(../images/lightbox-ico-loading.gif);
	background-position:center;
	background-repeat:no-repeat;
}
#close {
	text-align:right;
	margin:0;
}
#receptacle #close IMG	{
	margin:0;
}
#receptacle	{
 
	position:absolute;
	text-align:center;
	margin-top:10px;
 
}
.image_zoom	{
	/*border:1px solid #CCCCCC;*/
	margin:0px;border:0px;	
}
#popup	P	{
	text-align:left;
	margin:0 0 0 0;
}
 
#bouttonfermer{
 
/* fix IE */
	position:absolute;
top:0; border:0px;
 
}
 
#receptacle	A.lien	{
 
	font-size:90%;
	text-decoration:none;
	font-weight:bold;
	padding:0px;border:0px;
 
}
#popup	#packShot	{
}
.popupTexte {
 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	background-color:#FFF;
	height:25px;
	background-color:#FFFFFF; 
	border:0px;	
	margin:0px;padding:0px;	
	padding-top:5px;
}
 
 
 
.ZoomPhoto	{
	position:relative;
	margin:0px auto;
}
.image_zoom	{
	margin:0px;padding:0px;	
}
.ZoomButton{
 
/* fix IE */
position:absolute;border:0px;
 
filter:alpha(opacity=70); 	
	-moz-opacity:0.70;	
	opacity: 0.70;
}

Ensuite, mettre le code suivant derrière la balise <body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="popup" style="display: none;"/>
</div><div onclick="closePopup();" id="receptacle" style="display: none;"></div>

et pour finir, sur votre lien faite un onclick de votre fonction.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a onclick="javascript:popupImage(paramètre de la fonction)" href="votrepage.html">

En espérant aider du monde... chaooooo

Javascript + XMLHttpRequest + Lightbox avec IE

JavaScript

Discussions similaires

Partager

Partager