Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Samuel Johnson
Samuel Johnson
9,152 Points

Loading jQuery or Javascript

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

            prevEffect : 'none',
            nextEffect : 'none',

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

            helpers : {
                thumbs : {
                    width  : 50,
                    height : 50


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




<?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>

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!


Thanks in advance for any comments...

2 Answers

Britni Alexander
Britni Alexander
10,888 Points

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/

Samuel Johnson
Samuel Johnson
9,152 Points

Thank you for this, i will definitely have a good read through! Always learning..

Tom Bedford
Tom Bedford
15,645 Points

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.

Samuel Johnson
Samuel Johnson
9,152 Points

This was a mistake i did later on and realise it could be an issue now.. I feel my main problem is all my files are .php and in the jscript it calls on an iframe.html for the lightbox style gallery. Ive tried changing things in the js file but to no avail..

I will use this include but feel its because of my file organisation with all the various include files etc.. which is sometimes why absolute links are better..

Thanks again!