View Full Version : jquery image slider help please

09-10-2010, 04:50 PM
hi all

i have found a nice tutorial on the web for an image slider found here

but when trying to implement it all i get is my images listed one under another and no slider??? obviously doing something wrong. all the files are in the correct folders etc

here is the link to my page

and my page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider Test!!</title>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<div id="slider">
<img src="images/slide1.jpeg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpeg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpeg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpeg" alt="" />
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
<script type="text/javascript">
$(window).load(function() {
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
animSpeed:500, //Slide transition speed
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown

can anyone please help me get it working?
many thanks

09-10-2010, 05:06 PM
Your link:

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

doesn't link to a js file for me.

09-10-2010, 05:11 PM
your right, the tutorial code is incorrect! the filename to that file was wrong :(
thanks mate, appreciate your help :)

09-10-2010, 05:24 PM
one other thing mate if you dont mind, how do i get the "navigation" images to appear, do i need to have the images or are they being called in from else where?

the circles at the bottom and the next and previous images...


ok i have now got the images working but i cant seem to get rid of the numbers which are sat over the images???
i think they are set in this code?

//Add Control nav
var nivoControl = $('<div class="nivo-controlNav"></div>');
for(var i = 0; i < kids.length; i++){
var child = kids.eq(i);
child = child.find('img:first');
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');


any ideas please

many thanks

09-12-2010, 01:33 AM
anyone know how to get rid of the numbers? still cant figure it out?