jQuery Cycle - changing options dynamically

Question

Question:

How would I change jQuery Cycle's options asynchronously via mouse interactions on HTML elements?

jsFiddle

Here's a working example. Refer to the comments for clarification on intentions

Conducted Research:

This tweet from cycle's author reveals that it's possible to modify cycle's options asynchronously.

I asked him in a follow-up tweet if he could expound on the subject and he said (paraphrasing) "keep lurking."

After examining cycle's source code, I found that he wasn't lying. cycle.opts, indeed, exists, and there's also a debug function that's apparently of some mentionable use. However, I have very little idea on utilizing these features.

I can return the state of the object using cycle.opts, but it's the "...and then change what you need," aspect that I can't figure out. I've reviewed the Options Reference page and the defaults from the other options don't appear like they would interfere.

I found this extremely helpful. The JS Fiddle reflects @bububaba 's answer no? Shouldn't it be accepted? — Owen Hoskins, Aug 14 '12 at 13:08

score 3 · Answer 1 · answered Feb 22 '12 at 19:20

3

Well, unless I'm missing something, you're not changing the options at all in your code. Try this:

$('#foo').mouseover(function(){
    var changedOpts = $('.shuffle').data('cycle.opts')
    changedOpts.speed = 0;
    $('.shuffle').data('cycle.opts', changedOpts);
});

answered Feb 22 '12 at 19:20

bububaba

2,840
6
25
29

I feel this is definitely on the right track. Giving `.data` more arguments should've been apparent to me before. I think there's still a couple more options interfering that need to be configured before the transition is instantaneous. Thank you! – user110857 Feb 22 '12 at 19:48
After reviewing the Options Reference page, I've noticed that the defaults of the other options shouldn't interfere. I apologize. I also neglected to mention that I do have a `pager` being specified on #foo (see the new jsFiddle example). Could this be causing the issue? – user110857 Feb 22 '12 at 23:14
The 3rd line of the function: `$('.shuffle').data('cycle.opts', changedOpts);` is not necessary because `changedOpts` is a reference to the `cycle.opts` object – Andy Jun 02 '15 at 10:05

score 1 · Accepted Answer · edited Jan 10 '13 at 17:57

With your method, pause-on-hover behavior can't be changed dynamically after initial setup. Workaround code is posted below.

I could not get this to work based on the jsFiddle example in your question.

In my case, I wanted the slideshow to cycle as usual, but activating the pause on hover behavior after the user clicks an image the first time.

After some debugging it seems like the specific options I wanted to change dynamically, namely 'pause' and 'pauseOnPagerHover', won't apply after having set up the slideshow the first time.

Without having found out the actual reason for this, I hacked together a working solution to my problem, below:

// After toggling image manually the first time by clicking it, enable pause on hover.
$('.slideshow-image-link').click(function (e) {
    e.preventDefault();
    // When clicked the first time, set up a hover event pausing the slideshow.
    // It seems like changing the 'pause' option can't be done dynamically after
    // setting up the slideshow cycle.
    $('#slideshow-images').cycle('pause');
    $('.slideshow-image-link').hover(
        function () {  // On mouse in.
            $('#slideshow-images').cycle('pause');
        },
        function () {  // On mouse out.
            $('#slideshow-images').cycle('resume');
        }
    );
});

Here's a jsFiddle demonstrating the code above.

Sorry for taking so long. I decided to try out your code in a [jsFiddle](http://jsfiddle.net/BuA7r/62/) and, while we still can't get the desired ability, it definitely produces the desired behavior. I will accept this as the answer for now. — user110857, Jan 10 '13 at 17:51

jQuery Cycle - changing options dynamically

2 Answers2