Reputation: 72580
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
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
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