jquery image slider help please

LJackson · 09-10-2010, 03:50 PM

hi all

i have found a nice tutorial on the web for an image slider found here
http://nivo.dev7studios.com/

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
http://www.kernow-connect.com/slider/slidertest.php

and my page code

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">
<head>
<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>
</head>
<body>
<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>
<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>.
</div>
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		animSpeed:500, //Slide transition speed
		pauseTime:4000,
		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
	});
});
</script>
</body>
</html>

can anyone please help me get it working?
many thanks
Luke

SB65 · 09-10-2010, 04:06 PM

Your link:

Code:

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

doesn't link to a js file for me.

LJackson · 09-10-2010, 04:11 PM

your right, the tutorial code is incorrect! the filename to that file was wrong

thanks mate, appreciate your help

LJackson · 09-10-2010, 04: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...

EDIT
====

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?

Code:

			//Add Control nav
			if(settings.controlNav){
				var nivoControl = $('<div class="nivo-controlNav"></div>');
				slider.append(nivoControl);
				for(var i = 0; i < kids.length; i++){
					if(settings.controlNavThumbs){
						var child = kids.eq(i);
						if(!child.is('img')){
							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
Luke

LJackson · 09-12-2010, 12:33 AM

anyone know how to get rid of the numbers? still cant figure it out?

thanks