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 {}