Home/ Questions/Q 8398185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:58:48+00:00

I’ve been struggling with an issue where I am trying to use the JQuery

  • 0

I’ve been struggling with an issue where I am trying to use the JQuery Roundabout Carousel to display some images.

In the Layout page I have the following code:

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Stylesheets -->
<link rel="stylesheet" href="~/Content/reset.css" />
<link rel="stylesheet" href="~/Content/styles.css" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.roundabout.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(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
        });
    });
</script>

This calls the carousel on a view:

@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shares/_layout.cshtml"

}

        <!-- Image Slider -->
    <div id="images" class="fixed grid_12">
        <ul> 
            <li>
                <a href="info.html">
                    <img src="images/testImage.gif" alt="" />
                </a>
            </li>  
            <li>
                <a href="info.html">
                    <img src="images/testImage1.gif" alt="" />
                </a>    
            </li>  
            <li>
                <a href="info.html">
                    <img src="images/testImage2.gif" alt="" />
                </a>    
            </li> 
        </ul> 
    </div>

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.

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?

Any ideas on what I am doing wrong and how to fix this?

Cheers,

Mo

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using

    @Url.Content("~/Scripts/jquery.roundabout.js")

    When using ~ char in paths, always use Url.Content

    Also try to observe what your browser’s debugging tool says about file?
    For example, if a file cannot be loaded from server you can see it in network tab of chrome’s devtools.

    • 0