Question

Simply put I’m trying to sync two slideshows created using widgetkit lib in a joomla website, eg. when user clicks next slide on one, the other one also runs nextSlide() function in the slideshow.js. Same for previous. The problems I’m having is widgetkit uses anonymous functions for creating those slideshows and I dont have global references to them after they are created. With my limited programming knowledge I cant seem to trigger the nextSlide function for other slideshows once inside click handler.

If anyone can take a look it would be most welcome.

EDIT:

Of course I forgot to link the example webpage

http://www.yootheme.com/widgetkit/examples/slideshow

Mine is similar with only 2 slideshows, but is still only on local server.

Answer 1

Taking a brief look at widgetkit here is one possible solution. Using jquery you can search for any objects that have a class of slides with a child of next and click all others. The code provided below isn’t tested but should point you in the right direction. As long as you don’t call stop propagation or prevent default then the original click handlers should still fire.

var slideshow_count = $('.slides .next').length;
var cascade_countdown = 0;

$('.slides .next').each(function() {
  $(this).click(function() {

    // stop an infinite loop if we're already cascading till we've done it for all the elements.
    if(cascade_countdown != 0) {
     cascade_countdown--;
     return true;
    }

    // we don't include the slideshow we're clicking in this count
    cascade_countdown = slideshow_count - 1;
    var clicked_el = this;

    $('.slides .next').each(function() {
      // only click elements that aren't the initiator
      if(this !== clicked_el) {
        $(this).click();
      }
    });
  });
});