Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Adding external controls

Adding external controls

Last Updated: Dec 09, 2014 04:02PM EST

You can control Pulse's slideshow playback and behavior with your own external links. This walkthrough will show you how.

Create external links

First create the links that will control the slideshow. Next, assign each link a unique id. For example:

<ul id="slideshow_nav">
  <li>
    <a href="#" id="sldshw_prev">Previous</a>
  </li>
  <li>
    <a href="#" id="sldshw_play">Toggle Playback</a></li>
  <li>
    <a href="#" id="sldshw_restart">Restart</a></li>
  <li>
    <a href="#" id="sldshw_next">Next</a></li>
</ul>

Now edit the Pulse template tag to assign the link ids:

<koken:pulse next="#sldshw_next" previous="#sldshw_prev" toggle="#sldshw_play" restart="#sldshw_restart" />

Your buttons should now control your slideshow.

Toggle full screen mode

Full screen playback may also toggled with an external link. This uses the browser's native HTML5 full screen mode, if supported. To implement, create a link and assign it an id, like so:

<a href="#" id="sldshw_fs">Full screen</a>

Now assign that link's id as the value of Pulse's fullscreen attribute, like so:

<koken:pulse fullscreen="#sldshw_fs" />
Clicking the link should now engage full screen mode.

Add events to change toggle links

Let's take it a step further and change the "Toggle Playback" link above so that it displays "Play" when the slideshow is paused and "Pause" when in auto-playback. We'll need to add Javascript to listen for Pulse playback events.

To do so, change the link we just created to the default playback state you want:

<a href="#" id="sldshw_play">Play</a>

Next add this bit of Javascript anywhere after Pulse's container:

<script>
  pulse.on( 'playing', function(isPlaying) {
    var el = $('#sldshw_play');
    if (isPlaying) {
      el.html('Pause');
    } else {
      el.html('Play');
    }
  });
</script>

Final step is to declare a variable name for the Pulse object so our code may access it. We do that by adding a jsvar attribute to the <koken:pulse /> tag, like so:

<koken:pulse jsvar="pulse" next="#sldshw_next" previous="#sldshw_prev" toggle="#sldshw_play" fullscreen="#sldshw_fs" />

Your "Play" link should now switch between "Play" and "Pause" whenever playback mode changes.

Disabled class

For additional presentation control, Pulse attaches a .k-pulse-button-disabled class to external control links when necessary. For example:

<a href="#" id="sldshw_prev" class="k-pulse-button-disabled">Previous</a>

The above would occur if loop were set to false (or turned off by the publisher) and the first item in the slideshow was in view. Same would occur with the next link when reaching the last item.

If a fullscreen link is assigned, it receives the same class if full screen mode is not supported in the web browser being used to view the slideshow.

Adding keyboard control

You may bind your external links to key presses by adding a data-bind-to-key attribute to each link. Here's our example from earlier modified to support keys:

<ul id="slideshow_nav">
  <li>
    <a href="#" data-bind-to-key="left" id="sldshw_prev">Previous</a>
  </li>
  <li>
    <a href="#" data-bind-to-key="space" id="sldshw_play">Toggle Playback</a></li>
  <li>
    <a href="#" data-bind-to-key="right" id="sldshw_next">Next</a></li>
</ul>
support@koken.me
http://assets2.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete