Question

I want to create a horizontal scroll gallery containing images.

i.e.

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

The img’s are a percentage height/auto width. The li also have a margin-right for spacing.

Because of this the width I need the UL to be changes when the window is resized/loaded.

I found this previous post which looked promising but cannot get it to work at all in this context.

Any ideas/help for how to generate the UL width when the images resize would be amazing!

Answer 1

Ok,

html minor corrections to your example code

<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
});