Listbox afficher une image

**jojo86** · 06/07/2011, 12h54

Bonjour,
J'ai un formulaire php qui parcours un repertoire photos du serveur et liste les noms des images dans une listbox.

Losrqu'on clic sur un nom de la listbox, je voudrais que l'image correspondant au nom apparaisse dans la page... Je ne trouve rien a se sujet...
Visiblement je dois chercher a faire sa en javascript...

En java j'arrive a faire apparaitre un message lorsqu'on clic sur un element de la liste, mais je n'arrive pas a afficher l'image...

Merci de votre aide!

**Benjamin Delespierre** · 06/07/2011, 13h23

Hello

Cette question est relative au forum JavaScript.

Voici une solution simple avec jQuery:

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
 
<select id="images">
  <option value="images/01.jpg">01.jpg</option>
  <option value="images/02.jpg">02.jpg</option>
  <option value="images/03.jpg">03.jpg</option>
</select>
<div id="img_placeholder"></div>
<script type="text/javascript">
<!--
$(function () {
  $('#images').change(function () {
    $('#img_placeholder').html($('<img>').attr('src', $(this).val()));
  });
});
//-->
</script>

Enjoy.

**jojo86** · 06/07/2011, 19h40

Merci, mais l'image n'apparaît pas dans ma page...

**Benjamin Delespierre** · 06/07/2011, 21h32

Peux-tu être un peu plus explicite ?

**jojo86** · 06/07/2011, 21h42

Tu as essayé toi le script? (peut être une fausse manip de ma part mais j'ai vérifié plusieurs fois...)
La liste apparait, mais pas d'image à l'écran lorsque je selectionne un item...

Regarde : http://georges86.free.fr/test/Ajoute...TestImage.html

**ska_root** · 06/07/2011, 22h05

Bonjour,

Envoyé par Benjamin Delespierre

Voici une solution simple avec jQuery:

Pour exécuter ce script, il faut télécharger et inclure la librairie javascript JQuery dans ton html. Sinon, il existe aussi des tutos...

JQuery :
http://docs.jquery.com/Downloading_j...ownload_jQuery

Tutos DVP :
http://javascript.developpez.com/cou...meworks#jquery

**jojo86** · 06/07/2011, 22h07

Ah d'accord !!!
Hé Hé ! effectivement... Sans installer le bazard !
Merci je vais regarder,
J'ai trouvé un code qui peut faire ça qu'en pensez-vous et quel est l'avantage de jQuery par rapport à ce code? :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<form name="avatar">
  <select name="avatar" onchange="document.getElementById('monimageavecid').src=this.value;"> 
      <option value="avatar1.jpg">Avatar1</option>
      <option value="avatar2.jpg">Avatar2</option>
      <option value="avatar3.jpg">Avatar3</option>
      <option value="avatar4.jpg">Avatar4</option>
      <option value="avatar5.jpg">Avatar5</option>
      <option value="avatar6.jpg">Avatar6</option>  
   </select>
   <img scr="javascript:type_avatar(this.value);">
</form>

Merci !

**jojo86** · 06/07/2011, 22h21

Merci ! j'ai réussi !
Il est possible de redimensionner l'image automatiquement pour que toutes les images s'affiche dans le même cadre?

Encore merci !

**ska_root** · 06/07/2011, 22h46

en fait, les librairies javascript permettent beaucoup de chose intéressantes si tu veux utiliser beaucoup Javascript ou Ajax (fallait bien parler de PHP un moment donné...)

mais pour ton exemple, tu pouvais faire plus simple aussi, sans aucune librairie.

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
 
<html>	
<head>
		<title>test</title>
		<script type="text/javascript">
		<!--
 
		// fix pour compatibilite IE / Firefox 
		if(!document.getElementById) document.getElementById=function (id) {
 			return eval("document.all."+id);
 		}
 
 
		function view_image(el) {
			var img_placeholder= document.getElementById('img_placeholder');
			img_placeholder.src=(el.options[el.options.selectedIndex].value);
		}
 
		//-->
		</script>
</head>
<body>
 
<select id="images" onChange="view_image(this)">
<option value="images/01.jpg">01.jpg</option>
<option value="images/02.jpg">02.jpg</option>
<option value="images/03.jpg">03.jpg</option>	
</select>
 
<img id="img_placeholder" src="images/01.jpg" />
</body>
 
</html>

edit: désolé, je n'avais pas vu ton post précédent qui est sensiblement la même chose (sauf que cela ne marche pas sur IE7 et inférieur

)

pour le redimensionnement, tu peux forcer la balise image (mais le poids de l'image reste le même et c'est pas génial si l'image est de type portrait par exemple, a moins qu'elles le soient toutes évidemment...)

Code :

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

<img id="img_placeholder" src="images/01.jpg" width="150"/>

**laurentSc** · 06/07/2011, 23h07

Pour que toutes les images soient à la même taille et que certaines ne deviennent pas floues, je serais d'avis de récupérer la largeur de chacune (avec la fonction PHP getimagesize), et de mettre toutes les images à la largeur de la plus petite d'entre elles (si on réduit, ça ne devient pas flou).

**Benjamin Delespierre** · 07/07/2011, 07h52

Il y a un plugin jQuery pour faire ça: jquery.imgscale.js (http://plugins.jquery.com/plugin-tags/image-resize)

**laurentSc** · 07/07/2011, 09h09

Il y a un plugin jQuery pour faire ça

Je ne vois pas l'intérêt (à moins d'avoir loupé un truc), et de plus, on risque de rendre flou.

**Benjamin Delespierre** · 07/07/2011, 10h25

Ce plugin te permet de redimensionner une image coté utilisateur sans (grosse) perte de qualité. Bien évidement, il est toujours impossible d'agrandir une image sans perte. Au moins avec cette solution PHP n'a pas à calculer les dimensions l'image en question: JavaScript s'en charge.

**laurentSc** · 07/07/2011, 10h54

Mais c'est possible sans plugin :

Code :

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

1
2
3
4
<img src="..." name="img" />
<script type="text/javascript">
alert('width='+img.width);
</script>

...Comme il est évident que tu connais, le plugin apporte autre chose, mais quoi ?

**Benjamin Delespierre** · 07/07/2011, 11h29

Le plugin apporte entre autres la préservation du ratio width/height (comme son nom le suggère, il s'agit d'une mise à l'échelle et non d'un redimensionnement).

Voici un cas d'utilisation:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
        function viewLargerImage( $link ) {
		var src = $link.siblings( "img" ).attr('src'),
		$img = $('<div><img src="' + src + '" /></div>');
		$img.dialog({
			modal: true,
			width: 500,
			height: 500,
			resizable: false,
			title: src
		}).css('text-align', 'center').find('img').imgscale({scale: 'fit'});
	}

L'image dans la boite de dialogue s'adapte à sa taille avec préservation du ratio.

Page du plugin: http://imgscale.kjmeath.com/

**ska_root** · 07/07/2011, 11h33

Envoyé par laurentSc

Mais c'est possible sans plugin...Comme il est évident que tu connais, le plugin apporte autre chose, mais quoi ?

on parle de redimensionnement d'image tout en gardant une résolution adaptée.

Si tu prends une image carrée de 15px que tu forces la propriété width en HTML ou en Javascript à 150px, ton image aura un rendu tout pourri (pixelisé comme on dit)

Le plugin en question te permet de modifier à la volée les propriétés, dont la taille, de ton image afin qu'elle soit correcte peu importe la taille que tu veux en obtenir.

pour résumer :
avec PHP et la librairie GD : le serveur travaille l'image avant de l'envoyer, l'image est propre à l'affichage, le poids des images est réduit si l'image est réduite.
avec JQuery et son plugin : le navigateur doit faire le travail en javascript, tu dépend donc des ressources du poste client, l'image est propre à l'affichage mais le poids des images n'est pas diminué (car elles arrivent entières au navigateur).
avec Javascript ou CSS : le navigateur fait le travail en forçant l'affichage de l'image qui devient moche si la résolution est différente. le poids des images est inchangé.

**jojo86** · 07/07/2011, 14h54

Bonjour, et merci de votre aide.
Je n'arrive pas à faire marcher le code...
J'ai intégré le plugin imgscale mais je n'arrive pas à faire apparaitre l'image...

Je récupère le liens de l'image issu de ma listbox... Mais c'est tout...
Le code d'origine c'est ça :

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
 
<select id="images">
  <option value="images/01.jpg">01.jpg</option>
  <option value="images/02.jpg">02.jpg</option>
  <option value="images/03.jpg">03.jpg</option>
</select>
<div id="img_placeholder"></div>
<script type="text/javascript">
<!--
$(function () {
  $('#images').change(function () {
    $('#img_placeholder').html($('<img>').attr('src', $(this).val()));
  });
});
//-->
</script>

Voici mon code :

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
 
$(function () {
  $('#ListeImages').change(function () {
	$image = $(this).val();
	var src = $image.siblings( "img" ).attr('src'),
	$img = $('<div><img src="' + src + '" /></div>');
	$img.dialog({
		modal: true,
		width: 100,
		height: 10,
		resizable: false,
		title: src
	}).css('text-align', 'center').find('img').imgscale({scale: 'fit'});
 
  });
});

Je comprends pas grand chose en faite...

**Benjamin Delespierre** · 07/07/2011, 15h19

Le code que j'ai posté n'était là que pour fournir un exemple de cas d'utilisation de imgscale. Je n'ai jamais dit que tu devais le prendre tel quel et pour cause, il utilise la jQuery UI !

Dans ton cas, fais déjà s'afficher les images dans le placeholder et ensuite on redimensionnera.

**jojo86** · 07/07/2011, 15h21

J'arrive déjà à faire afficher les images dans le placeHolder, mais je l'ai changé de nom...
Je veux maintenant redimensionner l'image contenue dans le Div placeHolder (dans ton exemple).

**Benjamin Delespierre** · 07/07/2011, 15h42

Ok. Mets une taille largeur / hauteur fixe au placeholder et fais:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
<!--
$(function () {
  $('#images').change(function () {
    var img;
    $('#img_placeholder').html(
      img = ('<img>').attr('src', $(this).val())
    );
    img.imgscale({scale: 'fit'});
  });
});
//-->
</script>

Assures-toi que le plugin imgscale est bien chargé.

Le chainage habituel avec jQuery est ici impossible car imgscale ne renvoie pas l'élément.

Listbox afficher une image

Langage PHP

Discussions similaires

Partager

Partager