I am using a jQuery Image Zoom plugin (http://jacklmoore.com/zoom/) in my wordpress website.

The matter is that it works fine in my local machine, but on online server don’t work. The JavaScript console of Firebug (Firefox) and on Chrome don’t launch any error.

Curiously, the other scripts works perfectly, on local machine and on online server.

What have I missing?

This is how I am including the files in child theme:

functions.php

function x_theme_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-zoom-scripts',  get_stylesheet_directory_uri() . '/framework/js/dist/site/jquery.zoom.min.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'swipe-scripts',  get_stylesheet_directory_uri() . '/framework/js/dist/site/jquery.touchSwipe.min.js', false );
    wp_enqueue_script( 'custom-scripts',  get_stylesheet_directory_uri() . '/framework/js/dist/site/custom-scripts.js', false );
}
add_action( 'wp_enqueue_scripts', 'x_theme_enqueue_scripts' );

custom-script.js

jQuery(document).ready(function($){
    initSwipe();
});

jQuery(window).load(function($) {
    zoomProductImages();
});

function zoomProductImages(){
    jQuery(function ($) { 

        $("#sh-images-main").zoom();

        $('.sh-images-gallery').find('.product-image-item img').on('click', function(){
            $("#sh-product-main-image").attr('src', $(this).attr('src'));
            $("#sh-product-main-image").data('zoom-image', $(this).attr('src'));
            $("#sh-images-main").zoom({
                url: $(this).attr('src')
            });
            // $('#sh-images-main .zoomImg').attr('src', $(this).attr('src'));
        });
    }); 
}

Read more here: JavaScript code do not works on online server


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: