Discussion :

[croco83]

Bonjour,

J'ai un probleme avec mon code javascript sous IE8. Il ne m'affiche pas l'image à la hauteur désirée.
Voici le 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
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
55
56
57
58
59
60
 
jQuery(function($){
 
  var settings = {
    imgViewerId: "viewer",
    thumbListId: "thumbs",
	place: "place",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "images/loader.gif"
  };
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"),
      firstThumbLink = thumbLinks.eq(0),
      highlight = function(elt){
        thumbLinks.removeClass(settings.activeClass).removeAttr("title");
        elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
      },
      loader = $(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      });
 
  highlight(firstThumbLink);
 
 
 
 $("#"+settings.place).after(
    $('p#viewer')
      .append(
        $(document.createElement("img")).attr({
          alt: "",
		  height: "237px",
          src: firstThumbLink.attr("href")
        })
      )
  );
 
  var imgViewer = $("#"+settings.imgViewerId),
      bigPic = imgViewer.children("img");
 
  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
          target = $this.attr("href");
 
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
        })
        .attr("src",target);
    });
 
});

La hauteur à 237 px est bien prise en compte sous IE9, Firefox... mais pas sous IE8. Si quelqu'un a une solution, ca m'arrangerait beaucoup car je ne suis pas une experte en javascript.
Par avance, merci.

[SpaceFrog]

1) p#viewer

un id est unique sur une page p devant est inutile voire nocif vu que jquery va d'abord recupérer les p avant de teste l'id
=> id seul est plus performant

2) passe par le css pour le height

Code :

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

1
2
3
4
 $('#viewer')
      .append($("<img/>").attr({
          alt: "",
          src: firstThumbLink.attr("href")}).css({"height":"237px"})

[croco83]

Merci beaucoup pour ta réponse. Je viens de modifier le code comme tu me l'as suggéré. Donc maintenant sous IE8 la hauteur de mon image est bien modifié mais pas la largeur. En fait j'aurai aimé que comme sous IE9 et firefox..., qu'en fixant la hauteur, ca redimensionne aussi la largeur. Auriez vous une solution?

MErci d'avance.

[croco83]

J'ai oublié SpaceFrog, j'ai enlever le p#viewer mais je peux laisser l'appel à mon id dans un p sur la page html, ca ne me posera pas de problème?

[SpaceFrog]

Code :

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

width:auto

j'ai enlever le p#viewer mais je peux laisser l'appel à mon id dans un p sur la page html, ca ne me posera pas de problème?

pas compris

[croco83]

Dans page html, j'ai le code suivant :

Code :

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

1
2
 
<p id="viewer"></p>

Dans mon javascript, tu m'as dit d'enlever le p devant #viewer. Donc je voulais savoir si dans ma page html, je pouvais laisser le code ci dessus ou s'il fallait que je mette l'appel à mon id="viewer" dans une autre balise que <p>?

Ensuite le

width:auto

, je l'integre comment dans ca:

Code :

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

1
2
 
src: firstThumbLink.attr("href")}).css({"height":"237px"})

MAis questions sont peut etre bête mais je ne maitrise pas du tout ce code.