Fenêtre modale jQuery et php

Version imprimable

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:

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

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:

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']

19/06/2013, 06h52
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.
19/06/2013, 07h23
bourvil

rajoute une class general pour le css

Code:

class="popup-block-1 maclass
19/06/2013, 07h29
hotman1313

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

merci de ton aide
19/06/2013, 07h53
bourvil

Code:

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

et ds ton css

Code:

.maclass {}
19/06/2013, 08h07
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 .
19/06/2013, 10h08
bourvil

tu as un lien a nous montrer?

sinon remet ton code svp

voici le code :

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
 
<?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

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

Code:

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

Code:

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

Voilà merci à @bourvil