Javascript conflict in Wordpress between Theme and Gallery Javascript

Question

I have been working on a specific justified gallery for more time than I care to admit, but I have finally managed to get the gallery looking how I need and all the javascript working.

I did all my testing in Dreamweaver but when it finally came to moving what I had into my Wordpress website there seems to be a conflict with some of the javascript already on the site and the javascript I need to make my gallery work.

I have included all my custom javascript into the footer as follows:

JAVASCRIPT

<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>

<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>  

<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">

  <script>
jQuery(document).ready(function($) {
  $('.x-nav > li.current-menu-item').removeClass("current-menu-item");
});
</script>

<script type="text/javascript">
jQuery( document ).ready(function() {       
jQuery('.flip-btn-1').click(function(e) {
  e.preventDefault();
    jQuery(".front").toggleClass('flip');
            jQuery(".back").toggleClass('flip');
        });
});

jQuery( document ).ready(function() {       
jQuery('.flip-btn-2').click(function(e) {
  e.preventDefault();
    jQuery(".front2").toggleClass('flip2');
            jQuery(".back2").toggleClass('flip2');
        });
});
</script>

   <script>

    $('#liveDemo').justifiedGallery({
        rowHeight : 190,
        sizeRangeSuffixes: {
            'lt100':'_t', 
            'lt240':'_m', 
            'lt320':'_n', 
            'lt500':'', 
            'lt640':'_z', 
            'lt1024':'_b'
        }
    }).on('jg.complete', function () {
        $(this).find('a').colorbox(colorboxConf);

    });

</script>

I have figured out What is causing the conflict is the jquery.min.js It is stoping Revolution Slider from working and also causing a problem with a testimonial slider (it shows all the slides at once), and my fixed nav-bar is no longer fixed.

Is there a way to find out what is causing the conflict?

Website in question is www.dangoodeofficial.co.uk

Thank you,

Dan

Answer 1

You shouldn't include Javascript libraries like jquery.justifiedGallery.min.js and jQuery in the footer by a link; you need to correctly enqueue Javascript in WordPress in the theme's functions.php file. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script

As a result, you have two copies of the main jQuery library being loaded.

The jQuery document ready functions can be added in the header or footer with <script type="text/javascript">**</script> tags.

You've got lots of Javascript errors in the console. Use the developer tools in Firefox (or Firebug ) or Chrome or Safari or IE to see what javascript is loading on your site and the errors.

Answer 2

The cause of the conflict could be the inclusion of the jquery.js file. You don't need to include jquery separately in your plugin. By default, WordPress is shipped with a jquery file and it is available for use off the shelf.