Question

I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don’t want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.

The problem is, all the images are of various sizes, everything from 150×100 to 1980×1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.

Now, creating this slideshow panel in any other programming language would be easy. I’m suffering here in javascript though, because I simply can’t find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()

I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())

Is there any way of measuring their width?
Is there an easier way of doing this?

Any help appreciated

Answer 1

I’m guessing you’re trying to get the widths when the document is ready, instead of after the images have loaded.

Try placing the code that gets the outerWidth() in $(window).load().

$(window).load(function() {
    //get the image widths
});