0

次のマークアップがあります。

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

これを別の画像でオーバーレイする必要があります（拡大ボタン）：images/article-zoom.png

問題 #1、マークアップを変更できません。問題＃1、クラスまたはIDがありません<a>

私の考えは、jqueryを完全に使用し、最初の画像（クライアント側）の隣にzoom.pngをドロップし、絶対位置を配置することでした。しかし、ここでの問題は、プライマリ イメージがフローティングされるため、拡大ボタンが一緒に移動しないことです。

何か案は？

4

1 に答える 1

0

あなたは実際に作業するための多くの詳細を与えていませんが、スターターとして新しい画像を追加することはかなり簡単です。

デモでは、で始まるクラスの画像に追加することを前提としていwp-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) );

編集：既存の要素を模倣するのに十分なcssを備えたjsfiddle.netの一部のライブHTMLも役立ちます

于 2013-01-19T21:15:02.327 に答える