Layer Actions

The most simple way to link a layer is to use the HTML Tag “a” instead of “div” with the href and target attributes. For a typical HTML Layer it would look like:

For an Image Layer the Markup could look like:

Layer Actions

Actions are Click, Mouse Enter and Mouse Leave Event based Effects which can manipulate Slides, Layers and Page.

An Action can be defined on any Layer.  Some basic actions like a simple Link can be defined due actions (to ignore SEO like a tags) or per simple html markups.

Layer Actions can be complex and in some cases they require  a good Logical and Coding knowledge.

In the upcoming pages we will introduce you the following Actions:
  • Simple Link based on jQuery or HTML a tag
  • Jump to Slide
  • Next Slide
  • Previous Slide
  • Scroll Below Slider
  • Pause Slider
  • Play Slider
  • Toggle Slider
  • CallBack
  • Start Layer "in" Animaton
  • Start Layer "out" Animaton
  • Toggle Layer Animaton
  • Start Video
  • Stop Video
  • Toggle Video
  • Simulate Click
  • Toggle Layer Class
Action Syntax
data-actions Type:Array
Value:Action Objects

Defines an Array of Action Objects. Each Action Object can define an exact layer action.  Actions are triggered in the order of the Action Object lists, or based on the Delay attributes.

The Individual Action Object Types, keys and Values are discusses below.

Actions added within the data attributes of a Layer as shown here:

Simple Link data-actions='{"event":"click", "action":"simplelink", "target":"_blank", "url":"http:\/\/www.google.de"}'

event:  defines the Event which triggers the action. It can be click, mouseenter, mouseleave

target: the link target (_blank, _self, _top)

url: the link url. Escape Special chars, like Slash etc..

Jump To Slide data-actions='[{"event":"click", "action":"jumptoslide", "slide":"rs-417", "delay":""}]'

event:  defines the Event which triggers the action. It can be click, mouseenter, mouseleave

slide: next, previous or slide ID.  (Note, you will need to set each Slide an individual ID Attribute to be able to link to that slide if you use slide ID’s to link)

delay: the amount in ms how long it should wait before the action is processed.

Scroll Below Slider data-actions='[{"event":"click", "action":"scrollbelow", "offset":"500px"}]'

event:  defines the Event which triggers the action. It can be click, mouseenter, mouseleave

 

offset: defines an offset (px or %) which will be added to the scroll distance. If this set to 0, the Page will scroll exactly below the slider. (Slider Bottom part in same line with Browser top).

Play/Pause/Toggle Slider
Play Slider data-actions='[{"event":"click","action":"playslider"}]'
Pause Slider data-actions='[{"event":"click","action":"pauseslider"}]'
Toggle Slider data-actions='[{"event":"click","action":"toggleslider"}]'

event:  defines the Event which triggers the action. It can be click, mouseenter, mouseleave

toggleslider will revert the current status of the slider. Pauses if it was playing, and plays if it was paused.

Start/Stop/Toggle Layer
Start Layer data-actions='[{"event":"click","action":"startlayer", "layer":"slide-416-layer-2", "delay":"200"}]'
Stop Layer data-actions='[{"event":"click","action":"stoplayer", "layer":"slide-416-layer-2", "delay":"200"}]'
Toggle Layer data-actions='[{"event":"click","action":"togglelayer","layerstatus":"visible","layer":"slide-416-layer-2","delay":"200"}]'

event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave

layer: the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be triggered, or which can trigger other elements)

layerstatus: “visible” or “hidden”  defines how the Triggered Layer should start at very first time. Only used for Togglelayer action.

 

Triggered Layer !

In case the Triggered layer should wait for Trigger Actions, you will need to set the data-start, data-end and data-lasttriggerstarte attributes as follows:

data-start=”bytrigger” – will wait for the Call, Layer will not be visible till it is triggered

data-end=”bytrigger” – will not out animate till the Layer triggered.

data-lasttriggerstate=”keep” / “reset”
– reset will always reset the data-start defined status,
– keep will show the layer with its last state. If it is out animated, at next loop the layer will be invisible till its triggered again.

CallBack
CallBack data-actions='[{"event":"click","action":"callback","callback":"alert(\"some alert\");"}]'

event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave

callback: any javascript function which will be triggered on the event.

Play/Stop/Toggle Video
Play Video data-actions='[{"event":"click","action":"playvideo","layer":"slide-416-layer-4","delay":""}]'
Stop Video data-actions='[{"event":"click","action":"stopvideo","layer":"slide-416-layer-4","delay":""}]'
Toggle Video data-actions='[{"event":"click","action":"togglevideo","layer":"slide-416-layer-4","delay":""}]'

event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave

layer:  the Id of the Video Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be triggered, or which can trigger other elements)

Simulate Click
Simulate Click data-actions='[{"event":"click","action":"simulateclick","layer":"slide-416-layer-2","delay":""}]'

event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave

layer:  the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be triggered, or which can trigger other elements)

Toggle Layer Class
Toggle Class data-actions='[{"event":"click","action":"toggleclass","layer":"slide-416-layer-2","delay":"","classname":"test"}]]'

event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave

layer:  the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be triggered, or which can trigger other elements)

classname: the name of the class which should be added or removed (toggled) from the target Layer.