images d'emballage avec <a> problème jQuery

Question

Salut à tous,

J'ai un tas d'images que je dois envelopper dans une étiquette et ajouter à une référence tag de l'image « + grand » plus l'utilisation lint d'image comme titre pour lien.

Les problèmes que j'ai ici sont, 1) Les images sont enveloppant avec cette même href de la première image et l'attribut de titre ne montre pas.

Ceci est mon jQuery

$(document).ready(function(){ 
     var ImgLink = $('.gallery img'); 

     var ImgTitle = ImgLink.attr('src'); 

     var ImgDes = ImgLink.attr('alt') 

     ImgLink.each(function(){ 
           $(this).wrap($('<a></a>') 
              .attr('href', ImgTitle.replace(/\./, 'big.'), 'title'.ImgDes) 
              )}) 

}) 

Ceci est mon HTML

<img alt="some alt" src="1.jpg"/></a> 
<img alt="some other alt" src="2.jpg"/></a> 
<img alt="and another alt" src="3jpg"/></a> 

Et ceci est le résultat

<a href="1big.jpg"><img alt="some alt" src="1.jpg"/></a> 
<a href="1big.jpg"><img alt="some other alt" src="2.jpg"/></a> 
<a href="1big.jpg"><img alt="and another alt" src="3.jpg"/></a> 

Merci pour votre aide à l'avance

Answer 1

Vous besoin d'itérer ove r les images et effectuez l'action de créer le <a> avec chacun, car vous avez besoin de src qui est spécifique à l'image dans chaque cas. En supposant que votre fichier image anmes sont dans le format spécifié dans la question

$('img').each(function() { 
    var $this = $(this); 
    var href = this.src.replace(/\./, "big."); 
    var title = $this.attr('alt'); 
    $this.wrap('<a href="' + href + '" title="' + title + '"></a>'); 
}); 

ou en utilisant votre code d'origine,

$(document).ready(function(){ 
     var ImgLink = $('.gallery img'); 

     ImgLink.each(function(){ 
      var $this = $(this); 
      var ImgTitle = $this.attr('src'); 
      var ImgDes = $this.attr('alt'); 
      var anchor = $('<a href="' + ImgTitle.replace(/\./, "big.") + '" title="' + ImgDes + '"></a>'); 
      $this.wrap(anchor); 
     }); 
})