Conflicting Jquery libraries

Question

I asked a question on this recently and I was given the suggestion of separating the jquery code into their individual library using the following code.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {
        //1.10.2 code goes here
    });
</script>
<script src="js/jquery-1.4.4.min.js"></script>
<script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {
        //1.4.4 code goes here
    });
</script>

This worked fine for the Index page but it doesn't seem to be working for other pages. I am using the 'Reveal Modal' and 'magnific-popup'. I have them both set up in their individual jquery libraries however they still seem to be conflicting. The page in question is mike-griffin.com/ronald_joyce.html. the 'Reveal Modal' fires when the "our Designers" link is clicked and the 'magnific-popup' lightbox should fire when and image on the page is clicked but it doesn't... But if I delete the "jquery-1.4.4.min.js" library it fires fine but the 'Reveal Modal' stops working. Code is listed below...

<script src="js/jquery-1.10.2.min.js"></script>
    <script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {

        $(document).ready(function() {
        $('.image-link').magnificPopup({type:'image'});
        });

        $('.thumbnail-contaner').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image'
         // other options
        });

    });
    </script>

    <script src="js/jquery-1.4.4.min.js"></script>
<script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {

    $.backstretch("img/Background img/Zoe-10-Background.jpg" , {duration: 3000, fade: 1000});

    $('#main-nav-modal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
}); 

    $('#sale-nav-modal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
}); 

    });
    </script>

Any help is much appreciated and thanks if you read this far but couldn't help.

Answer 1

If you use dev tools to check the console, you will see at least three errors:

Uncaught TypeError: undefined is not a function ronald_joyce.html:234
Uncaught TypeError: undefined is not a function jquery.backstretch.min.js:4
GET http://mike-griffin.com/css/modal-gloss.png 404 (Not Found) ronald_joyce.html:225

The first indicates that you're including the required plugin at the wrong place; it should be:

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script> <!-- This is the proper place -->
    <script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {
    ......

Once you resolve this error check to see if the next is resolved too. Actually the second one has to do with the placement of another plugin:

    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.backstretch.min.js"></script><!-- This is the proper place -->
    <script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {
    .....

You may want to move these other lines to their proper places if they are plugins -- match them up with the proper jQuery version:

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.reveal.js"></script>

Answer 2

Probably better to use different aliases when calling different jQuery libraries.

More details: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

And example can be modified as:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    // use usual jQuery alias with modern jQuery
    jQuery(function( $ ) {
        //1.10.2 code goes here
    });
</script>
<script src="js/jquery-1.4.4.min.js"></script>
<script>
    // make special alias, you can put this row as last row in the end of js/jquery-1.4.4.min.js
    var jQuery1_4_4 = jQuery.noConflict();
    jQuery1_4_4(function() {
        //1.4.4 code goes here
        jQuery1_4_4("div").hide();
    });
</script>