Support » Plugin: Before After Image Comparison Slider for Elementor » jQuery error prevents images from displaying

  • Resolved TitoZ

    (@titoz)


    Greetings, we are having a strange issue with the plugin. The Before-After images do not display at all on the front end and we are seeing this error in the console:

    TypeError: jQuery(this).wbebaic_isInViewport is not a function. (In ‘jQuery(this).wbebaic_isInViewport()’, ‘jQuery(this).wbebaic_isInViewport’ is undefined)

    The error is generated by some code in the main.js file:

    jQuery(window).on('scroll', function() {
    		jQuery('.wb_ebais_twentytwenty_container').each(function(){
    			if (jQuery(this).wbebaic_isInViewport()) {
    				jQuery(window).trigger('resize');
    			}
    		});
    	});

    Please advise

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Plugin Devs

    (@plugindevs)

    Hi,
    Please replace the main.js file code with the following and let me know if it works

    'use strict';
    (function ($) {
    	jQuery(window).on('load',function(){
    		jQuery(window).trigger('resize');
    	});
    
    	jQuery(window).on('elementor/frontend/init', function(){
    		elementorFrontend.hooks.addAction('frontend/element_ready/wb-before-after-image-slider-elementor.default', function ($scope, $) {
    			var before_text = $scope.find('.before_text').text();
    			var after_text = $scope.find('.after_text').text();
    			$scope.find('.wb_ebais_twentytwenty_container').twentytwenty({
    				'before_label' : before_text,
    				'after_label'  : after_text
    			});
    		});
    	});
    
    	jQuery(window).on('scroll', function() {
    		jQuery('.wb_ebais_twentytwenty_container').each(function(){
    			if (jQuery(this).wbebaic_isInViewport()) {
    				jQuery(window).trigger('resize');
    			}
    		});
    	});
    
    	jQuery.fn.wbebaic_isInViewport = function() {
    	  var elementTop = jQuery(this).offset().top;
    	  var elementBottom = elementTop + jQuery(this).outerHeight();
    
    	  var viewportTop = jQuery(window).scrollTop();
    	  var viewportBottom = viewportTop + jQuery(window).height();
    
    	  return elementBottom > viewportTop && elementTop < viewportBottom;
    	};
    })(jQuery);
    
    
    Thread Starter TitoZ

    (@titoz)

    Hi there, thanks for your suggestion. I replaced the code in the main.js file with the code you provided and unfortunately I am still getting the same jQuery error:

    TypeError: jQuery(this).wbebaic_isInViewport is not a function. (In ‘jQuery(this).wbebaic_isInViewport()’, ‘jQuery(this).wbebaic_isInViewport’ is undefined)

    Please advise and thanks in advance for your help.

    Thread Starter TitoZ

    (@titoz)

    Hey there, Plugin Devs, I finally figured out the problem. The highly customized theme running on the website was enqueuing jQuery on the header, and so was WordPress. It’s probably best just to use the version WordPress natively loads.

    After I commented out the line that loaded the extra version of jQuery on the theme, the plugin started working normally again.

    Thanks for the help with this issue.

    Thread Starter TitoZ

    (@titoz)

    We can close this ticket at this point, thanks.

    Plugin Author Plugin Devs

    (@plugindevs)

    Glad to know that.
    Thanks for your help

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘jQuery error prevents images from displaying’ is closed to new replies.