Mini galerie, comment afficher la photo correspondant à la vignette ?

Répondre
Citer ce message
chakan
le 14/11/2004 à 11:58
chakan
Bonjour,

Je voudrais sur une page, dans un tableau de 2 colonnes placer côté gauche 1 photo et côté droit 16 photos miniatures (vignettes).

Il faut que lorsqu’on clique sur une des petites vignettes (du coté droit) la photo correspondante s’affiche (du coté gauche)

Donc, j’ai fait une query

$query_ catalogServices = "SELECT ID, photo, vignette, rubriquesID FROM services";

J’affiche la photo

<img src="../photos/<?php echo $row_catalogServices['photo']; ?>" name="image1" id="image1">

J’affiche les vignettes

echo '<th width="211" scope="col"><div align="center"><img src="../photos/vign /'.$valeur1.'"></div></th>';

Jusque là tout va bien.

Maintenant comment faire pour que lorsqu’on clique sur une des 16 vignettes la photos correspondante s’affiche ?

J’imagine que cela pourrais passer par l’url mais je bugge … HELP HELP !!!

<a href="mapage.php? <?php echo $row_ catalogServices['ID'];>"onClick="swapImage ?????

Merci
Citer ce message
moogli
le 14/11/2004 à 19:05
moogli
Salut,

pour commencer je pense que tu devrait regarder la fonction LIMIT de mysql pour ne selection que 16 tuples plutot que la base :)

ensuite tu peut faire ce que tu veut avec JS

je suppose que ta "grosse" image s'appelle grande (<img src="" name="grande" /> )
il faut que tu mette tes vignettes dans un lien
<a href="#" onclik="vignette(' ici tu met un element qui te permette de reconnaitre la vignette le champ vignette de la bdd par exemple');"><img src="vignette" /></a>

La focntion JS associer
<script language="javascript">
function vignette(lien) {
if (document.images) //permet de vérifier si le navigateur supporte cette méthode
{
//On définit le lien de la nouvelle image
src_img="lien vers ton image/" + lien;
//On change l'image grace a la méthode image document.images['grande"].src=src_img;
}
}
</script>

Pour faire mieux je te donne un exemple de code
<?php

//tu fait ta requete

?>

<img src="images/image_defaut.gif" />

<br>

<?php

//Affichage des vignette

echo '<table><tr>';

While ($data=mysql_fetch_object($req))

{

echo '<td><a href="#" onclik="vignette(',$data->vignette,');"><img src="./images/',$data->vignette,'" /></a></td>';

}

//Je te laisse gérer seule le multi colone (c'est dans les comment faire :) )

?>

<script laguage="javascript">

function vignette(lien) {

if (document.images) //permet de vérifier si le navigateur supporte cette méthode

 {

//On définit le lien de la nouvelle image

src_img="./images/" + lien;

//On change l'image grace a la méthode image                                document.images['grande"].src=src_img;

}

}

</script>


Voila le code opérationnel :). J'ai considéré que que $req contient la ressource SQL résultat de la requete. Le répertoire images contient tes vignettes et le champ vignette est le lien vers les vignettes (le nom de l'image quoi !).

tu peut changer la <a href></a> en <button></button> ce qui serait a mon avis un peut mieux (un peu de CSS pour faire disparaitre le fond et le tour est joué smiley

bonne lecture, bon esais

smiley
Il en faut peu pour être heureux !!!!!
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours