0

画像を含む横スクロール ギャラリーを作成したいと考えています。

すなわち

<ul class='fluid_ul'>
<li id='fluid_li'>
<img>
</li>
<li... etc etc
</ul>

img はパーセンテージの高さ/自動幅です。またli、間隔のための右マージンもあります。

このため、ウィンドウのサイズ変更/ロード時に UL を変更する必要がある幅です。

この以前の投稿は有望に見えましたが、このコンテキストではまったく機能しませんでした。

画像のサイズが変更されたときに UL 幅を生成する方法についてのアイデア/ヘルプは素晴らしいでしょう!

4

1 に答える 1

1

Ok、

サンプルコードのhtml のマイナーな修正

<ul id='fluid_ul'>
    <li><img src=".." /></li>
    <li><img src="..." /></li>
</ul>

jquery

$(window).load(function(){ // once the page has loaded (including images)
    var totalWidth = 0; // a variable to hold the total width of the li elements
    $('#fluid_ul').children().each(function(){ // for each li
        totalWidth += $(this).outerWidth(); // add its width to the total
    }).end().css({width:totalWidth}); // finally revert selection to ul and apply total
});
于 2012-04-09T15:25:07.260 に答える