1

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.

Garrett
  • 367
  • 1
  • 14
forrest
  • 10,570
  • 25
  • 70
  • 132

2 Answers2

1

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.

Garrett
  • 367
  • 1
  • 14
  • Hi Garrett, what would be the best way to trigger that? – forrest May 06 '15 at 23:12
  • Hi Garrett, apologies for the delay - I was out yesterday. I implemented the code. It is in place now, but it isn't triggering correctly. I also can't find a duplicate of jQuery. Please let me know what you think. – forrest May 08 '15 at 16:01
  • @fmz I have no idea how, but it seems you have 2x jQuery. Hit `F12` in your browser and `Ctrl+F` then type `jquery` and you will see following lines, as I described above. Just try to comment line with this jQuery you have in your code and see what happens. Probably something 3rd party includes jQuery too. – Garrett May 08 '15 at 16:11
  • I commented out the 1.11.3 version and now the slider is broken. I can't find jquery 2.0.3 even with a search of the source code. – forrest May 08 '15 at 17:06
  • @fmz Try paste this `` and for now still 1.11.3 leave commented. – Garrett May 08 '15 at 17:21
  • FOUND. `dev/CleverWitz_home_animation_edge.js` includes second jQuery. – Garrett May 08 '15 at 17:26
  • Well done. Sharp eyes. I removed the other instance of jQuery. Please take a look. jQuery cycle doesn't seem to recognize the 2.0.3 instance. BTW, thank you for your help on this. – forrest May 08 '15 at 17:40
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77341/discussion-between-garrett-and-fmz). – Garrett May 08 '15 at 17:55
0

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');
Community
  • 1
  • 1
dekkard
  • 6,121
  • 1
  • 16
  • 26