Discussion :

[denis2web]

Bonjour,
Nouveau sur ce forum, merci d'avance de votre accueil !

J'essaye de réaliser une fonction qui redimensionne les images en fonctions de la tailles de l'écran, en leur conservant leur format homothétique, jusque-là ça va. mais lorsque j'applique ma fonction à une série d'image avec une classe, leur hauteur(par exemple) est bien redimensionnée, mais leur largeur est identique, lorsque j'utilise un id le rapport de redimensionnement est correct ? des idées ? ci-dessous la fonction et l'exemple :


http://www.architectureetbois.com/zo...ize6_haut.html

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
34
function redim(id, para){
 
    var $image = $(id);
    var l2 = $image.width();
    var h2 = $image.height();
 
 
 var l1 = $(window).width();
    var h1 = $(window).height();
 
if(l2>h2){
 var ratio=(h2/l2);  
 
l2=Math.ceil(l1-para);
h2=Math.ceil(l2*ratio);
 
      $image.css({
        'width': l2 + 'px',
        'height': h2 + 'px'
      });
  }
   else {
	    var ratio=(l2/h2);  
	   h2=Math.ceil(h1-para);
l2=Math.ceil(h2*ratio);
      $image.css({
       'width': l2 + 'px',
        'height': h2+ 'px'
 
      });
    }
 
 
}

[marcha]

Salut,

Pourrais-tu donner le code qui appel cette fonction stp ?

Je suspecte que $image contienne une liste d'image et non une seule.

Vérifie en affichant $image.length

[denis2web]

mon appel est pas très clair,
J'appel une classe que portent plusieurs image.

Code :

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

$.each($('.superbg2'), function(){ redim(".superbg2",100);});

je séche

[marcha]

Salut,

Je te propose de passer un objet jquery représentant une seule
image à ta fonction, modifie la signature ainsi:

Code :

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

1
2
 
function redim($image, para){

Ensuite pour l'appel,

Code :

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

1
2
3
4
 
$('.superbg2').each(function(){ 
    redim($(this),100);
});

Oublie pas de virer var $image au début de ta fonction redim.

Bien que le $ soit un caractère valide pour des noms de variables
en javascript, j'éviterai de l'utiliser. Cela porte à confusion avec php
et avec jquery.

[denis2web]

ça marche parfaitement lorsque la page est chargée, mais lorsque l'on redimensionne la fentre de l'écran les proportions ne restent pas constantes ???

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
<script>
function redim($image, para){
 
    var $l2 = $image.width();
    var $h2 = $image.height();
 
 
 $l1 = $(window).width();
   $h1 = $(window).height();
 
 
if($l2>$h2){
 ratio=($h2/$l2);  
 
$l2=Math.ceil($l1-para);
$h2=Math.ceil($l2*ratio);
 
      $image.css({
        'width': $l2 + 'px',
        'height': $h2 + 'px'
      });
  }
   else {
	    var ratio=($l2/$h2);  
	   $h2=Math.ceil($h1-para);
$l2=Math.ceil($h2*ratio);
      $image.css({
       'width': $l2 + 'px',
        'height': $h2+ 'px'
 
      });
    }
 
   $('div.texte').html(ratio+" "+$l2+" "+$h2); 
}
 
$(document).ready(function(){
 
/
$('.superbg2').each(function(){ 
    redim($(this),100);
}); 
 
$(window).resize(function() {
$('.superbg2').each(function(){ 
    redim($(this),100);
}); 
});
 
 
});
</script>

[marcha]

En appelant plusieurs fois ta fonction tu vas écraser la largeur / hauteur des images. Tu devrais conserver la valeur initiale et l'utiliser comme référence pour chaque calcul.

Tu peux stocker des informations associées à l'élément DOM avec data()

Par exemple pour height

Code :

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

1
2
3
4
5
 
if(typeof  $image.data('height') === 'undefined') {
   $image.data('height', $image.height()); // sauve le height initial
}
var height = $image.data('height'); // utilise toujours le height initial