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