...

View Full Version : jquery image slider help please



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

<!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, 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.

LJackson
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 :)

LJackson
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...

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?

//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, 01:33 AM
anyone know how to get rid of the numbers? still cant figure it out?

thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum