Affichage Chrome plugin Thumbnail scroller

**devlm** · 13/09/2013, 11h42

bonjour,

j'utilise le plugin Thumbnail scroller.

http://manos.malihu.gr/jquery-thumbnail-scroller/

J'ai un affichage correct et un chargement correct sous Firefox.
J'ai un affiche correct et un chargement aléatorie sous IE.
J'ai un affichage correct et un chargement très restrictif sous Chrome.

En effet, le plugin donne au chargement une valeur width à mon container de 800px sous Firefox et de 310px sous Chrome, donc Chrome n'affiche pas toutes les images.

De quelle manière pourrait-on forcer le plugin à prendre en compte correctement le nombre d'images.

J'ai voulu forcer après le chargement de la page avec :

Code css :

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

$('.jTscrollerContainer').css('width', '1600');

Mais cela n'est plus dynamique et le container n'affiche plus les flèches de navigation.

Au lieu de mettre le script dans le header, je l'ai mis après le chargement des images avant /body.

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<script>
$(document).load(function () {
 
	//debut scroller
	$("#tS2").thumbnailScroller({ 
		scrollerType:"clickButtons", 
		scrollerOrientation:"horizontal", 
		scrollSpeed:2, 
		scrollEasing:"easeOutCirc", 
		scrollEasingAmount:600, 
		acceleration:4, 
		scrollSpeed:800, 
		noScrollCenterSpace:10, 
		autoScrolling:0, 
		autoScrollingSpeed:2000, 
		autoScrollingEasing:"easeInOutQuad", 
		autoScrollingDelay:500 
	});	
	//fin scroller
 
	//debut affichage image grand format
  var settings = {
    thumbListId: "tS2",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "ressources/images/loading.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.thumbListId).before(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          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);
    });	
	//debut affichage image grand format
});
</script>