Question

I’m trying to get the dimensions (width) of image elements which are scaled using percentage values by css.

Here is the code:

<div id="wrapper">
                    <ul id="gallery_content">
                        <li><img src="images/thumbs/1.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
        </ul>
    </div>

and here the css:

ul#gallery_content li{ background:#FFF; list-style:none; display:inline; float:left; margin:0; height: 100%;}
ul#gallery_content li img { width:auto; height:100%; width:auto; }

I’m trying to get the actual width of the wrapper-Element (total of all image-widths).
When accessing them in a

$(document).ready(
    galItems = $('#gallery_content').children().children();
    galSize = 0;
    $.each(galItems, function(index, item){
        galSize += parseInt(item.width)
    });     
)

It gets all the image elements but does not get the calculated width.
Is there any chance to get the actual rendered width of the images with jquery?

Answer 1

Have you tried .width() as a function?

http://api.jquery.com/width/

galSize += parseInt(item.width());

Edit after the question was solved:

Turns out the problem actually was that the javascript was executed before the the page and the images was fully loaded.

This was solved by changing $(document).ready() to $(window).load().