Problème lors de l'ajout d'une superposition d'image (jQuery)

Question

Ce que je veux faire est de trouver toutes les images avec un nom de classe particulier, et de placer une image de recouvrement sur elles. Mon script jusqu'à présent dans jQuery 1.2.6:

jQuery.noConflict(); 
jQuery(document).ready(function($) { 
    var module = $(".module-contactus div div div"); 
    module.find("img.let").each(function() { 
    var iWidth = $(this).width(); 
    var iHeight = $(this).height(); 
    var letimg = $('<img src="/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />'); 
    var wrapper = $('<span style="position: relative; display: inline-block;"></span>'); 
    $(this).wrap(wrapper); 
    letimg.appendTo(wrapper); 
    }); 
}); 

Le letimg n'est pas ajouté au document (selon Firebug). L'élément span encapsule l'image originale avec succès. En outre, il fonctionne un peu si je passe $(this) dans la fonction appendTo, mais alors il est ajouté à l'intérieur de l'image originale!

EDIT: le balisage est ci-dessous. (Les divs supplémentaires sont une conséquence de Joomla.)

<div class="module-contactus"> 
<div><div><div> 

<img src="/contact1.jpg" /> 
<img class="let" src="/contact2.jpg" /> 

</div></div></div> 
</div> 

Après le script est exécuté la deuxième image est remplacée par:

<span style="position: relative; display: inline-block;"> 
<img class="let" src="/contact2.jpg" /> 
</span> 

Cependant, il devrait finir comme ça:

<span style="position: relative; display: inline-block;"> 
<img class="let" src="/contact2.jpg" /> 
<img src="/LET.png" style="..." /> 
</span> 

Answer 1

Cela a fonctionné pour moi:

jQuery.noConflict(); 
jQuery(function($) { 
    $("img.let", $(".module-contactus div div div")).each(function() { 
     var iWidth = $(this).width(); 
     var iHeight = $(this).height(); 
     var letimg = '<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />'; 
     var wrapper = $('<span style="position: relative; display: inline-block;"></span>'); 
     $(this).wrap(wrapper).after(letimg); 
    }); 
}); 

Comme une note de côté. J'ai enlevé quelques-unes de vos variables, et je dirais que vous pourriez probablement continuer à en supprimer d'autres (mettez le tag img directement dans l'after, le wrapper directement dans la fonction wrap, etc.). Ce n'est pas un gros problème non plus.

Answer 2

Je ne suis pas sûr que vous ayez besoin de l'emballage du tout.

Essayez quelque chose comme ceci.

jQuery(document).ready(function($) { 
    var module = $(".module-contactus div div div"); 
    module.find("img.let").each(function() {     
     var iWidth = $(this).width();     
     var iHeight = $(this).height();     
     var letimg = $('<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');     
     $(this).before(letimg);   
     alert(module.html()); 
    }); 
    });