Discussion :

[hotman1313]

bonjour,

je développe actuellement un site web. J'ai une page qui est une sorte de galerie photo où les images sont en miniature (je les récupèrent dans ma BDD). Sur chaque photo il y a un lien, lorsqu'on clique dessus, une fenêtre modale s'ouvre et contient des données provenant de ma requête. Or comme je suis dans le while qui parcourt les résultats de ma requête, le fenêtre prend en compte juste le dernier résultat.

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
70
71
72
73
74
75
 
			<div id="contenu">
 
<?php 
 
        $actu = $bdd->query('SELECT * FROM actuellement');
                                                
                while($ligne = $actu->fetch()){         
                                
?>
 
				<div class="images">
<?php 
                        echo '<img class="photo" src="'.$ligne['url_image'].'"/>';
?>
				<br/>
<?php 
                        echo '<span class="titre">'.$ligne['nom'].'</span>';
?>
			<a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="1050px">Voir plus...</a>
 
		<script type="text/javascript" src="js/jquery.js"></script>
			<section class="popup-block"> 
				<h2><?php echo $ligne['nom']; ?></h2> 
					<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup"/>
				<h4> Description :</h4> <br/><?php echo $ligne['description']; ?>
			</section>
 
				</div>
 
<?php 
                }
?>
	   <script>
	$(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
	</script>
			</div>
 
 
	</div>

merci d'avance

[bourvil]

Salut

oui c'est normal, tu dis d'ouvrir le div avec la class "popup-block" apres un click sur Voir plus.... et tout tes div sont avec la class "popup-block".

Il faut simplement donner a tes div une classe unique relier au click.

essaye ca:

Code :

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

1
2
3
4
5
6
7
8
<a href="#" class="popup-light" data-popup-class="popup-block-<?php echo $ligne['id']?>" data-popup-width="1050px">Voir plus...</a>
 
		<script type="text/javascript" src="js/jquery.js"></script>
			<section class="popup-block-<?php echo $ligne['id']?>"> 
				<h2><?php echo $ligne['nom']; ?></h2> 
					<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup"/>
				<h4> Description :</h4> <br/><?php echo $ligne['description']; ?>
			</section>

si tu n'as pas de colonne id, remplace par $ligne['nom']

[hotman1313]

j'ai incrusté le code que tu as fourni, mais comme tu as mis l'id dans la class, il faut forcement faire de même dans le css. Par exemple, pour la premiere photo la class est ".popup-block-1", la seconde ".popup-block-2"... Mais je ne sais pas trop comment faire.

[bourvil]

rajoute une class general pour le css

Code :

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

class="popup-block-1 maclass

[hotman1313]

désolé mais je n'ai pas très bien compris.

merci de ton aide

[bourvil]

Code :

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

<section class="popup-block-<?php echo $ligne['id']?> maclass">

et ds ton css

Code css :

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

.maclass {}

[hotman1313]

Donc là, les photos s'affichent bien sur la page, les liens ouvrent la fenêtre mais celle-ci contient toujours les données de la première photos. Que je clique sur la première image ou autres, la fenêtre contient toujours les mêmes données .

[bourvil]

tu as un lien a nous montrer?

sinon remet ton code svp

[hotman1313]

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
70
71
72
73
74
75
76
 
<?php 
 
        $actu = $bdd->query('SELECT * FROM actuellement');
                                                
                while($ligne = $actu->fetch()){         
                                
?>
 
				<div class="images">
<?php 
                        echo '<a href="#?w=1050" rel="popup_name" class="poplight1 "><img class="photo" src="'.$ligne['url_image'].'"/></a>';
?>
				<br/>
<?php 
                        echo '<span class="titre">'.$ligne['nom'].'</span>';
?>
			<a href="#?w=1050" rel="popup_name" class="poplight1 descr">Voir...</a>
		<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
			<div id="popup_name" class="popup_block-<?php echo $ligne['id']; ?> popup">
				<h2><?php echo $ligne['nom']; ?></h2> 
					<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup"/>
				<h4> Description :</h4> <br/><?php echo $ligne['description']; ?>
</div>
 
				</div>
 
<?php 
                }
?>
	   <script>
	$(function(){
 
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight1[href^=#]').click(function() {
	var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
	var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
	//Récupérer les variables depuis le lien
	var query= popURL.split('?');
	var dim= query[1].split('&amp;');
	var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('<a href="#" class="close"><img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
 
	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});
 
	//Effet fade-in du fond opaque
	$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
	return false;
});
 
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup').fadeOut(function() {
		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	});
	return false;
});
        });
	</script>

Je n'ai pas de serveur pour pouvoir vous montrer.

merci de votre aide

[hotman1313]

j'ai trouvé. Il fallait changer ces 2 lignes :

Code :

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

1
2
 
<a href="#?w=1050" rel="popup_block-<?php echo $ligne['id']; ?>" class="poplight1 descr">Voir...</a>

et

Code :

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

1
2
 
<div id="popup_block-<?php echo $ligne['id']; ?>" class="popup_block-<?php echo $ligne['id']; ?> popup">

Voilà merci à @bourvil