JQuery error when run slideshow with NextGen Gallery plugin in wordpress

Question

Error code in Chrome after i added slideshow in NextGen Gallary plugin. The error part in Sildeshow page? i cannot find this page.. Attached the jQuery i link in footer. is that something conflict with my jQuery file?

please see attached picture and codescreenshot of error

JQMIGRATE: Migrate is installed, version 1.4.1
slideshow:212 Uncaught TypeError: jQuery(...).nggShowSlideshow is not a function
    at HTMLDocument.<anonymous> (slideshow:212)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ slideshow:212
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2

<script type="text/javascript">
jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
jQuery(function($) {
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
        id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
        fx: 'fade',
        width: 1000,
        height: 600,
        domain: 'https://localhost/marc1/',
        timeout: 10000      });

<script type="text/javascript">
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
    jQuery(function($) {
        jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
            id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
            fx: 'fade',
            width: 1000,
            height: 600,
            domain: 'https://localhost/marc1/',
            timeout: 10000      });

Answer 1

This type of error can often becaused by the JQuery plugin (script) being run before JQuery itself has been loaded. From your screenshot it looks like you have manually added the script to your page template directly.

In WordPress JQuery scripts should always be loaded by the wp_enqueue_script hook and set with the JQuery dependency.

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

eg:

function load_my_script_SO44497195(){
    wp_register_script( 
        'my_script', 
        get_template_directory_uri() . '/js/myscript.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script_SO44497195');

If however you really must load your script manually via the html you should wrap this code in a

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

or at least put your script in the footer to give JQuery every chance of loading first. However, you really should only be enqueuing scripts.

All of this is a guess since I've only got your screenshot to go off. If we had access to a live site it would be much easier.

Also, in the code block you give in your question you have the same scripts loading twice, and neither with a closing script tag </script> which appears to not only be unnecessary, but also likely to cause issues. Twice sorting this out first as it may well be the source of the problem.