[Resolu]Ouvrir une image dans la meme page en cliquant sur vignette

Bonjour -
Je réalise un site de bijoux fantaisie et j'alimente un tableau avec les vignettes des bijoux, le nom et le prix, dans un calque 'vignettes' positionné sur ma page. Le tout généré en php, car les infos proviennent d'une bdd.
Code "rempl_vignettes.php":

while($tab = mysql_fetch_array($valeur)) {
        $image='"/bracelets/thumbnails/'.$tab['vignette'].'"';
        $grandeimage='"/bracelets/pages/'.$tab['image'].'">';
        echo '<tr>';
       echo '<td width=90px>';
//       echo "<img src=".$image."/>";
		echo "<a href=".$grandeimage."<img src=".$image."></a>";
       echo '</td>';
       echo '<td width=180px>';
       echo $tab['nom'];
       echo '</td>';
      echo '<td width 60px>';
      echo $tab['prix'];
      echo '</td>';
       echo '</tr>'."\n";
//  echo $tab['nom'] . " : " .  $tab['image'];
//  echo "<br />";
    }
    echo '</table>'."\n";

Pas de pb jusque là.

En cliquant une vignette, je voudrais que l'image grand format correspondante s'affiche sur la même page dans un autre calque 'photo'. Pour info '$grandeimage' renvoie vers une page HTML qui ne comprend que la photo, mais elle s'ouvre dans une nouvelle fenetre. Comment la faire s'ouvrir dans ma balise photo ? J'ai essayé un target="photo" mais ca ne marche pas.

Ci dessous la portion de code de la page qui appelle le code php ci-dessus

div id="Corps" style="position: absolute; width: 1052px; height: 714px; z-index: 1; left: 279px; top: 156px">
	<div id="photo" style="position: absolute; width: 450px; height: 450px; z-index: 1; left: 472px; top: 145px">
	</div>
	<div id="vignettes" style="position: absolute; width: 380px; height: 710px; z-index: 1; left: 36px; top: -1px; overflow: auto;">
	<?php include('rempl_vignettes.php')?>	
	</div>
	<div id="calque1" style="position: absolute; width: 450px; height: 57px; z-index: 2; left: 471px; top: 57px; font-family: 'Segoe Script'; font-size: xx-large; color: #800080; text-align: left">
		<img alt="BRACELETS" height="50" src="images_fond/pg_bracelets.png" width="431" /></div>
	</div>

Merci !!
Modifié par odel (13 Jan 2010 - 22:22)

Pour ouvrir une image dans la même page (c'est-à-dire dans la même URL), il faut passer par du JavaScript (tout en offrant un lien vers l'image agrandie pour le cas où JavaScript est désactivé).

Merci - les ennuis commencent, je ne connais rien a Javascript.

Est ce que ce serait plus simple si je chargeais une autre page html dans mon calque plutôt qu'une image ? Toutes les galeries photo générées par Photoshop permettent d'avoir vignettes et image agrandie sur la même page sans javascript, non ?

Merci d'avance

Olivier

odel a écrit :
Toutes les galeries photo générées par Photoshop permettent d'avoir vignettes et image agrandie sur la même page sans javascript, non ?

Sur la même page avec la même URL, tu ne peux pas obtenir ce que tu veux sans JavaScript. Sans JavaScript, tu n'auras pas d'autre choix que d'envoyer un paramètre d'URL pour afficher l'image agrandie dans la même page, ce qui suppose de passer par un langage côté serveur (comme PHP).

Merci Victor -

ma page est générée en php de toute facon. Est ce que ta suggestion veut dire que j'appelle un module php qui actualise l'image quand je clique sur la vignette ?
Si oui, je suppose que ca déclenche un rechargement complet de la page? D'où l'intérêt de JS qui permet de changer l'image sans recharger toute la page ?
Pardon de ce bombardement de questions, je tâtonne un peu ...

Olivier

Bonjour,

Oui, la solution de Victor nécessiate le rechargement de la page.

Mais en JS, la fonction ne serait pas extrêment complexe pour faire ce que tu souhaite. L'idée c'est d'utiliser JS pour remplacer la source d'une image.

ps. : je déplace dans la salon JS

Je dois avouer (no surprise) que je rame un peu (beaucoup).

Je ne comprends pas où je dois appeler le script java; je genere son appel dans mon code php (appele en include sur ma page) ?

Je ne comprends pas non plus ce que je dois mettre dans le script (je suppose que le script doit venir au debut de ma page principale, pas de ma page de code php ?).

Toute piste de réflexion serait une grande aide. J'ai un gros livre 'Programmer en Java' de Claude Delannoy mais je ne sais pas trop où chercher ..

Merci d'avance

Olivier

Me revoila -
J'ai donc fait un petit script en javascript qui change l'image dans ma balise "photo". Ca marche très bien quand je met le chemin de l'image 'en dur' dans le script comme cela :

<script type="text/javascript">
function chgimg() {

document.getElementById("photo").innerHTML='<img alt="" src="bracelets/images/bracelet%20cristal%201.jpg" />';
}

La où ca coince, c'est pour passer le nom de l'image en paramètre à ma fonction js. Le chemin de l'image est dans une base MySQL et je l'obtiens par une requête PHP qui génère mes vignettes (je rappelle que le but est d'afficher des vignettes et en cliquant dessus d'afficher la grande image correspondante dans la meme page).

J'ai donc voulu écrire mon script sous la forme

<script type="text/javascript">
function chgimg($nom) {

document.getElementById("photo").innerHTML=$nom;
}

mais je n'arrive pas à le faire fonctionner. Soit js ne comprend pas que je passe un paramètre, soit la syntaxe du paramètre n'est pas bonne.


Ci dessous le bout de code PHP :

   $image='"/bracelets/thumbnails/'.$tab['vignette'].'"';       
	    $grandeimage='/bracelets/images/'.$tab['image'];
		$lien='<a href="javascript:chgimg('.$grandeimage.')">';
        echo '<tr>';
       echo '<td width=90px>';

		echo $lien."<img src=".$image."></a>";
       echo '</td>';

Est ce que mon problème se situe dans la syntaxe du paramètre ou dans la syntaxe du script ?Ou ailleurs ou les deux ?

Merci d'avance !!

Olivier
Modifié par odel (13 Jan 2010 - 10:01)

J'ai un peu simplifié en passant par la propriété document.image (evitant innerHTML) comme suit

	<script type="text/javascript">
var nom;
function chgimg(nom) {
var url=string.fromCharCode(39)+nom+string.fromCharCode(39);
document.getElementById('grandeimg').src=url;
}
</script>

J'ai cru comprendre que l'url devait etre donnée entre deux ' '; comme je n'arrive pas à créer le nom avec les quotes dans ma requete PHP, je génère en PHP un appel à la fonction javascript:chgimg(/repert/image.jpg) et j'essaie de créer les quotes dans la vaer url ci dessus (39 est le code ascii du ')
Pas plus de succès, est ce que j'ai mal déclaré une variable ?
Si je ne met pas de paramètre et que je mets directement dans le script le chemin d'une image entre quotes, ca marche donc le problème semble être au niveau du paramètre.

Tout conseil serait grandement apprécié, je rame pas mal ...
Merci

Olivier

Bonjour - j'ai finalement résolu mon problème d'affichage de changement d'image sur une même page en cliquant sur une vignette. Le problème venait effectivement d'un probleme de quotes et guillements. Le code resultant est

<script type="text/javascript">

function chgimg(nom) {
document.getElementById('grandeimg').src=nom;
}

et l'appel php se fait par

$image='"/bracelets/thumbnails/'.$tab['vignette'].'"';       
 $grandeimage="'"."/bracelets/images/".$tab['image']."'";
 $lien='<a href="javascript:chgimg('.$grandeimage.')">';                
 echo $lien."<img src=".$image."></a>";

dans une boucle pour créer les vignettes.

Heyoan -

J'avais volontairement ouvert un nouveau sujet et marqué le précédent comme résolu car j'avais au moins en partie réglé mon problème.

Ceci étant peu importe -

Je rappelle le script et l'appel php

<script type="text/javascript">  function chgimg(nom) { document.getElementById('grandeimg').src=nom; }

et l'appel php se fait par

$image='"/bracelets/thumbnails/'.$tab['vignette'].'"';         $grandeimage="'"."/bracelets/images/".$tab['image']."'";  
$lien='<a href="javascript:chgimg('.$grandeimage.')">';                 
echo $lien."<img src=".$image."></a>";

dans une boucle pour créer les vignettes.


Le code HTML généré (pour chaque image, je n'en met qu'un) est le suivant :

<td width="90">
<a href="javascript:chgimg('/bracelets/images/bracelet boules 1.jpg')">
<img src="/bracelets/thumbnails/bracelet boules 1.jpg"/>
</a>
</td>

Firebug me dit que

document.getElementById("grandeimg") is null
chgimg("/bracelets/images/bracelet boules 1.jpg")testgal.php (ligne 53)
javascript:chgimg('/bracelets/images/bracelet%20boules%201.jpg')()


grandeimg est la balise dans laquelle je place ma photo agrandie

Est ce que ca peut être lié à la présence d'espaces dans le nom des images ?

Merci encore

Olivier

odel a écrit :
grandeimg est la balise dans laquelle je place ma photo agrandie

En fait non : grandeimg est l'identifiant de l'élément (IMG je suppose) qui te sert à afficher l'image en changeant la valeur de src... et ça aurait été intéressant de nous en montrer le code.

odel a écrit :
Est ce que ca peut être lié à la présence d'espaces dans le nom des images ?

A priori non mais selon le type de serveur ça peut poser des problèmes (de même que les majuscules, accents, etc.) et c'est donc à éviter.
Modifié par Heyoan (13 Jan 2010 - 16:29)

Le problème vient de ce que getElementById cible un id alors que grandeimg est un name ! il faut donc rajouter id="grandeimg".

Bingo !!

Mille merci, c'est le probleme de procéder par tatonnement avant de maitriser toute la logique ...

Curieux que IE laisse passer, mais encore merci

Olivier

PS il est probable que je revienne avec d'autres questions de beotiens dans les prochains jours ..