Discussion :

[jimmplan]

Bonjour,

Voici un problème que j'ai avec le site web que je suis en train de développer :

Dans le bas de ma page web, il y a plein de petites photos (10 petites photos). Lorsque je clique sur l'une d'entre elle, elle apparaît en plus grand dans le haut de ma page (1 grandes photos). Lorsque je clique sur ma grande photo, la photo apparaît dans un lightbox (Elle devrait apparaître dans un lightbox, la est mon problème) Seulement ma première photo, celle par défaut, dans mon code html, apparaît dans un lightbox.


Code HTML ou est ma grande photo, avec une image par défaut :

Code :

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

1
2
3
4
5
6
7
 
 
<div id="imageAccueil">
	<a href="Images.png">
		<img src="Images.png" border="0" width="450" height="337" alt=""> 
	</a>
</div>

Code avant mon header pour controler mon lightbox :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<link rel="stylesheet" type="text/css" href="includes/jquery.lightbox-0.5.css" media="screen" /> 
<script language="javascript" type="text/javascript" src="includes/jquery.js"></script>
<script language="javascript" type="text/javascript" src="includes/jquery.lightbox-0.5.js"></script>
 
 
<script language="javascript" type="text/javascript">
	$(function() {
		 $('#imageAccueil a').lightBox();
	});	
</script>

Code pour appeler ma fonction AJAX:

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
 
function ajax(noPhoto)
{
	var url = 'reqAjaxVision.php';
	var postval = ''; //valeur à poster
	var h = ''; //hash
 
	//variable actions
	var oncreate = '';
	var onsuccess = '';
 
 
	h = $H({ noPhoto: noPhoto });
	onsuccess = function(transport) 
	{
		document.getElementById('imageAccueil').innerHTML = transport.responseText;
	}
 
	//Requête AJAX
	h.keys().sort().join(', ');
	postval = h.toQueryString();
	var myAjax = new Ajax.Request(url, 
	{
		method: 'post', 
		postBody: postval,
		onCreate: oncreate,
		onSuccess: onsuccess
	});
}

Et voici mon fichier reqAjaxVision.php qui est l'url dans mon cade javascript pour la fonction AJAX :

Code :

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

1
2
3
4
5
6
7
 
<?php
        
        echo'<a href="Images/realisations/accueil/450/'.$_POST['noPhoto'].'.png">
                        <img src="Images/realisations/accueil/450/'.$_POST['noPhoto'].'.png" border="0" width="450" height="337" alt=""> 
                </a>';
?>

Merci de m'aider !!!

Jimmy Plante

[Bovino]

C'est normal, au chargement de la page, tu affectes des propriétés à un objet HTML. Mais ensuite, avec le innerHTML, tu détruis cet objet en le remplaçant par un autre lien !
Deux solutions possibles :
* La moins bonne, après le innerHTML, tu réaffectes la lightbox aux nouveaux éléments

Code :

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

1
2
3
4
onsuccess = function(transport) {
    document.getElementById('imageAccueil').innerHTML = transport.responseText;
    $('#imageAccueil a').lightBox();
	}

à condition bien sûr d'avoir attribuer le bon id !

* La meilleure : ta requête Ajax ne renvoie que les attributs à changer et tu ne réaffectes que ceux-ci :

Code :

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

1
2
3
var mon_obj = $('#imageAccueil a');
mon_obj.href = nouvelle_url;
...

[jimmplan]

Ca fonctionne ! Merci !