bx slider - get height and width of the images

Question

I'm trying to get the height and width of the images in the bx slider slides, the problem is that each of them (without the loaded first one) returns zero.

Here is a sample of my code:

$('.slides > li > img').each(function(){

    var $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);

})

I also tried putting them in a on load function like this:

$('.slides > li > img').each(function(){


    $this.on('load', function(){

    var $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);

 }
})

... but it's still not working =\

Any help will be greatly appreciated!

Edit:

Here's a fiddle: http://jsfiddle.net/a3BUA/1/

Edit 2:

I now see that when the mode is set to fade - the rest of the <li> elements are set to display:none. Is there a way to get the image dimensions despite of this?

Answer 1

The slider hides all but the first image, and hidden images have no dimensions so you have to use the source (literally) to create a new image object, and then get the dimensions from that once the image has loaded

$(document).ready(function () {
    $('.normal-slides').bxSlider({
        mode: 'fade',
        auto: false,
        pager: false
    });


    $('.normal-slides img').each(function () {
        var img = this;
        var new_img = new Image();
        new_img.onload = function() {
            console.log('imgWidth = ' + this.width)
            console.log('imgHeight = ' + this.height)
        }
        new_img.src = img.src;
    });
});

Answer 2

Try with something like that

$('.slider img').each(function(){
    $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);
});

Fiddle