Conflicting Jquery libraries

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.

Solution

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>