Menu icon Foundation
Disable pause on click on Orbit

Hi everyone, I hope can you help me.
I want to put Orbit as fullscreen slider, but i got a problem: if someone clicks on the image, it stop the autoshow.
So, i want to disable the pause when you click on the slider itself. How can I do it?
There's a "pause_on_click" to put off? Thanks at who will help me

Orbit

Hi everyone, I hope can you help me.
I want to put Orbit as fullscreen slider, but i got a problem: if someone clicks on the image, it stop the autoshow.
So, i want to disable the pause when you click on the slider itself. How can I do it?
There's a "pause_on_click" to put off? Thanks at who will help me

Jeremy Scott about 5 years ago

Well, you're right that there is not a setting for the feature you request.

It would be more helpful to know all the settings you're using on your implementation, but I'm going to assume you've turned off next on click on touch events?

in foundation.orbit.js add this at line 475:
Javascript
pause_on_click: true,

in foundation.orbit.js add replace line 285 with:
Javascript
else (settings.pause_on_click) {
container.on('click', self.toggle_timer);
}

(Make sure you remove white space above it too.

And then when you call your slider, add this setting to your data-options attribute:

<ul data-orbit
    data-options="animation:slide;
                  pause_on_hover:false;
                  pause_on_click:false;
                  next_on_click:false;
                  swipe:false; ">
</ul>

This should work as desired. Let me know.

Jeremy Scott about 5 years ago

PS: It is always easier for others to help when you post your markup! Let us know what settings you're using, and even if possible, a link to a working (or not) example would be great.

Rickmint about 5 years ago

Many thanks to reply so fast!
I try it but seem to not work, I think i wrong something here. I put on line 257

          var data = container.data('swipe-transition');
          if (typeof data === 'undefined') {data = {};}
          else (settings.pause_on_click) {
container.on('click', self.toggle_timer);
} 

My aim is to use Orbit as fullscreen slidershow, so on the background the user can see continuos fading images, but if they click on the images, the carousel stop.

Where do I mistake?

Thanks for any help

Rafi Benkual about 5 years ago

There is a setting for this: next-on-click: false;

Here's how http://cdpn.io/tlxha

Jeremy's code is correct for what you asked for

<ul data-orbit
    data-options="animation:slide;
                  pause_on_hover:false;
                  pause_on_click:false;
                  next_on_click:false;
                  swipe:false; ">
</ul>

Rickmint about 5 years ago

Sorry, maybe I didn't explain well what I was meaning..
I need that Orbit shows a fullscreen image, with timer on (and then it changes automatically slide after x second) BUT when user click on photos it doesn't stop.

So I need to disable "pause on click" when the timer is on, so it continuos change images without being stopped.
Timer on that cannot be stopped with click, always changes images.

I put on your code @Rafi this setting

     $(document).foundation({
      orbit: {
        circular: true,
        timer: true,
        next_on_click: false,
        timer_speed: 3000,
      }
    });

added to HTML

<div class="row">
  <div class="large-12 columns">
    <ul data-orbit data-options="next_on_click: false;">
      <li><img src="//placehold.it/1200x300"></li>
      <li><img src="//placehold.it/1200x300"></li>
    </ul>
  </div>
</div>

But it still, when I click on image, stop the timer.

Please, help me.
Thanks for any reply!

Andrew Hawkins about 5 years ago

Remove or comment out this line from foundation.orbit.js:

container.on('click', self.toggle_timer);

Ljanmi about 5 years ago

@Rickmint Can you post a link to your webpage so we that are interested in your problem can see how it actually looks like and work now?

Roberto about 5 years ago

Andrew Hawkins THANK YOU! This very simple action works! It disables the user from being able to click on the slider image to pause it (I'm surprised this isn't a standard data option in foundation).

NOTE FOR TOUCH DEVICES: This method won't work for touch devices but I figured out that all you need to do is also comment out this line from foundation.orbit.js:

self.stop_timer();

I haven't tested this on all devices but works perfectly on my iPad and iPhone :) Yay!

Samuel Rodda over 4 years ago

Thanks a heaps Andrew and Roberto! totally awesome... great fixes!

Though i'd mention that you'll need to watch these changes should you update foundations in the future. Will override them as they in a core foundation file...especially for those using compliers like codekit or compass.