Loading jQuery or Javascript

Question

Ive been struggling recently with various jQuery plugins, when i try to load them in a php include file they dont seem to work appropriately

''' <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">

<!-- Add jQuery library -->
<script type="text/javascript" src="../Std/fancybox/lib/jquery-1.10.1.min.js"></script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="../Std/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../Std/fancybox/jquery.fancybox.pack.js"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../Std/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../Std/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>


<script type="text/javascript">
$(document).ready(function() {


        /*
         *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
         */

         $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : {
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
         });


        });
</script>

<style type="text/css">
.fancybox-custom .fancybox-skin {
    box-shadow: 0 0 50px #222;
}

</style>

</head>

<body>

<?php include_once("analyticstracking.php") ?>'''

That is the include into my header file..

'''<h3>Gallery</h3> <p> <a class="fancybox-thumbs" data-fancybox-group="thumb" href="../Std/fancybox/demo/4_b.jpg"><img src="../Std/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="../Std/fancybox/demo/3_b.jpg"><img src="../Std/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="../Std/fancybox/demo/2_b.jpg"><img src="../Std/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="../Std/fancybox/demo/1_b.jpg"><img src="../Std/fancybox/demo/1_s.jpg" alt="" /></a>
    </p>
</div>'''

That is the reference from my page file..

I realise this is a bit too complex to really get a full explantion with this little snippet of code but i wondered if anyone else is having the same problem.

It just seems that when i follow the videos im able to sliders etc perfectly into the correct places on a file but when i try other jQuery plugins on my own sites it never seems to work..

I managed on my own portfolio page by building my site pretty much around the demo file they gave you!

www.shjohnson.co.uk

Thanks in advance for any comments...

Answer 1 · 2014-01-16T21:54:08Z

January 16, 2014 9:54pm

I commented on the other forum post so the links are there. Did you actually include all that JS/Jquery in the HTML body? It might be a little more clean to make a separate file that way you can just comment out the file imports to kill different feature sets. Check in the different JS files you're importing and make sure there aren't any conflicting globals. You can read more about conflicting globals here: http://www.thinkful.com/learn/javascript-best-practices-1/

Answer 2 · 2014-01-16T21:59:16Z

January 16, 2014 9:59pm

It looks like you are including:

<!-- local version of jquery 1.10.1 -->
<script type="text/javascript" src="../Std/fancybox/lib/jquery-1.10.1.min.js"></script> 

 <!-- google hosted version of jquery 1.7 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Calling two copies (and two different versions) of jQuery may be causing some problems.

Ideally you'd want a copy from Google code with a local version as a fallback if for any reason the Google one fails to load (and for both to be the same jQuery version).

You can achieve that with:

<!--jQuery from google-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--jQuery local backup (only loads if Google code fails) -->
    <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

I usually include all my js at the end of the HTML before the closing body tag so they don't hold up page rendering. Some scripts like moderizr do need to be called earlier so check for each instance if you can load later.

Welcome to the Treehouse Community

Looking to learn something new?

Samuel Johnson

Samuel Johnson

Loading jQuery or Javascript

2 Answers

Britni Alexander

Britni Alexander

Samuel Johnson

Samuel Johnson

Tom Bedford

Tom Bedford

Samuel Johnson

Samuel Johnson