title: Shopify, TypeError: $(...).jcarousel is not a function
body: <p>So I have seen the other questions with this same title, and I don't think I am running into the same problems they had (Specifically because I am not using Drupal and the files do seem to be loading in the page header as shown below). I understand that it cannot find that function, but I don't know why. This is the code inside the theme.liquid head where it sets up the javascript and styles:</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;link rel="canonical" href="{{ canonical_url }}" /&gt;
  
    {% assign maxmeta = 155 %}
    {% if template contains 'product' %}
    &lt;meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" /&gt;
    {% elsif template contains 'page' %}
    &lt;meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" /&gt;
    {% elsif template == 'index' and shop.description != '' %}
    &lt;meta name="description" content="{{ shop.description }}" /&gt;
    {% endif %}
  
  
    {{ 'skinCustom.css' | asset_url | stylesheet_tag }}
    {{ 'jquery-1.4.2.min.js' | asset_url | script_tag }}
    {{ 'jquery.jcarousel.min.js' | asset_url | script_tag }}
  
    {% if template == 'index' %}
     &lt;title&gt;{{ shop.name }}&lt;/title&gt;
    {% elsif template == '404' %}
      &lt;title&gt;Page Not Found | {{ shop.name }}&lt;/title&gt;
    {% else %}
     &lt;title&gt;{{ page_title }} | {{ shop.name }}&lt;/title&gt;
    {% endif %}
  
    {% include 'fb-open-graph' %}
  
    {% case settings.header_font %}
    {% when "Rancho, cursive" %}
      &lt;link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'&gt;
    {% when "'Amatic SC', cursive" %}
      &lt;link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'&gt;
    {% when "'Sancreek', cursive" %}
      &lt;link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'&gt;
    {% when "'Ubuntu Condensed', sans-serif" %}
      &lt;link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'&gt;
    {% endcase %}
  
    {{ 'style.css' | asset_url | stylesheet_tag }}{% if template contains 'product' and settings.main_image_display == 'Lightbox' %}
    {{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}{% endif %}
    {{ 'modernizr.js' | asset_url | script_tag }}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  
    {% if template contains 'customers' %}
      {{ "shopify_common.js" | shopify_asset_url | script_tag }}
      {{ "customer_area.js"  | shopify_asset_url | script_tag }}
    {% endif %}
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
          $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 });
      });
  
      &lt;/script&gt;
  
    {{ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' | script_tag }}
  
    {{ content_for_header }}
  </code></pre>
  
  <p>When the page renders I get the following (I edited out the extra stuff not pertaining to this question). I put arrows pointing to the reference of the js and styling page that jcarousel depends on. I had an example of this working in a separate file before I tried to move it into the Shopify project.</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  
    --&gt; &lt;link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/skinCustom.css?241" rel="stylesheet" type="text/css"  media="all"  /&gt;
    --&gt; &lt;script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery-1.4.2.min.js?241" type="text/javascript"&gt;&lt;/script&gt;
    --&gt; &lt;script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery.jcarousel.min.js?241" type="text/javascript"&gt;&lt;/script&gt;
  
  
    &lt;link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/style.css?241" rel="stylesheet" type="text/css"  media="all"  /&gt;
    &lt;script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/modernizr.js?241" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.shopify.com/s/shopify/option_selection.js?aaf2a68ed9671e345bbc7eef1e63563c51bde6eb" type="text/javascript"&gt;&lt;/script&gt;
  
  
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
     ERROR HERE --&gt;    $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 });
      });
  
      &lt;/script&gt;
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;link rel="stylesheet" href="/global/theme-controls.css" type="text/css" /&gt;
  
  
  &lt;/head&gt;
  </code></pre>
  
  <p>The only thing I can imagine might be happening is one of the other script files is messing this up. But I am not really sure how I would debug that besides taking out the other script files. If anyone has run into a similar issue or has some insight on this I would greatly appreciate it. None of the other questions seemed to get an answer beyond just incorrect implementation (like leaving that script out of the head). I might be doing something dumb, but I have researched and looked over this numerous times and I can't see what it is.</p>
  
  <p>Thanks,</p>
  
  <p>Alan</p>