CODEWITHSUNDEEP
javascriptjqueryimageoverlay
DisgruntledGoat
DisgruntledGoat

Reputation: 72580

Problem adding image overlay (jQuery)

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>

Upvotes: 1

Views: 4322

Answers (2)

AdamB
AdamB

Reputation: 9110

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.

Upvotes: 6

bendewey
bendewey

Reputation: 40265

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

Upvotes: 0

Related Questions