Search code examples
javascriptjqueryjquery-pluginsgalleryview

jQuery GalleryView Beta3 play/pause controls needed

I am using jQuery plugin called GalleryView, in its Beta3 version (http://spaceforaname.com/galleryview). The Beta4 version is planned to have built-in controls for play/pause animation. My question is:

How to emulate 'play' and 'pause' controls from outside the script without the need to modify GalleryView code. Is there any plugin for that? Or maybe undocumented action?

During the initialization it is possible to decide whether you want the autoplay feature on or off.

If there is no action/plugin available, how did you solve that? Can you share GalleryView modification you applied?

Regards, T.

Solution

  • I solved this by modifying original GalleryView script by adding the following things:

    • paused variable within script, storing the status of pause/play (true if paused, false if playing),

    • added the following callback definition:

      /*
**  playPause()
**      Resume slideshow if paused, pause if slideshow playing.
 */
function playPause() {
    if(!paused) {
        // Pause slideshow in 500ms. This allows for brief swipes of the mouse over the gallery without unnecessarily pausing it
        $(document).oneTime(0,"animation_pause",function(){
            $(document).stopTime("transition");
            paused = true;
        });
        $('.gv-nav-play-pause').removeClass('gv-nav-pause').addClass('gv-nav-play');
    } else {
        $(document).stopTime("animation_pause");
        if(opts.transition_interval > 0) {
            $(document).everyTime(opts.transition_interval,"transition",function(){
                showNextItem();
            });
            paused = false;
        }
        $('.gv-nav-play-pause').removeClass('gv-nav-play').addClass('gv-nav-pause');
    }
};

    • added a button for play/pause, styled it and attached playPause callback to it on click and some touch events (to allow touch-enabled devices).

    It worked like a charm, without glitches, but the code may not be perfect - I had to use original GalleryView code, which itself is not perfect.