How do I call two scripts in one html file

Question

I'm new. I'm using PrettyPhoto Lightbox and Flexslider in one html file. Whenever I put PrettyPhoto at the bottom of the page, right before the closing body tag, it makes my Flex Slider disappear and the PrettyPhoto lightbox isn't configured correctly. I know this was answered before, but I don't understand the answers. Could someone re-word it to me?

Below is in the html file:

<!-- Javascript -->
<script src="/js/jquery.flexslider.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        ("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>
</body>

Answer 1

Concept Verification Demo

You're most likely including multiple versions of jQuery - one version for each plugin - and that is the problem. You can use jQuery.noConflict or else you do something like the following:

<script src="jquery-for-plugin1.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 1
    });
</script>

<script src="jquery-for-plugin2.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 2
    });
</script>

<script src="jquery-for-plugin3.js"></script>
<script>
    $(function( $ ) {
        //initialize plugin 3
    });
</script>