Pauseing Cross-slide fades at completed points

JavaScript
1

Hello all, I’ve been working with the jQuery cross-slide plugin [found here] to fade some images in a loop.

This happens on the home page of the site I’m working on. The client wants content to load without a page refresh, and for the images to stop fading when a page is loaded in.

I have been trying to use the crossSlidePause() function (yes, I am loading the pause plugin as well.) for the last 6 hours or so, and it just doesn’t want to work the way you’d expect. I was hoping to have the callback (called at the beginning and end of a transition) fire a custom event that could be listened for which would then call crossSlidePause if content had been loaded.

After building a minimal test page here I’ve come to the conclusion that this cannot be done nicely with this plugin - at least not with my skill level. What seems to be happening here is that the only time you can pause is when the image is transitioning from one to another, and will not pause from its callback or any function its callback calls - which is exactly opposite of what I need it to do.

I’ve basically wasted the last 6 hours, and would rather not build a new plugin to handle this, can anyone recommend one that has the capabilities I need, or suggest a fix for the one I have?

2

Have you tried simply using the crossSlideFreeze() or crossSlideStop() functions?

Another thing to try might be to try to call crossSlidePause() from the method that performs your page loading.
e.g.

function pageLoad(strPage) { 
  //some ajax stuff that injects new content.

  /* check if one of the images is animated with something like this:
      if ($("#containerdiv img:animated").is("img")
  */
  $("#containerdiv").crossSlidePause();
}
3

Thanks for your input, John. Freeze wouldn’t help me, as I need the animation to resume later, as opposed to restarting. Stop is even worse, as it removes the element entirely - not exactly the desired effect.

Calling $.crossSlidePause while the function chain is sleeping will not do anything. You can only pause when an animation is taking place - hence my predicament. If I just slapped the pause into the ajax function, it may not pause at all, and if it does pause it’s likely to do so between images. It looks like I’m going to end up writing my own code for this one. I was hoping not to reinvent the wheel here, but the square shape of this particular wheel isn’t doing it for me.