Search code examples
apostrophe-cms

Image Slideshow Stop Function


As stated in this answer. I wanted to add a new function for the apostrophe-image-widget slide function but I'm no sure how to do exactly.

To explain it further I think it makes sense to have an stop function for the widget player which can be called like data-next or data-previous maybe data-stop would be good.

So my question is can I do it in:

// example of a widget manager with a play method.
// You don't need this file at all if you
// don't need a player.

apos.define('apostrophe-images-widgets', {
  extend: 'apostrophe-pieces-widgets',
  construct: function(self, options) {
    self.play = function($widget, data, options) {
      $widget.projector(options);
    };
  }
});

And can I have maybe a little hint how to access these data-next functions and extend them as described ?


Solution

  • Since the underlying jQuery plugin that Apostrophe's slideshow depends on does not support the feature you're asking about, you'd have to PR that functionality into the plugin (found here https://github.com/punkave/jquery-projector) and then PR the update into Apostrophe core.

    Alternatively you could write your own images widget and bring your own slideshow plugin to the party. You'd initialize the slideshow plugin in your widget's player, similar to player snippet you pasted above.

    A popular slideshow library many Apostrophe developers bring to projects is Swiper https://idangero.us/swiper

    You can see an example implementation of Swiper in Apostrophe in the Open Museum project https://github.com/apostrophecms/apostrophe-open-museum/tree/master/lib/modules/slideshow-widgets