Menu icon Foundation
Orbit play/pause Event control buttons

Hi, I'm trying to make Orbit play/pause Event control buttons
that are placed outside the Orbit container... (by clicking a button or a div).

------
The big picture:
I have numerous videos in my Orbit (that is set to autoplay Fade).
When one clicks to play one of the videos it starts playing
BUT the Orbit autoplay is still going so the video fades away.
(I don't want to use 'pause on hover' for this.)

What I want is for Orbit to pause when one clicks on a video in it to play it.
I ALSO have other videos elsewhere down the web page...
so if one clicks one of those to play it I need the video that 'might' be playing in Orbit to stop playing and start Orbit fadeing again.
(I'm using Flowplayer to play the videos and it already will stop any other video that might be playing so that part of this senario works fine... it's just the Orbit play/pause control that I need.)

----
FWIW - I've searched & tried everything but still no go...
hopefully someone can post a clean code example for this common need.
MANY THANKS for any help Zurbytes!!!

OrbiteventsControlplaypausebuttons

Hi, I'm trying to make Orbit play/pause Event control buttons
that are placed outside the Orbit container... (by clicking a button or a div).

------
The big picture:
I have numerous videos in my Orbit (that is set to autoplay Fade).
When one clicks to play one of the videos it starts playing
BUT the Orbit autoplay is still going so the video fades away.
(I don't want to use 'pause on hover' for this.)

What I want is for Orbit to pause when one clicks on a video in it to play it.
I ALSO have other videos elsewhere down the web page...
so if one clicks one of those to play it I need the video that 'might' be playing in Orbit to stop playing and start Orbit fadeing again.
(I'm using Flowplayer to play the videos and it already will stop any other video that might be playing so that part of this senario works fine... it's just the Orbit play/pause control that I need.)

----
FWIW - I've searched & tried everything but still no go...
hopefully someone can post a clean code example for this common need.
MANY THANKS for any help Zurbytes!!!

Random Freeform over 5 years ago

I found help elsewhere that gave the below solution...
but for some reason it's still not working for me...
Any thoughts if this all looks right??
THX!!!!!!


<style>
.example-orbit-content li div {
    color: white;
    background: #0F1D24;
    padding: 30px 40px; }

.example-orbit-content li div h1, .example-orbit-content li div h2, .example-orbit-content li div h3 {
    color: white;
}
</style>

<div class="row">
    <a href="javascript:;" id="play" class="tiny button">Play</a>
    <a href="javascript:;" id="pause" class="tiny button">Pause</a>
    <a href="javascript:;" data-orbit-link="headline-1" id="#stop" class="tiny button">Stop</a>
</div>

<!-- slider -->
<div class="row">
    <div class="large-6 columns">
        <ul id="featured" class="example-orbit-content" data-orbit>
          <li data-orbit-slide="headline-1">
            <div>
              <h2>Headline 1</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
          <li data-orbit-slide="headline-2">
            <div>
              <h2>Headline 2</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
          <li data-orbit-slide="headline-3">
            <div>
              <h2>Headline 3</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
       </ul>
   </div>      
</div>




<script>
    $(document).foundation({
        orbit: {
            animation: 'fade',
            timer: true,
            timer_speed: 500,
            timer_paused_class: 'slider-pause',
            slide_number: true,
            pause_on_hover: false,
            animation_speed: 500,
            navigation_arrows: true,
            variable_height: false,
            bullets: false
        }
    });

    $(".orbit-timer").click();

    $('#play').on('click', function(){
        $("#featured").siblings(".slider-pause").click();
    });

    $("#pause").click(function() {
        $("#featured").siblings(".orbit-timer").click();
    });

});
</script>

Random Freeform over 5 years ago

BTW, the code I'm using above is being used in a Reverie Foundation Wordpress site ..
which might be my main problem. Just curious if it the right code to try to use.

Rafi Benkual over 5 years ago

I think you mean animation: fade?

You can disable the timer with
<ul data-orbit
data-options="timer: false;">

I'm not sure how you would do this with JavaScript. You would need to bind the click event of the Video. You likely need the video player API.

Here are some resources that will help:
http://css-tricks.com/play-button-youtube-and-vimeo-api/
http://www.w3.org/2010/05/video/mediaevents.html

Random Freeform over 5 years ago

Here's the code 'working' at http://codepen.io/ZsharE/pen/FenKC
Yea!!
Odd that taking off the single quotes breaks it though.