jackmoore/colorbox

new events: onNext and onPrev - or is there another solution?

JensB74 opened this issue ยท 3 comments

Hi there,

I have a group of local (on the same server) videos that open in a colorbox. Starting and stoping the video on the events onComplete and onClosed working fine so far, but switching to another video by clicking the next/prev buttons doesn't stop the last video and doesn't start the next video ... what I could need are the events onNext and onPrev for this - or are there any other solutions/ideas to solve this?

Thx in advance and Cheers

Could be closed ;)

I use the following code, because only one video tag is loaded into colorbox (and this page), I stop it by clicking on next or prev buttons:

        $('#cboxPrevious, #cboxNext').on('click', function() {
        	$('video')[0].pause();
        });

@JensB74

Great, glad you found a solution that works for you. Something I've used in the past was to redefine the prev & next functions so that I could have more control over the exact sequencing of events and to capture all engagement (buttons, keyboard arrows, & direct method calls). Here's an example:

// create a reference to the original public method
var next = $.colorbox.next; 

// replace the public method
$.colorbox.next = function(){
  // custom new behavior
  if ($('video').length) {
    $('video')[0].pause();
  }

  // call the original
  next();
};

@jackmoore

Great solution too! But I'm not really a developer, I know a little bit javascript and php and that's it, so your solution would never have occurred to me ๐Ÿ™ˆ๐Ÿ˜‰