使用jQuery将图像与另一个图像叠加（wordpress）

Question

I have following markup:

<a href="#"><img src="sample-article-img.jpg" alt="Mri Machine" title="medical" class="alignright size-medium wp-image-3109"></a>

I need to overlay this with another image (enlarge button): images/article-zoom.png

Problem #1, I cannot change markup. Problem #1, I don't have class or id on <a>

My idea was to use jquery completely, drop zoom.png next to the first image (client side) put position absolute on it. But the problem here is that primary image will be floated, so my enlarge button will not move with it.

Any ideas?

Answer 1

You really haven't given a lot of detail to work with however as a starter adding a new image is fairly straighforward.

For demo will assume we are adding to any image with class that starts with wp-image . If only adding to a specific image will need more details about that image, and/or it's parent elements

Also need more detail about defining placement with regard to existing image. I am assuming center over existing image.

/* adjust accordingly*/
var buttonW = 120,/* button width*/
    buttonH = 40, /* button height*/
    $button = $('<img>', {src:  'drop zoom.png'});

var $image = $('img[class ^= "wp-image"]'),
    $image_link = $image.parent().css('position ', 'relative ');

var currImgPosition = $image.position(),
    currImgH = $image.height(),
    currImgW = $image.width();

var buttonCss = {
    position: 'absolute',
    zIndex : 10,
    width: buttonW,
    height: buttonH,
    top: currImgPosition.top + currImgH / 2 - buttonH / 2,
    left: currImgPosition.left + currImgW / 2 - buttonW / 2
}

$image_link.append( $button.css(buttonCss) );

EDIT: Some live html in jsfiddle.net with enough css to mimic existing elements would help also