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 :
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.
[B][U]Voici le code PHP[/U][/B] :
[B][U]Le code HTML[/U][/B] :
[B][U]La page CSS[/U][/B] :
Quelqu'un aurait-il une idée pour construire comme je le souhaite ma galerie d'image ?
Merci d'avance
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 :
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.
[B][U]Voici le code PHP[/U][/B] :
<?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");
?>[B][U]Le code HTML[/U][/B] :
<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>[B][U]La page CSS[/U][/B] :
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
