récupération du title en javascript

Question

salut à tous, voilà j'ai un petit problème au niveau de mon javascript, j'ai un code qui affiche la taille réelle d'une image après un clic sur la miniature sauf que j'aimerai que le "title" de la miniature soit transféré à l'image grand format, je suis nul en javascript et j'ai chercher toute la journée pour trouvé une solution mais sans grand succès 
le code est : 
jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "galerie/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: "",
  title:"",
          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 pour votre aide :)

PetoleTeam · Answer

Bonjour,
le mieux pour que l'on puisse te répondre est de nous mettre le code HTML, pas 35217 lignes
 mais l'essentiel pour que l'on voit la structure.
Il est important également que tu nous dises où est le title sue tu veux récupérer, peut être dans la balise d'ailleurs.

;O)

slashf · Answer

salut petoleteam je sens que tu vas me sauvé encore une fois lol voici le code html :

[ " /> ]

voilà, j'ai posté l'essentiel :)

PetoleTeam · Answer

j'avais demandé le HTML pas le PHP que je parle très mal, mais bon j'arrive à le lire
Le title est donc issu de la balise IMG, mais le script ci dessus le modifie, donc première chose à faire supprimer cette modification

var thumbLinks = $("#"+settings.thumbListId).find("a"),
    firstThumbLink = thumbLinks.eq(0),
    highlight = function(elt){
      thumbLinks.removeClass(settings.activeClass).removeAttr("title");
      //-- suppression de cette ligne
      //elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
      },
      loader = $(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      });

ensuite il faut récupérer le title contenu dans l'image et le mettre dans un SPAN par exemple
  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this  = $(this),
          target = $this.attr("href"),
          //-- Recup; du tittle de l'image 
          titre  = $this.children("img").attr("title");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
          //-- Ajout dans un SPAN du viewer
          imgViewer.append($(document.createElement("span")).html( titre))
        })
        .attr("src",target);
    });
n'oublions pas l'initialisation qu'il faut mettre à jour
  $("#"+settings.thumbListId).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({ alt: "", src: firstThumbLink.attr("href")}),
        //-- Recup du title et ajout dans un SPAN
        $(document.createElement("span")).html( firstThumbLink.children("img").attr("title"))
  ));
voila qui devrait fonctionner, il reste peut être à mettre en forme via le CSS.
;O)

Récupération du title en javascript

3 réponses

Votre réponse

Discussions similaires