Request: Pause button

[codeinwp]

Request: Pause button

[askwpgirl]

I noticed on the Nivo Slider home page, there are these commands:

$('#slider').data('nivo:vars').stop = true; //Stop the Slider
$('#slider').data('nivo:vars').stop = false; //Start the Slider

I wonder if this would work for a pause button? I don't know how to do that.

[wham12]

I've spent a couple days trying to build a pause button and I've come up with something that works for me. It adds a pause button to the end of the controlnav. All it takes is a little additional scripting, and one modification to the nivo.slider.js file.

In the nivo.slider.js file, around line 175, replace
$('.nivo-controlNav a', slider).live('click', function() {
with
$('.nivo-controlNav .nivo-control', slider).live('click', function() {

add the following code inside your $(window).load(function())

        document.getElementsByClassName = function(cl) {
            var retnode = [];
            var myclass = new RegExp('\\b' + cl + '\\b');
            var elem = this.getElementsByTagName('*');
            for (var i = 0; i < elem.length; i++) {
                var classes = elem[i].className;
                if (myclass.test(classes)) retnode.push(elem[i]);   
            }
            return retnode;
        };

        document.getElementsByClassName('nivo-controlNav')[0].innerHTML += '<a id="nivo-pause">||</a>';

        document.getElementById('nivo-pause').onclick = function() {
            $('#slider').data('nivo:vars').stop = !$('#slider').data('nivo:vars').stop;
            if ($('#nivo-pause').css('color') == "rgb(185, 185, 185)" || $('#nivo-pause').css('color') == "#b9b9b9" || $('#nivo-pause').css('color') == "rgb(185,185,185)")
                $('#nivo-pause').css('color', "rgb(102, 102, 102)")
            else
                $('#nivo-pause').css('color', "rgb(185, 185, 185)")
        };

[tastypopsicle]

I realize that this is an old post, but for anyone who might find this (like I did) I made an enhancement based off of the work that wham12 did. Namely, I removed the getElementsByClassName function and used jQuery's native method. I also set some variables for the Stop/Pause and Play indicators. They can be text, symbols or even images. I also added a class to the stopped state so that the CSS can be changed for the Stop and Play states.

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
             
        var nivoStop = "||", nivoPlay = ">";
        $('#slider .nivo-controlNav').html($('#slider .nivo-controlNav').html()+''+nivoStop+'');
        $('#slider .nivo-stop').click(function(){
            if($('#slider').data('nivo:vars').stop){
                $('#slider .nivo-stop').html(nivoStop).removeClass('stopped');
            }else{
                $('#slider .nivo-stop').html(nivoPlay).addClass('stopped');
            }
            $('#slider').data('nivo:vars').stop = !$('#slider').data('nivo:vars').stop;
        });
    });
    </script>
<style type="text/css">
    .nivo-stop{
        cursor:pointer;
    }
</style></pre>
from nivo-slider-jquery.

[4culture]

i have been wondering the same thing. there is also this:

slideshowEnd: function(){} //Triggers after all slides have been shown

but i can't figure out how to make it work.

[4culture]

Where exactly would you put it?
This is what I have

$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
pauseTime:5000,
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
manualAdvance:false, //Force manual transitions
captionOpacity:1, //Universal caption opacity
});
});

[wham12]

put it after you close the .nivoSlider command, but still inside the $(window).load(function())

don't forget to make the modification to the nivo.slider.js file as well, or when you click the pause button it will also jump back to the first slide

as a side note....you've got an extra comma after "captionOpacity:1" that could give you some grief

[4culture]

Thanks!! It works great in everything but IE (and opera). Have you had that problem also?
Link:
http://4culture.org/test/index.htm

[wham12]

I had a problem with mine not working in IE while I was using version 1.3.2 but upgrading to 1.4.1 solved that issue. I have not tested mine in opera.

[4culture]

Working fine now - I realized it was the link issue in ie and opera that was causing it not to work. Thanks so much!

[wham12]

Glad you got it working!!
I might recommend you take a look at the part of my code where it changes the CSS color attribute when you click. If you check for the color you're using (Hex: #AF3910, RGB: 175,57,16) you can change the pause button to a different color so the user knows that the slider is paused.
That bit of my code is a little messy because IE works it differently than FF/Chrome do, so if you need some help figuring out how to modify it, don't be afraid to ask.

[4culture]

good suggestion. I am using a png defined like this:

#nivo-pause {
position:absolute;
left:60px;
cursor:pointer;
display:block;
width:12px;
height:12px;
background:url(../graphics/pause.png) no-repeat;
text-indent:-9999px;
border:0;
z-index:99;
}

but I'm guessing that is not the way to go?

[wham12]

Ah, I see what you did. That would work fine...you could just change my code to add/remove a class that changes the background to a different image that has a new color.

[4culture]

I'm pretty new to javascript - how/where would you do that?

[wham12]

sent you a PM - lets get all this knocked out off of the board

[dylanvalade]

I have a modified version of the code here that does not require messing with the Nivo Slider source js at all.

<!-- Place this link anywhere in your page as the pause button and then 
switch the class from pause to play if you want to change the style of the 
button to show the current state -->
<a id="playPauseButton" href="#play" class="pause">Play or Pause</a>

end of page

$(window).load(function() {
    var $slider = $('#slider');
    $("#playPauseButton").click(function (e) {
        e.preventDefault();
        var $button = $(this);
        if ($button.hasClass("pause")) {
            $slider.data('nivoslider').stop();
            $button.toggleClass("pause", false);
        }
        else {
            $slider.data('nivoslider').start();
            $button.toggleClass("pause", true);
        }
    });

    $('#slider').nivoSlider( /* init args */ );
});

[Firestorm-Graphics]

old issue but someone may find helpfull, thanks dylanvalade for the heads up but only a pause class is appended, i amended the script to append both play & pause class's which makes for easier styling etc

jQuery(window).load(function() {// play/pause button
var $slider = $('#slider');
$("#playPauseButton").click(function (e) {
e.preventDefault();
var $button = $(this);
if ($button.hasClass("pause")) {
$slider.data('nivoslider').stop();
$button.toggleClass("pause", false);
$button.toggleClass("play", true);
}
else {
$slider.addClass("play");
$slider.data('nivoslider').start();
$button.toggleClass("pause", true);
$button.toggleClass("play", false);
}
});// play/pause button // END //

[ForgeableSum]

Important to note that flickapix's code is incomplete. You need to init the slider. Here is the full code adding the "play" and "pause" css class at the appropriate times:

jQuery(window).load(function() {
var $slider = $('#slider');
$("#playPauseButton").click(function (e) {
e.preventDefault();
var $button = $(this);
if ($button.hasClass("pause")) {
$slider.data('nivoslider').stop();
$button.toggleClass("pause", false);
$button.toggleClass("play", true);
}
else {
$slider.data('nivoslider').start();
$button.toggleClass("pause", true);
$button.toggleClass("play", false);
}
});
$('#slider').nivoSlider( /* init args */ );
});

[goodwebsites]

Just what I was looking for. Question though.
What would the tweak be if you want the link to start the slideshow?
So slideshow is stopped on slide 1 and when clicked our magic link it starts (and clicking the link again will pause the show)

---

answered my own question...
Changed class to 'play' of the link.
Added 'afterLoad: function(){$('#sliderShow').data('nivo:vars').stop= true;}' to the init args