How to pause .setInterval() on hover and on .click() of interior content?

Question

I have a slideshow building elements into an array, I modify the DOM and then use items from the array to fade in and out on a timer. There are a few more things I'd like to do but I am not sure where to go from here.

The two things I would like to do:

1) on hover & click of the slideshow pause the timer, then restart timer on un-hover or click of other items on the page. (This is necessary to allow the youtube video to play if user clicks the play button so the slideshow doesn't move to the next slide)

I know I could do something like: on hover() and click() // pause timer

but I'm not sure how to stop and restart a setInterval timer and where to put it in my code

2) And the second thing the Youtube videos do not load gracefully into the page and instead of smoothly fading up they load with a lag, can they be preloaded to achieve the smooth fade with the approach I am using?

Here is a fiddle I am working with: http://jsfiddle.net/designaroni/a34yF/

Here is my code:

HTML:

<div class="slideshow">
    <img src="http://placehold.it/401x401" />
    <img src="http://placehold.it/402x402" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>
    </div>
    <img src="http://placehold.it/404x404" />
    <img src="http://placehold.it/405x405" />
    <div class="video">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>    
    </div>

CSS:

.media .video,
.media img { background-color:#fad400; padding:10px; margin:0px; height:100%;}
.slideshow { width:100%; height:400px; }
.media { height:100%; }

JS

/*
* 1) input objects into arrays 
* 2) write html to remove excess html, add items inside .media div... and other stuff
* 3) do slideshow stuff to the content
*
*
*
*/

(function ($) {

/*make it global*/
//array w/ multiple media types - .video contains youtube iframes
media = $( ".slideshow img, .slideshow .video" );
//remove items from dom
$( ".slideshow img, .slideshow .video" ).remove();
var width = $('.slideshow').width()
// end make globes

//make .media div
$(".slideshow").append("<div class='media'></div>");
//use first and .html() into .media
$(".media").html(media[0]);

$.fn.simpleSlider = function(options)  {
    //give the user options
    var defaults = {
        pause : 5000,
        speed : 400,
        descriptionSpeed: 400,
        transition : 'fade'
    },
    //merge options with defaults
    options = $.extend(defaults, options);
    //if statement
    if(options.transition === 'fade') fadesetint();
    /////////////////////////////////////////////////////////////////
    function fadesetint() {
        //this will start the animation
        fadeBeginNow = setInterval(fade, options.pause);
    }
    /////////////////////////////////////////////////////////////////
    //KEY
    /////////////////////////////////////////////////////////////////
    function currentImageKey() {
        currentMedia = $(".media").children()[0]
        i = $.inArray(currentMedia, media)
        return i;
    }
    /////////////////////////////////////////////////////////////////
    //FORWARD & BACK
    /////////////////////////////////////////////////////////////////
    //will fade & move the slideshow forward one step
    function fade() {
        currentImageKey();
        if (i < media.length -1) {
            fadeImage(i + 1);
        } else {
            fadeImage(0);
        }
    }

    //will fade & move slideshow backward one step
    function fadePrev() {
        currentImageKey();
        if (i == 0) {
            fadeImage (media.length - 1);
        } else {
            fadeImage(i - 1);
        }
    }
    /////////////////////////////////////////////////////////////////
    //ANIMATION
    /////////////////////////////////////////////////////////////////
    //fade animate & change media to variable passed to i
    function fadeImage(i) {
        $('.media').children().stop().animate({
            opacity: 0,
        }, options.speed, function() {
            $(".media").html(media[i]).children().css({opacity: 0})
            $('.media').children().stop().animate({
                opacity: 1
                }, options.speed)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            })    
        }
    }; // end simpleSlider
})(jQuery);

//this code below runs in your html while plugin above runs in external script 
$('.slideshow').simpleSlider({
    pause : 6000,               //can set transition pause in mill
    speed : 500,                //can set transition speed in mill, this is in ### AND out ###
    descriptionSpeed : 400,     //can set transition speed in mill, this is in ### AND out ###
    transition : 'fade',        //can set to slide or fade
});

Take a look at this: http://stackoverflow.com/questions/7279567/how-do-i-pause-a-windows-setinterval-in-javascript — S McCrohan, Jul 10 '14 at 15:21

score 1 · Answer 1 · answered Jul 10 '14 at 15:29

You can use a global boolean variable, for example slidingEnabled to check if at the moment the slider can slide or not.

The value of this variable is changed to false when your items are hovered in (or clicked) and true when they are hovered out.

The callback function of your setInterval() now can use this global variable to check if the sliding action is alowed or not.

Ben · Accepted Answer · 2014-07-10T20:36:46.807

I'd follow the advice in the post S McCrohan linked as far stopping and starting auto-rotation using setInterval and clearInterval. As for implementation in this case, I would recommend adding stop() and start() public methods to your simpleSlider, so you can call them in any event handlers you want, including hover and click.

$.fn.simpleSlider = function(options)  {

    //declare fadeBeginNow here, so it's available in the scope of this plugin, but not globally
    var fadeBeginNow;

    // All of the code you already have

    this.stop = function () {
        // clear your existing interval. Adjust this to suit your needs.
        clearInterval(fadeBeginNow);
    };

    this.start = function () {
        // restart your interval. Adjust this to suit your needs
        fadesetint();
    };

    // you should (almost) always end a jQuery plugin with this line
    // it provides public method functionality if you want to use them, and allows chaining
    return this;

})(jQuery);

// now store your return value when you instantiate the slider
var slider = $('selector').simpleSlider();

// stop slider
slider.stop();

//start slider
slider.start();

This is bomb! Thank You! – Designaroni Jul 11 '14 at 01:52 — Designaroni, Jul 11 '14 at 01:52

How to pause .setInterval() on hover and on .click() of interior content?

2 Answers2