Créer une galerie d'image

**loic20h28** · 07/09/2010, 00h03

Bonjour,

Voilà je suis entrain de réaliser un site marchand (pour mon plaisir) vendant des motos avec PHP et pour le javascript la librairie jQuery.
Lorsque le client visualise la page détail d'une moto voici ce que je souhaite qu'ils obtienne : http://nsa19.casimages.com/img/2010/...0324227276.jpg

Ce que je souhaite faire avec la galerie des images c'est lorsque l'utilisateur click sur une petite photo, cette dernière s'affiche en grand et la grande s'affiche en petit à la place de l'autre.
Je voit pas trop comment faire c'est pour cela que je me tourne vers vous.

Voici le code PHP :

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
<?php
        $art = $_GET["art"];
        $sql = "SELECT ArtNeuf_marque, ArtNeuf_modele, ArtNeuf_cylindre, ArtNeuf_TypeMoteur, Cat_design, ArtNeuf_Technologie, ArtNeuf_Puissance, ArtNeuf_Couple, ArtNeuf_Transmission, ArtNeuf_VitesseMaxi, ArtNeuf_FreinAvant, ArtNeuf_FreinArriere, ArtNeuf_Reservoir, ArtNeuf_Poids, ArtNeuf_HauteurSelle, ArtNeuf_Empattement, Ph_lien FROM article_neuf, categorie, photos WHERE photos.Art_id = article_neuf.ArtNeuf_id AND categorie.Cat_code = article_neuf.Cat_code AND ArtNeuf_id='$art' LIMIT 1";
        $jeu=mysql_query($sql);
        while($l=mysql_fetch_array($jeu)){ 
                $MonArt[] = array($l["ArtNeuf_marque"], $l["ArtNeuf_modele"], $l["ArtNeuf_cylindre"], $l["ArtNeuf_TypeMoteur"], $l["Cat_design"], $l["ArtNeuf_Technologie"], $l["ArtNeuf_Puissance"], $l["ArtNeuf_Couple"], $l["ArtNeuf_Transmission"], $l["ArtNeuf_VitesseMaxi"], $l["ArtNeuf_FreinAvant"], $l["ArtNeuf_FreinArriere"], $l["ArtNeuf_Reservoir"], $l["ArtNeuf_Poids"], $l["ArtNeuf_HauteurSelle"], $l["ArtNeuf_Empattement"], $l["Ph_lien"]);
        //$a[] = $l["ArtNeuf_modele"];
        }
        
        $req = " SELECT Ph_lien FROM photos WHERE Art_id = '$art' LIMIT 1,4";
        $j = mysql_query($req);
        while($i=mysql_fetch_array($j)){ 
                $MesPhotos[] = array($i["Ph_lien"]);
                //echo $i["Ph_lien"]."a";
        //$a[] = $l["ArtNeuf_modele"];
        }
        
        include ("contenu/Vue/V_DetailMoto.php");
?>

Le code HTML :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<link href="contenu/css/moto.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<span id="titre">Détail de la 
<?php 
        foreach ($MonArt as $art)
        {
                echo $art[0]." ".$art[1]."<br>";
?>
</span>
 
<br/>
<table>
	<tr>
		<td id="caracteristique_technique">
			Catégorie : 
				<?php
                                        echo $art[4];
                                ?>
			<br/>
			Cylindre : 
				<?php
                                                echo $art[2]." cm3";
                                ?>
			<br/>
			Type moteur :
				<?php
                                        echo $art[3];
                                ?>
			<br/>
			Technologie :
				<?php
                                        echo $art[5];
                                ?>
			<br/>
			Puissance :
				<?php
                                        echo $art[6];
                                ?>
			<br/>
			Couple :
				<?php
                                        echo $art[7];
                                ?>
			<br/>
			Transmission :
				<?php
                                        echo $art[8];
                                ?>
			<br/>
			Vitesse Maxi. :
				<?php
                                        echo $art[9];
                                ?>
			<br/>
			Frein avant :
				<?php
                                        echo $art[10];
                                ?>
			<br/>
			Frein arrière :
				<?php
                                        echo $art[11];
                                ?>
			<br/>
			Réservoir :
				<?php
                                        echo $art[12];
                                ?>
			<br/>
			Poids :
				<?php
                                        echo $art[13];
                                ?>
			<br/>
			Hauteur de selle :
				<?php
                                        echo $art[14];
                                ?>
			<br/>
			Empattement :
				<?php
                                        echo $art[15];
                                        }
                                ?>
		</td>	
		<td id="image">
			<img src="<?php echo $art[16]; ?>" id="1" ></img>
 
		<?php
                        $i = 2;
                        foreach ($MesPhotos as $photos)
                        {
                ?>
 
				<img src="<?php echo $photos[0]; ?>" id="<?php echo $i++ ?>" class="img"></img>
 
		<?php
                        }
                ?>
		</td>
	</tr>
 
</table>

La page CSS :

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
img.img
{
	width: 85px;
	border:0;
}
 
#titre{
	color : red;
	padding : 140px;
}
 
#caracteristique_technique{
	font-weight: bolder; /* pour mettre le texte en gras */
	display: block; /* pour que le cadre prenne forme */
	padding: 5px; /* pour que le texte ne soit pas trop collé aux bordures */
	font-size: 10pt; /* pour corriger la taille (IE ne le corrige pas) */
	border: 2px solid; /* bordure */
	margin: auto; /* pour centrer le cadre (non compris par IE) */
	margin-left : 15px;
	width: 115%; /* largeur de 75% */
}
 
#image{
 
	padding-left : 75px;
	padding-bottom : 95px;
}

Quelqu'un aurait-il une idée pour construire comme je le souhaite ma galerie d'image ?

Merci d'avance

**loic20h28** · 10/09/2010, 23h54

Bonjour,

En fait je vient de résoudre mon souci, j'ai fais de la manière suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
jQuery(function($) {
    $('.img').click(function(){
        // Récupère "src" de l'élément "img" de la petite image sur laquel on a cliqué
        var src_img_petit = $(this).attr("src");
// Récupère "src" de l'élément "img" de la grande image
        var src_img_grand = $('#1').attr("src");
       // On colle le "src" de la grande à la petite image
        $(this).attr("src", src_img_grand);
      // On colle le "src" de la petite à la grande image
        $('#1').attr("src", src_img_petit);            
    });
});

Cordialement.

Créer une galerie d'image

jQuery

Discussions similaires

Partager

Partager