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.

Answer 1

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.