CODEWITHSUNDEEP
jqueryjquery-cycle2
forrest
forrest

Reputation: 10982

How to change the value of a data-cycle in jQuery Cycle2 plugin when I get to a specific element on a page?

I have a jQuery Cycle2 on this page. Using data-cycle-paused="true" I am able to pause the slideshow indefinitely.

What I need to do is change data-cycle-paused="true" to data-cycle-paused="false" when the user gets to that point on the page so the animation begins.

I have searched the API documentation as well as numerous other sources and I can't find anything about making that kind of a change to trigger the slider.

Upvotes: 1

Views: 331

Answers (2)

Garrett
Garrett

Reputation: 377

I've found following solution in documentation. Second one from behind in Commands section.

resume - Resumes a paused slideshow.

$('.cycle-slideshow').cycle('resume');

Hope it was what you were looking for.

Edit: Try following solution, note that it will work only for first one) slideshow on your site:

$(window).scroll(function(){
    var animatedElement = document.getElementsByClassName('cycle-slideshow')[0],
        animatedElementPosition = animatedElement.offsetTop,
        animatedElementHeight = animatedElement.offsetHeight,
        currentScrollPosition = window.pageYOffset,
        resumed = false;

    if( (currentScrollPosition >= animatedElementPosition) &&
        (currentScrollPosition <= animatedElementPosition + animatedElementHeight ) ){
        if(!resumed){
            $('.cycle-slideshow').cycle('resume');
            resumed = true;
        }
    } else {
        if(resumed){
            $('.cycle-slideshow').cycle('pause');
            resumed = false;
        }
    }
});

Edit 2: When I run script on your website I got following error:

Uncaught TypeError: $(...).cycle is not a function

Which probably means, that there is problem due to jQuery isn't included once, but more.

Yes it is, in your html:

<script src="js/jquery-2.0.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

If you are sure that removing the second one won't take impact on your website features eg. another plugins may require this older version of jquery, then remove it! :) Should work.

P.S. Notice that when you scroll down to up, your animation will appear faster then it should, because "cycle-slideshow" height is much bigger than image I could see.

Upvotes: 1

unconditional
unconditional

Reputation: 7656

You can create an event handler for the scroll event (https://api.jquery.com/scroll/) and in it use any method of detecting whether your slideshow appears into view from here: Check if element is visible after scrolling

Upon detecting appearance just do

$('.cycle-slideshow').cycle('resume');

Upvotes: 0

Related Questions