Support Center

About Koken

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

Events

Events

Last Updated: Jul 15, 2014 02:35PM EDT
 

Pulse broadcasts events to announce things happening in the player. Javascript developers may bind their own Javascript functions to Pulse’s events to perform functionality outside the player.

How to setup a listener

In the HTML document displaying Pulse add the following:

<script>
  pulse.on( 'hasloaded', function() {
    alert("Pulse initialized");
  });
</script>

This sets up a Javascript object (“pulse”) that will be bound to Pulse’s hasloaded event.

Next we add our Javascript object to the <koken:pulse> template tag through its jsvar attribute, like so:

<koken:pulse jsvar="pulse" />

Refresh the page and you should see a browser alert reading “Pulse initialized”.

If an event returns an event object, you would access it in your function like so:

<p id="time_left"></p>

<script>
  pulse.on( 'playbacktimer', function(e) {
    $('#time_left').html(e.remaining);
  });
</script>

In the above we listen for Pulse’s playbacktimer event, then populate an HTML element assigned the #time_left ID with the event object’s remaining property value. This displays a countdown timer (in milliseconds) for each image.

Events

The following events are broadcasted by Pulse.

built

Broadcasts any time content loads (including queued).

Returns

(Object) Returns the content and dom event objects.

contentclick

Broadcasted when slideshow content is clicked or tapped.

Returns

(Object) Returns the content, cursor and dom event objects when clicked.

contentmouseover

Broadcasted once when a desktop mouse pointer moves over slideshow content.

Returns

(Object) Returns the content, cursor and dom event objects when the mouse enters.

contentmousemove

Continually broadcasted while a mouse is moving over the slideshow.

Returns

(Object) Returns the content, cursor and dom event objects when the mouse moves.

contentmouseout

Broadcasted once when a desktop mouse pointer moves out of slideshow content.

Returns

(Object) Returns the content, cursor and dom event objects when the mouse exits.

dataloaded

Broadcasted when slideshow data has been successfully loaded.

Returns

(Object) Object containing array of all content items plus slideshow source information. Properties:

Property Type Value
items array Array containing all slideshow items.
source object Info about content source, if available. Properties include type (eg, "album") and url (link to source's site page).

ended

Broadcasted when the last image in a slideshow is reached. Requires auto playback and the loop attribute set to false.

Returns

Nothing.

fullscreen

Broadcasted when the slideshow enters and exits full screen mode.

Returns

(Boolean) Returns true when full screen mode is active, false when returning to normal.

hasloaded

Broadcasted when the currently requested image has actually loaded and can be displayed.

Returns

Nothing.

item

Broadcasted when a slideshow item (image/video) is in view.

Returns

(Object) Returns the content and dom event objects.

itemnext

Broadcasted when the next slideshow item is requested and is about to appear.

Returns

(Object) Returns the content and dom event objects.

playing

Broadcasted when auto playback has been engaged.

Returns

(String) The string “true” when auto playback has been engaged, "false" when turned off.

playbacktimer

Broadcasted when auto playback is enabled to track the amount of time an image will be visible before moving on to the next.

Returns

(Object) Object containing the following properties:

Property Type Value
total number Amount of time (in milliseconds) the image will be displayed.
remaining number Amount of time left before the next queued image will be requested.

ready

Broadcasted when the first round of data has been loaded and images are ready.

Returns

Nothing.

resizecomplete

Broadcasted whenever the Pulse player is resized.

Returns

Nothing.

start

Broadcasted when Pulse has successfully initialized.

Returns

Nothing.

transition

Event that pings transition plugins to start its transition.

Returns

(Object) Returns the content and dom event objects.

transitionstart

Broadcasted when a transition begins from one item the next.

Returns

(Object) Returns the content and dom event objects.

transitionend

Broadcasted when a transition completes.

Returns

(Object) Returns the content and dom event objects.

waiting

Broadcasted anytime data or content that hasn’t been loaded is requested.

Returns

(Boolean) Returns true when waiting.

Event objects

The following is a reference for each of the objects returned by Pulse events.

content

The content event object contains data about the image/video being viewed. Its properties are accessed through the data object, as shown in the example below.

Example

<koken:pulse jsvar="pulse" />

<script>
  pulse.on( 'item', function(e) {
    alert(e.data.caption);
  });
</script>

Events

contentclick, item, itemnext, transition, transitionstart, transitionend

Properties

Here are all the properties the data object contains:

Property Type Value
aspect_ratio string Aspect ratio of the image/video. Eg, "3:4".
caption string Caption assigned to image/video.
captured_on object Date the image was captured. If video, date is same as uploaded_on. Properties include datetime and timestamp.
categories array List of all assigned categories.
duration object Duration of the item (if a video). Properties include raw and clean.
exif object Returns an array of exif objects. Objects will include key, label, raw and clean (if available).
exif_fields object Returns an array of strings that are the available exif keys.
favorite number Returns 1 if a favorite, 0 if not.
favorited_on object Date the item (if favorited) was favorited on. Properties include datetime and timestamp.
featured number Returns 1 if featured, 0 if not.
featured_on object Date the item (if featured) was favorited on. Properties include datetime and timestamp.
filename string File name of the original image/video file.
filesize number File size of the original image/video file.
height number Height of the original image/video file.
id number The unique ID assigned to the image/video.
index number The numerical index of the item in the slideshow array. Starts at "0".
is_first boolean Returns true if item is first in slideshow order.
is_last boolean Returns true if item is last in slideshow order.
license object License data for the loaded image/video. Properties include raw and clean.
max_download object Max download data for the loaded image/video. Properties include raw and clean.
modified_on object Date the loaded image/video was last modified. Properties include datetime and timestamp.
parent object If slideshow is displaying a single album or featured albums, this object includes all parent album properties.
position number Numerical position of the item in the slideshow. Starts at "1".
presets object URLs to preset image sizes (images only). Properties include tiny, small, medium, medium_large, xlarge.
tags array List of all assigned tags.
title string Title of the image/video.
total number Total number of items in the slideshow.
uploaded_on object Date the loaded image/video was uploaded on. Properties include datetime and timestamp.
url string Site path to the loaded image's content page.
width number Width of the original image/video file.

cursor

The cursor object contains mouse coordinate data. Its properties are accessed through the cursor object, as shown in the example below using the contentmousemove event.

Example

<koken:pulse jsvar="pulse" />

<p id="pulse-x"></p>
<p id="pulse-y"></p>

<script>
  pulse.on( 'contentmousemove', function(e) {
    $('#pulse-x').html(e.cursor.percentageX);
    $('#pulse-y').html(e.cursor.percentageY);
  });
</script>

Events

contentclick, contentmouseover, contentmouseout and contentmousemover

Properties

Property Type Value
percentageX number x-axis coordinate of the pointer. 0% at left, 100% at right.
percentageY number y-axis coordinate of the pointer. 0% at top, 100% at bottom.

dom

The DOM object for the container wrapping a slideshow item. Its data is accessed through the dom object, as shown below.

Example

In the example below we use the dom object to append an image title and caption to each image in the slideshow when a mouseover is detected. The appended content is then removed on mouseout.

(function() {
    var overlay = $('<div class="__overlay__" />').css({
    padding: '10px',
    opacity: '.5',
    background: '#000',
    color: '#fff',
    textAlign: 'right',
    position: 'absolute',
    fontSize: '11px'
  })
  pulse.on('contentmouseover', function(e) {
    e.dom.append(
      overlay
        .empty()
        .width( e.dom.find('img').width() - 20 )
        .height( e.dom.find('img').height() - 20 )
        .css({ left: e.dom.find('img').parent().get(0).style.left, top: e.dom.find('img').parent().get(0).style.top })
        .append(e.data.caption || e.data.title || e.data.filename)
        .on('mouseout', function() { $(this).remove(); })
    );
  });
})();

Events

contentclick, item, itemnext, transition, transitionstart, transitionend

support@koken.me
http://assets3.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