CODEWITHSUNDEEP
javascriptjquery
Nicholas
Nicholas

Reputation: 151

Access jQuery Object After Calling Initial Function

Plugin I'm working with: 3D Gallery (Source code here)

I can get this gallery to work with no issue, but I'm having trouble extending the functionality to include a play and pause button. I've set up a fiddle with how I'm currently getting the slideshow up and running.

I believe the bit that matters is here:

_startSlideshow: function() {
  var _self = this;

  this.slideshow = setTimeout(function() {
    _self._navigate('next');

    if (_self.options.autoplay) {
      _self._startSlideshow();
    }
  }, this.options.interval);
}

From what I gather, all I need to do is update the gallery object's autoplay property so that the next time it hits the start slideshow function, it just pauses instead. The problem I'm having is I have no idea how to access that once I've started the slideshow up. Just to have a little more control over things, I've even pulled out the javascript from the fiddle and entered it into the Chrome console to run it there so I can see all the worky bits, still can't seem to update it. One last note, it seems the only public function in there is destroy, which I'm also not able to call on my object after starting the slideshow. If I could get that working, I'd absolutely have just written a setAutoplay(bool) function.

I assume this is just some sort of scope issue mixed with my novice understanding of syntax, but I'd sure appreciate some help.

-- Here's an updated fiddle that includes some of the ways I'm trying to access/update the autoplay stuff, none working. Also showed the destroy function doing nooothing. https://jsfiddle.net/wzrooqof/2/

Upvotes: 1

Views: 30

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

I've took a look at the library's code. You can do it without needing to change its code. It is exposed, so you can temper with it and leave the source code as is.

In your JS code add this before using it:

$.Gallery.prototype.pause = function() {
    clearTimeout(this.slideshow);
    this.options.autoplay = false;
}

$.Gallery.prototype.resume = function() {
    this.options.autoplay = true;
    this._startSlideshow();
}

Then you can pause/resume a slide show like this:

var slideshow = $('#dg-container').gallery({autoplay: true});

slideshow.data("gallery").pause();

slideshow.data("gallery").resume();

JSFiddle example.

Upvotes: 1

Related Questions