Zooming class added to all images in slider without checking if the 'li' is active

Question

I have a problem with flexslider 2 and elevate zoom plus. I would like to zoom active image from the slider. I have to use this option, because I also use ACF in wordpress and only this one works as I want. Unfortunately code which I created doesn't work as it should

$(document).ready(function() {
    if ($('.flexslider .slides > li').hasClass('flex-active-slide')) {
    $('.flexslider .slides li img').addClass('zooming');
}
else
{
    $('.flexslider .slides li img').removeClass('zooming');
}
});
</script>

When the li has class which means that image is active, then I would like to add class to the image which has to be zoomed. Unfortunately it adds zooming class to all images in slider without checking if the li is active. What am I doing wrong?

Answer 1

No need to add different js for this, you can add in initialization only like below:

$(window).load(function () {
    $('.flexslider').flexslider({
       animation: "slide",
       start: function (slider) {
          $('body').removeClass('loading');
          $(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class on slider start
       },
       before: function (slider) {
          $(slider).find(".zooming").each(function () {
              $(this).removeClass("zooming"); // this will remove class from previous tag
          });
       },
       after: function (slider) {
          $(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class in next tag
       }
   });
});