11549 sujets

JavaScript, DOM et API Web HTML5

Bonjours à tous !

J'ai suivi un tuto sur Alsacréation pour créer une galerie d'image en Jquery. Elle fonctionne parfaitement bien mais uniquement sous Firefox sous Chrome et Safari mes images grands format ne s'affichent pas...
Lorsque je regarde l'outil de développements de Chrome je remarque qu'il ne prends pas en compte la div qui contient les images grands format...
Sauriez-vous pourquoi cette div n'est pas pris en compte sous Chrome et Safari ?

Voila un lien vers la page du site qui contient ma galerie: http://www.astral-lyon.com/WordPressAstral/?main=Magasin

Voila mon code Javascript:

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "wp-content/themes/Astral/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.thumbListId).after(
    $(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);
    });

});


Merci d'avance !

Antoine.
Modifié par antoine2011 (20 Aug 2013 - 11:16)
Bon j'arrive pas à faire du live edit donc ca aide pas. Mais effectivement, #viewer n'est pas créé dans Chrome, donc il doit y avoir un problème avec les lignes $("#"+settings.thumbListId).after( & suivantes. Je vois rien de louche, remplaces peut être les document.createElement par des creations via jQuery ($('<p>') pour créer un élément p). Sinon pas trop d'idées, si personne d'autre n'en a tu peux essayer de créer un jsfiddle avec le problème en version simplifié, voir ce que ca donne — et ca sera plus simple pour nous de jouer avec.