title: ASP.NET MVC 3 JQuery 'Uncaught TypeError': Object has no method 'roundabout'
body: <p>I've been struggling with an issue where I am trying to use the JQuery Roundabout Carousel to display some images.</p>
  
  <p>In the Layout page I have the following code:</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;!-- Stylesheets --&gt;
  &lt;link rel="stylesheet" href="~/Content/reset.css" /&gt;
  &lt;link rel="stylesheet" href="~/Content/styles.css" /&gt;
  &lt;!-- Scripts --&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/Scripts/jquery.roundabout.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/Scripts/jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () { //Start up the Carosuel on the child page
          $('#images ul').roundabout({ //images list on the child page which uses this layout page.
              easing: 'easeOutInCirc',
              duration: 1500
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>This calls the carousel on a view:</p>
  
  <pre><code>@{
  ViewBag.Title = "Home Page";
  Layout = "~/Views/Shares/_layout.cshtml"
  </code></pre>
  
  <p>}</p>
  
  <pre><code>        &lt;!-- Image Slider --&gt;
      &lt;div id="images" class="fixed grid_12"&gt;
          &lt;ul&gt; 
              &lt;li&gt;
                  &lt;a href="info.html"&gt;
                      &lt;img src="images/testImage.gif" alt="" /&gt;
                  &lt;/a&gt;
              &lt;/li&gt;  
              &lt;li&gt;
                  &lt;a href="info.html"&gt;
                      &lt;img src="images/testImage1.gif" alt="" /&gt;
                  &lt;/a&gt;    
              &lt;/li&gt;  
              &lt;li&gt;
                  &lt;a href="info.html"&gt;
                      &lt;img src="images/testImage2.gif" alt="" /&gt;
                  &lt;/a&gt;    
              &lt;/li&gt; 
          &lt;/ul&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>Despite trying different versions of jquery, moving the location and order of the scripts in the layout page I still cant get past this error. I've tried the JQuery in the header, the footer, on the child page. I've tried versions of JQuery from 1.3 through to 1.7.</p>
  
  <p>Lastly, when I try this in an standard .html file everything works as it should. Is it likely to be something with how MVC handles jquery? Perhaps is it how Razor behaves?</p>
  
  <p>Any ideas on what I am doing wrong and how to fix this?</p>
  
  <p>Cheers,</p>
  
  <p>Mo</p>