The images which should be cycling are just sitting on top of each other. Screenshot here
In my (very simple) application I have one View
named Index.cshtml
. I'd like to use jquery Cycle Plugin for this page which I have used in my PHP apps too. Below is my _Layout.cshtml
's relevant code
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render(Url.Content("~/Scripts/cycle.js")) // I added this line.
@Scripts.Render("~/bundles/modernizr")
The plugin file (cycle.js)
is in Scripts
folder generated by Basic project layout.
Below is how I am using it. The following code is also in _Layout.cshtml
(comments only here).
<script type="text/javascript">
$(document).ready(function () {
alert('test1'); //this is 'alerted'
$('.images').cycle({
fx: 'fade',
speed: 2000
});
alert('test2!'); //this is NOT 'alerted'
});
</script>
When I view the source after requesting page in a browser, I get this :
<title>Asp.Net MVC 4 Hello World App</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/cycle.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('test1');
$('.images').cycle({
fx: 'fade',
speed: 2000
});
alert('test12');
});
</script>
</head>
<body>
...
</html>
Here is the container for images:
<div class="images" id="images">
<img src="@Url.Content("../Images/image1.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image2.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image3.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image4.jpg")" alt="page image" />
</div>
The files are therefore successfully being loaded. I believe the issue is how $(document).ready()
works. because whatever code I put before .cycle()
works but nothing works after it.