...

View Full Version : jQuery Img Slider Problem



Rhombusone
11-24-2010, 08:22 AM
Hey guys,

help time again! I've being going ok but for the last 3 hours i been playing with an image slider from http://nivo.dev7studios.com and for the life of me i cant get it working. It looks so simple to setup yet i just cannot get it to come to life.

http://www.rhombusone.com/projecttiger/index.html is a link to what is in place using the code the site provided and placing images etc in the correct directories on the server. Any help again would be much appreciated on this one as my losing my mind trying to see whats causing problems here

(ADDED****)

Scroll down to see the loading.gif , which is the only piece showing from the slider as its just a background image) If anyone thinks perhaps its just a bad choice of slider then by all means tell me to change !

Cheers

Spudhead
11-24-2010, 10:21 AM
Two things:

1. You need to put javascript in the right order. You're currently including the slider code, and the bit that initialises the page on load, before you include the jQuery library. You should include the jQuery library first, then any plugin files (like the slider), then your $(window).load() - or $(document).ready() - calls should come after you've included everything else.

2. Spotting errors like this is made simple by the Firebug (http://getfirebug.com/) plugin for Firefox. Doing client-side development without Firebug enabled is like doing car maintenance with the bonnet down.

SB65
11-24-2010, 10:22 AM
Try changing this:


<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

to this:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>

Note amended code to instantiate the slider, and amended order - my Firebug threw an error because we're trying to use jQuery before it's loaded.

Rhombusone
11-24-2010, 12:27 PM
fixed, thanks guys, really appreciated the help. Can't believe is was just purely about listing the items correctly although aafter you pointed out it makes complete sense. Thanks again guys!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum