PDA

View Full Version : A hand needed with navigation for a little js slider



kel
08-05-2010, 08:17 PM
Hello guys,

I need a hand with some js I have to make it work.
I promised a friend I would help him with an image slider he has to do and I got him a script I found but it turned out it was way to complex for him to handle and he wanted me to use his old script and just add navigation to it (Previous, Stop/Play and Next)

I'm a beginner html/css coder but I'm lousy with javascript and I tried to get some help but it didn't turn out well either :(

At the moment the Stop/Pay toggels in IE8 but it doesn't do the job. In FF it doesn't even toggle nor working to do the job...

Here's the script:


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

<script type="text/javascript">

function slideSwitch(direction) {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
if(direction == 'prev') {
var $next = $active.prev().length ? $active.prev()
: $('#slideshow IMG:last');
}
else {
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
}

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( 'nextSlide()', 5000 );
slide = true;
});
function nextSlide(){
slideSwitch('next');

}
function toggle(el) {
if(slide) {
clearInterval(slideshow);
slide = false;
el.value = " Play ";
}
else {
setInterval( "nextSlide()", 5000 );
slide = true;
el.value = " Stop ";
}

}

</script>

Here's the HTML:


<div align="center" style="padding-top: 50px;">
<input type="button" onclick="slideSwitch('prev');" value=" &laquo; Prevoius " id="prev0" title="previous">
<input type="button" onclick="toggle(this);" value=" Stop " id="gostp0">
<input type="button" onclick="slideSwitch('next');" value=" Next &raquo; " id="next0" title="next"></div>