jqueryjquery-cycle2

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.


Solution

  • 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.