Problem adding image overlay (jQuery)
What I want to do is find all images with a specific class name and place the proper image above them. My script so 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 );
});
});
letimg
is not added to the document (according to Firebug). The element span
successfully wraps the original image. Also, it works if I pass $(this)
to a function appendTo
, but then it's added to the original image!
EDIT: the markup is below. (The extra divs are from Joomla.)
<div class="module-contactus">
<div><div><div>
<img src="/contact1.jpg" />
<img class="let" src="/contact2.jpg" />
</div></div></div>
</div>
After running the script, 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>
source to share
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 my variables and would say that you can probably continue removing others (put the img tag directly in the after, wrapper directly in the wrapper function, etc.). Either way, this is not a big deal.
source to share
I'm not sure if you need a shell 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());
});
});
source to share