0

メイン画像を掲載したページがあります。メイン画像は、写真によって高さと幅が変わります。画像の横に AddThis 共有ウィジェットもあります。1 つのサイズの画像に対して適切な間隔を設定しています。div画像サイズに応じて現在の間隔を流動的に維持するように AddThis を設定するにはどうすればよいですか?

ここにリンクがありますので、私が話していることの例を見ることができます. ページ上の黒いボックス (白で囲まれている) は、変更されるイメージを表しています。AddThis div は現在、高さを調整しますが、幅は調整しません。AddThis div の CSS は次のとおりです。

style="左: -110px; 上:-220px;" /* 現在の配置方法と現在の間隔が気に入っています。この間隔を維持する必要があります */

.addthis_floating_style{ 
        background: none repeat scroll 0 0 #000000 !important; 
        position: relative !important; 
}

AddThis がその間隔を画像の高さと幅に正しく調整するように、これを変更するにはどうすればよいですか?

これを行うもう 1 つの方法は、jQuery を使用して画像の高さと幅を読み取り、画像サイズに基づいて AddThis div の要素leftと要素を設定することです。topこれは動的に計算する必要があります。

最適な方法を使用します。JavaScriptは私の得意分野ではないので、例を挙げてください。

更新:別の質問を読み、提供された回答をが、問題が解決するかどうか疑問に思っていますが、正しく機能していないようです。試したコードは次のとおりです（注：現在使用しているのは上記のもので、以下のコードは私が試したものです）：

JS

var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
    my:        "right top",
    at:        "right bottom",
    of:        $j("#image-container"),
   collision: "fit"
})

HTML

<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
 300/addthis_widget.js">   
</script>
<!-- AddThis Button END -->
</div>


</div>
4

2 に答える 2

0

これが私がこれを行った方法ですが、私の画像はもはやページの中央に配置されていません。その1つに取り組んでいます...

<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;">
         <img src="/Images/test.jpg" alt="test" />
    </div>
    <div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
         <a class="addthis_button_facebook"></a>
         <a class="addthis_button_twitter"></a>
         <a class="addthis_button_email"></a>
         <a class="addthis_button_compact"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/
            addthis_widget.js"></script>
 </div>
    </div>
于 2012-05-24T02:17:33.337 に答える
0

次のように、画像タグに JavaScript を追加できます。

<img onload="onMyImageLoad(this)" />

そして、ドキュメントの場所の他の場所:

<script>

function onMyImageLoad( img )
{

var height = img.height

// now do something with this height value like change a 
// div's height or margin-top    

}

</script>
于 2012-05-21T19:34:46.827 に答える