data on current/active image

Question

I have an owl-carousel with one item per slide and each image in the gallery has different dimensions and aspect ratios.

What I want is to get the width and height of the current or active image.

I've tried:

$owl.on('changed.owl.carousel', function(event) {
    var $activeimg = $(".active").find("img");
    console.log($activeimg.width() + " , " + $activeimg.height());
});

However, this returns the dimensions that the image was previously, not the image it changed to.

possible duplicate of [Get real image width and height with JavaScript in Safari/Chrome?](http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome) — showdev, Aug 26 '14 at 17:17
Did you set this option 'addClassActive: true'? This adds an active class to active items. — TheFrozenOne, Aug 26 '14 at 17:18
@Doodlebunch, yes, I have .active but the div with that class is a different size than the image because of some additional text. I need the size of just the image. The above code gets the size, only for the previous image, not the current one. — user3784241, Aug 26 '14 at 18:07
@showdev The questions are similar but mine is specific to getting the current image in an owl-carousel. Thanks. — user3784241, Aug 26 '14 at 18:11

witrin · Accepted Answer · 2014-08-27T20:40:40.460

You need to know that the changed event is fired, when a member of the carousel has changed. Thus you have to prove which member has changed and you're selector doesn't work because the event handler is called before the rendering starts. So something like this might be the better approach:

$('.owl-carousel').on('changed.owl.carousel', function(e) {
    if (e.namespace && e.property.name === 'position') {
         var position = e.relatedTarget.relative(e.property.value);
         var $image = e.relatedTarget.items(position).find('img');
         console.log($image.width(), $image.height());
    }
});

You should use the latest develop: https://github.com/OwlFonk/OwlCarousel2#building.

data on current/active image

1 Answers1