[AJAX] chargement de lightbox

Bonjour,

j'ai une page html ( communication.html ) qui fonctionne très bien quand je la lance directement. Il y a juste une image qui, après un appui dessus ouvre une lightbox.

J'ai une page index.html qui a quelques liens qui s'affiche dans une div centrale, avec une requête ajax pour récupérer les pages html (fichier externe ) et les afficher dans la div.

Quand je charge la page comme cela, ma lightbox ne fonctionne plus. Soit ca ouvre la page communication.html à la place de l'index, soit ca affiche communication.html dans la div (comme prévu) mais le clic sur l'image ne déclenche plus l'ouverture de la lightbox.

!voici mon code de index.html :

Code:

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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">

<head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="identifier-url" content="index.html">
<meta name="Date-Creation-yyyymmdd" content="">
<meta name="reply-to" content="">
<meta name="" content="">

<link rel="stylesheet" type="text/css" href="index_fichiers/enr.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/enrTexte.css">
<link rel="stylesheet" type="text/css" href="css/ibox.css">
<link rel="stylesheet" type="text/css" href="css/formulaire.css">



<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link rel="stylesheet" type="text/css" href="css/huitDiv.css">

<script type="text/javascript" src="JS/prototype.js"></script>
<script type="text/javascript" src="JS/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="JS/lightbox.js"></script>





<script type="text/javascript" src="JS/ibox.js"></script>
<script type="text/javascript" src="JS/jquery-1.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>


<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

<script type="text/javascript">
$(document).ready(function(){
   $("a").click(function(){ 
	page=($(this).attr("href"));
	$.ajax({
		url: page,
		cache: false,
		success:function(html){
			afficher(html);	
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ 
		}
	});
	return false; 
   });
});

function afficher(donnees){
	$("#contenu").empty(); 
	$("#contenu").append(donnees); 
}
</script>












</head>
<body>

<div id="Bottom">
  <div class="blocQuipeutPresenter" id="sidecontent">
    <table width="717" border="0" cellpadding="0">
      <tr>
        <td width="163"><a href="communication.html"><img src="images/bouton/Btn_Un.gif" alt="Communication" width="161" height="21" border="0" onmouseover="MM_effectAppearFade(this, 1000, 70, 100, false)"/></a></td>
        
        <td width="124"><a href="#"><a href="constat.html" target="_parent"><img src="images/bouton/Btn_Deux.gif" alt="Constat du marché"width="123" height="21" border="0" onMouseOver="MM_effectAppearFade(this, 1000, 70, 100, false)"/></a></td>
        
        <td width="125"><a href="#"><a href="client.html" target="_parent"><img src="images/bouton/Btn_Trois.gif" alt="Nos clients"width="124" height="21" border="0" onMouseOver="MM_effectAppearFade(this, 1000, 70, 100, false)"/></a></td>
        
        <td width="120"><a href="#"><a href="fiches.html" target="_parent"><img src="images/bouton/Btn_Quatre.gif" alt="Exemple de fiches" width="119" height="21" border="0" onMouseOver="MM_effectAppearFade(this, 1000, 70, 100, false)"/></a></td>
        
        <td width="113"><a href="login.html" target="ibox-login.html" class="lienGris" rel="ibox&amp;height=130&amp;width=275" ><img src="images/bouton/Btn_Acces.gif" alt="Acces Clients" width="112" height="21" border="0" onMouseOver="MM_effectAppearFade(this, 1000, 70, 100, false)" /></a></td>
        
        <td width="13">&nbsp;</td>
        <td width="20"><a href="index.html" target="_parent"><img src="images/bouton/Btn_Home.gif" width="18" height="18" border="0" /></a></td>
        <td width="21"><a href="login.html" target="ibox-login.html" class="lienGris" rel="ibox&amp;height=130&amp;width=275" ></a><a href="mailto:contact@optissimmoContact.fr"><img src="images/bouton/Btn_ContactMail.gif" width="18" height="11" border="0" /></a></td>
      </tr>
    </table>
  </div>
</div>


<div id="layout">

  <div class="lienGris"><a href="contenu1.html" class="lien"><img src="images/bouton/Little_FleBlk.gif" width="5" height="9" border="0" /> blablabla<br />
    blablabla</a></div>

  <div class="lienGris"><a href="contenu2.html" class="lien"><img src="images/bouton/Little_FleBlk.gif" alt="" width="5" height="9" border="0" /> tititiittiititititit<br />
  tititit</a></div>

  <div class="lienGris"><a href="contenu3.html" class="lien"><img src="images/bouton/Little_FleBlk.gif" alt="" width="5" height="9" border="0" /> mamamamamama<br />
  mamamamma</a></div>

  <div class="lienGris"><a href="contenu4.html" class="lien"><img src="images/bouton/Little_FleBlk.gif" alt="" width="5" height="9" border="0" /> fefefefefefefef<br />
  fefefefefefefefe</a></div>
  
  
  
  
  <div class="BlocCentre">

<div id="contenu"><div style="background: rgb(253, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
	contenu1
</div></div>

  </div>
  
.....

et communication.html :

Code:

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
 
<!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">
 
<head>
 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="identifier-url" content="">
<meta name="Date-Creation-yyyymmdd" content="">
<meta name="reply-to" content="">
<meta name="" content="">
 
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link rel="stylesheet" type="text/css" href="css/huitDiv.css">
 
<script type="text/javascript" src="JS/prototype.js"></script>
<script type="text/javascript" src="JS/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="JS/lightbox.js"></script>
 
 
 
 
</head>
 
<body>
<div>
  <div class="BlocRecepteur"> 
    <a href="images/image-1.jpg" rel="lightbox" title=""><img src="images/thumb-1.jpg" width="202" height="92" /></a>  </div>
</div>
</body></html>

Est ce que ca pourrait venir de l'appel à la fonction Ajax pour charger la page qui bloquerait le javascript? je ne pense pas quand même...

Après quelques tests, quand j'enlève l'appel au script scriptaculous dans l'index, communication.html se charge bien dans la div contenu (mais la lightbox ne fonctionne pas) et quand je le met, ça ouvre le fichier communication.html à la place de mon index.html mais rien ne s'affiche...

Quelqu'un a une idée?

Merci