iFrame API

In some cases you want to have control over the start of your animation or you want to control Maglr elements from within your embedded files.
We have added a list of events and an example of how you can use these. This API is available for the iframe embed in Maglr templates & Maglr Pro. To start using the message API, paste the snippet below inside the <head> tag of the html to include the needed files.

<script src="../../default-assets/jquery-3.0.0.min.js"></script>
<script src="../../default-assets/message_api.js"></script>

After including these files, the iframe will respond to the messages that the page sends and will translates them to events that are triggered in the document. To start interacting with the events, paste the following snippet just before the </body> closing tag.

<script>
    $(document)
        .on(EVENT_INIT, function(event, data){
            //do something
        })
        .on(EVENT_SCENE_START, function(event){
            //do something
        })
    ;
</script>


 

Events

The following events can be triggered:

EVENT_INIT Object
Fired after the page is initiated. The data object contains spread information, menu data and other settings like audio mute.

EVENT_SCENE_START
Fired after scene start

EVENT_SCENE_STOP
Fired after scene stop (only on page stop)

EVENT_ANIMATION_START
Fired when an element/group animation starts

EVENT_ANIMATION_END
Fired when an element/group animation is done

EVENT_ELEMENT_START
Fired when an element/group is toggled from invisible to visible (happens before animation)

EVENT_ELEMENT_STOP
Fired when an element/group is toggled from visible to invisible

EVENT_AUDIO_TOGGLED Boolean
Fired when the user toggles audio on/off. 'true' = audio on, 'false' = audio off



Functions

The following functions can be called inside an iframe to trigger an action inside the page or interface.

goToScene(scene)
Go to the given scene inside the current page.


  • scene: String|Number The uuid of a scene as String to go to that scene or the strings "next" or "prev" to go to the next or previous scene. When given a Number go to the scene found at the index. (Notice: sticky scenes do count)


goToSpread(issue_id, spread_id)
Go to the given issue_id and spread_id.


  • issue_id: Number The id of the issue.
  • spread_id: Number The id of the page.


elementToggle(element, [close])
Toggle the given element(s) inside the current page 'on' or 'off' depending on their current state.


  • element: String|Array The uuid of an element as String or multiple uuid's as an Array of strings.
  • close: String optional The close option to use ("closeOthers" or "closeLevel").


interfaceAction(action)
Triggers an action in the interface.


  • action: String One of the following keywords that are supported by the interface ("home", "back", "previous_spread", "next_spread")