Nivo Slider into Gooey Button

RazorLR1 · August 15, 2014, 2:22am

Hello everyone, I'm doing an assignment and I need to implement the Nivo Slider into the website which the navigation bar has been scripted with Gooey Button. I encounter a problem which the Slider doesn't work, the error in the console is "Uncaught TypeError: undefined is not a function".The error seems to be from the line "$(window).load(function() {" These are my codes:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Razor PC Building & Maintenance Services</title>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/gooeymenu/gooeymenu.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="project.css" />
<link rel="stylesheet" type="text/css" media="screen" href="scripts/gooeymenu/gooeymenu.css"/>
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" />
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
<h1>Razor PC Building & Maintenance Services</h1>
<ul id="gooeymenu3" class="underlinemenu">
<li><a href="job.html">Home</a></li>
<li><a href="staffs.html">Staffs</a></li>
<li><a href="sponsors.html">Trusted Partners</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<script>gooeymenu.setup({id:'gooeymenu3', fxtime:250})</script>
<div id="gallery">
<h2>Gallery</h2>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/h440front.jpg" alt="h440front"/>
<img src="images/h440.jpg" alt="h440" />
<img src="images/TJ11front.jpg" alt="tj11front" />
<img src="images/TJ11.jpg" alt="tj11"/>
<img src="images/switch810front.jpg" alt="810front"/>
<img src="images/switch810.jpg" alt="810"/>
</div>
</div>
</div>
</body>
</html>

moshie · December 1, 2014, 2:47pm

First of all it's good practice to load scripts just before the body tag. Since script files are quite heavy resources and you want the page to load before the scripts do not always necessary but a good optimizing trick :).

I don't know what gooey menu is but if it is calling nivoslider() makes sense to place it below the nivoslider script.

if it does anything with the $ variable worth commenting it out and see if it runs.

check your paths and ensure they are looking at the right files. a good way to check is if the console fires any 404 errors.

I recommend using a CDN for Jquery as they are much better!