0

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?

Rob
  • 14,746
  • 28
  • 47
  • 65
AseretIT
  • 3
  • 2

2 Answers2

0

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
       }
   });
});
Nirali Biniwale
  • 627
  • 5
  • 16
  • Ok, it seems, to be working, but I had to change `$(window).load(function () ` to `$(document).ready(function () ` . because it was not loading . Classes are assign correctly, but zoom doesn't work now. Zooming code: `` – AseretIT Nov 26 '19 at 13:59
  • Have you included js after or before jquery.min? – Nirali Biniwale Nov 26 '19 at 14:09
  • I included js library before plugin libraries – AseretIT Nov 26 '19 at 14:17
  • Try adding (."zooming").ezPlus function in the start function and after function as well. It worked for me in flex slider demo html – Nirali Biniwale Nov 26 '19 at 18:36
  • Worked !! Thank you so much !! – AseretIT Nov 26 '19 at 18:41
0

Your logic is close, but you are targeting all images with this line: $('.flexslider .slides li img').addClass('zooming');

It also has to run every time the classes of the slide > li changes.

Unfortunately jQuery doesn't have something nice like .classChange(), but here is a function - created by kozachenko on github - which does what we want.

So you can add kozachenko's function and then use it to see if the class of the li has changed, then add/remove your zooming class.

To find only the one you're looking for, you can use the active class as a selector, and then use jQuery.find() to look for the image inside of that particular element.

$(document).ready(function(){
  //kozachenko's function https://gist.github.com/kozachenko/30e55fb5f9ae170eedfe258430fd09ec
  (function(){//adds a trigger step to the addClass/removeClass jQuery functions
    var originalAddClassMethod = jQuery.fn.addClass;
    var originalRemoveClassMethod = jQuery.fn.removeClass;
    jQuery.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
    jQuery.fn.removeClass = function(){
        var result = originalRemoveClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
  })();

  $('.flexslider .slides > li').on('classChanged', function(){//the new event triggered by addClass()/removeClass()
    $(this).find('img').removeClass('zooming');//first remove the class from any other image
    $('.flex-active-slide').find('img').addClass('zooming'); //add the class to active image
  });

});
Nick MacKenzie
  • 36
  • 3