What I want to do is find all images with a particular class name, and place an overlay image over them. My script thus far in 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 );
  });
});

The letimg is not added to the document (according to Firebug). The span element successfully wraps the original image though. Also, it does kinda work if I pass $(this) into the appendTo function, but then it's added inside the original image!

EDIT: markup is below. (The extra divs are a consequence of Joomla.)

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

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

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

After the script is run the second image is replaced with:

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

However, it should end up like this:

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

What I want to do is find all images with a particular class name, and place an overlay image over them. My script thus far in 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 );
  });
});

The letimg is not added to the document (according to Firebug). The span element successfully wraps the original image though. Also, it does kinda work if I pass $(this) into the appendTo function, but then it's added inside the original image!

EDIT: markup is below. (The extra divs are a consequence of Joomla.)

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

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

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

After the script is run the second image is replaced with:

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

However, it should end up like this:

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

• javascript
• jquery
• image
• overlay

Share Improve this question Follow edited May 5, 2009 at 16:42 DisgruntledGoat asked May 5, 2009 at 15:21 DisgruntledGoatDisgruntledGoat 72.7k7070 gold badges212212 silver badges291291 bronze badges 1

• to see what's happening we'll need to see the markup. – John Boker Commented May 5, 2009 at 15:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This worked for me:

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);
    });
});

As a side note. I took out a couple of your variables, and would say that you could probably continue to remove others (put the img tag directly into the after, the wrapper directly into the wrap function, etc.). Not a huge deal either way though.

I'm not sure that you need the wrapper at all.

Try something like this.

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());
    });
  });