Jquery slider

[Iluvatar+]

I have taken a Jquery slider of some random website and i need to add a pause button into it and i was wondering if anyone can help.

 

Here is the code

<script type="text/javascript">
$(document).ready(function() {		
//Execute the slideShow	
slideShow();
});

function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'));
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);

}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
//Get next image caption
var caption = next.find('img').attr('rel');	
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({height: '1px'}, { queue:true, duration:300 });	
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({height: '266px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>

[trq]

What's the problem?

[Iluvatar+]

I need a button to be placed into the slider which will stop the function and toggle to a new image which will start it.

[trq]

I already read that part. I asked what the problem was?

[Iluvatar+]

Oh right sorry.

 

Well basically i have tried a few methods

 

one being

$('#button').click(function() {
    slideShow().stop();
    $(this).toggle();
})
$('#button2').click(function(){
    slideShow();
})

[trq]

And what was the outcome?

[Iluvatar+]

Nothing happens at all, the animation continues.

[trq]

slideShow() doesn't have a stop() method.

 

This code would need to be rewritten completely to do what your after. I suggest you start learning jQuery or find yourself a plugin.

[Iluvatar+]

is'nt there a way to stop the function with out having to write any of the code?

[trq]

is'nt there a way to stop the function with out having to write any of the code?

 

No, your going to need to write some code.

[Iluvatar+]

Ok thank you.

[kevinblevins]

I have tried a few methods

 

$('#button').click(function() {

    slideShow().stop();

    $(this).toggle();

})

$('#button2').click(function(){

    slideShow();

})