variables qui ne varient pas

Version imprimable

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:

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' }); } }

20/05/2012, 14h16
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
20/05/2012, 20h51
denis2web

appel de fonction

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

Code:

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

je séche
21/05/2012, 09h03
marcha
Salut,

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

1 2 function redim($image, para){
Ensuite pour l'appel,
Code:

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.

Yes

:ccool: ç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:

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>

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:

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

22/05/2012, 11h20
denis2web

ça à l'air de marcher à merveille :) merci

Je continue à tester et mettrai le code à dispos, pour ceux que ça intéressent