jQuery UI Mobile, je souhaiterais avoir un redimensionnement automatique des images

Version imprimable

21/04/2011, 15h49
Soull

jQuery UI Mobile, je souhaiterais avoir un redimensionnement automatique des images

Bonjour,

Sur mon site mobile, fais avec JqueryMobile, je souhaiterais avoir un redimensionnement automatique des images si elles sont trop grande par rapport à la taille de l'écran.

Je voulais savoir si vous connaissiez un plugin pour faire cela.

Merci.
21/04/2011, 16h42
Bovino

http://lmgtfy.com/?q=jquery+redimens...+d%27image&l=1
21/04/2011, 19h11
Soull

Merci mais j'ai déjà chercher, je cherche un plug in qui redimensionne TOUTES les images présente dans la page (je mettrais la fonction dans le header), j'aimerais savoir si ça existe car les 1er plugins sur google ne font pas vraiment ça :x

En faite le contenu sort d'une BDD, il y a déjà des dimension misent dedans pour la version normal, je cherche donc à les redimensionner seulement pour la partie mobile sans toucher au contenu de la BDD, sinon il y aurais un soucis avec le site normal.

Le gros problème est de garder les "bonnes" dimension (ratio) avec une variable qui change beaucoup: la taille d'écran.

J'avais bidouillé un script js pour faire ça mais sa ne fonctionne que sur mon téléphone et pas tout le temps. Par exemple, j'ai un sgs, les autres téléphones que je voie, c'est des iphones, ipads & hd2. Sur les autres c'est moche car on a pas la même définition d'écran, ni le même ratio.

J'espère que mon problème est plus clair.
21/04/2011, 19h25
SpaceFrog

Une invention fantastique : le coefficient
connu autrefois sous la dénomination de règle de trois

1024 -> 1

autre -> ?

1024 x ? = autre x 1
? = autre/1024

applique le coefficient ainsi obtenu aux deux dimensions de ton image ...

Pour tomber sur un script du genre je suppose:

Code:

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
$(document).ready(function() {
	var ecran_client = screen.width;
	var ecran_client2 = screen.height;
	var taille_max = 0.5*ecran_client;
	var ratio = ecran_client/taille_max;
	if ( ((ecran_client<=960) && (ecran_client2<=640)) || ((ecran_client2<=960) && (ecran_client<=640)) ) {
		if(ecran_client>ecran_client2)
		{
			if( ($("img").attr('width')>taille_max) || $("img").attr('height')>taille_max)
			{
				$("img").attr('width', taille_max);
				ecran_client2 = ecran_client2 / ratio;
				$("img").attr('height', ecran_client2);
			}
		}
		else
		{
			if( ($("img").attr('width')>taille_max) || $("img").attr('height')>taille_max)
			{
				$("img").attr('height', taille_max);
				ecran_client2 = ecran_client2 / ratio;
				$("img").attr('width', ecran_client2);
			}
		}
	}
});

Mais sa ne fonctionne pas, seule les images avec des dimensions en % sont redimensionner, pas celles qui sortent en px de la bdd...

22/04/2011, 22h43
danielhagnoul
Bonsoir

Un plugin ! jQuery UI Mobile est seulement en version alpha 4.1 !

Mais en utilisant mon ami Google, je viens de trouver en quelques minutes, les liens ci-dessous, je ne sais pas s'ils répondent à votre question.
- http://forum.jquery.com/topic/mobile-image-viewer
- http://tympanus.net/codrops/2010/05/...llery-web-app/
À toutes fins utiles, la version française (non officielle) de la documentation UI Mobile alpha 4 est ici : http://jquery-mobile.touraineverte.com/

Et la version officielle est ici : http://jquerymobile.com/
24/04/2011, 20h17
Soull

Bonsoir,

Merci mais c'est pour faire une visionneuse, je souhaite redimensionner les images afficher, je vais vous donner l'url du site ce sera plus simple:
- normal: http://lti-informatique.fr/
- mobile: http://mob.lti-informatique.fr/

Le contenu sort de la même BDD, il faut donc en js changer la taille des images via un pourcentage mais avec mon script ça marche au petit bonheur la chance, en ce moment, j'ai fait un css spécial mais sa ne rend bien que sur mon portable étant donner que les dimensions de l'écran / définition ne sont pas les mêmes partout (ex: 4/3 800*600 et 16/9 800*600 ne rende pas du tout pareil).

C'est surement mal expliquer mais si vous regarder les news, vous verrez le problème sur le site mobile (pas avec le pc bien sur), la je n'ai rien toucher.

Pour le moment sa marche plus ou moins sur les 4pouces mais sur ipad c'est limite, et j'imagine pas avec une "brique" nokia. Vous pouvez déjà remarqué que les images sont déformés.

Je ne sais vraiment pas quoi faire :x
24/04/2011, 23h38
danielhagnoul

Bonsoir

Je ne sais pas si mon petit test pourra vous aider, mais voici comment cela fonctionne.

[Edit 2011-05-01T09:35:00.000+02:00 par danielhagnoul]

J'ai supprimé le texte et le code ci-dessous, car il comportait une bogue et il était devenu obsolète par rapport à : http://www.developpez.net/forums/d89...y/#post5936978
25/04/2011, 19h30
Soull

Merci, je pense pouvoir réussir avec ce script.