# Layer Actions - ThemePunch

# Layer Actions

5.0, Anatomy08.28.2015Krisztian

#### Contents

- 1. Traditional Layer Link
- 2. Layer Actions
  - 2.1 Action Syntax
  - 2.2 Links (External, Internal)
  - 2.3 Play/Pause/Toggle Slider
  - 2.4 Start/Stop/Toggle Layer
  - 2.5 CallBack
  - 2.6 Play/Stop/Toggle Video
  - 2.7 Simulate Click
  - 2.8 Toggle Layer Class

#### Traditional Layer Link

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:

<a class="tp-caption tp-resizeme" href="http://www.google.de" target="_self" id="slide-416-layer-1" ... (Further Data Attributes) style="z-index: 5; white-space: nowrap;">Trigger </a>

1 2 3 4 5 6 7 8 9 | <a class="tp-caption tp-resizeme" href="http://www.google.de" target="_self" id="slide-416-layer-1" ... (Further Data Attributes) style="z-index: 5; white-space: nowrap;">Trigger </a>

For an Image Layer the Markup could look like:

<a class="tp-caption tp-resizeme" href="http://www.google.de" target="_self" id="slide-416-layer-3" ... (Further data Settings) style="z-index: 7;"> <img src="layer.png" alt="" width="80" height="80" data-ww="80" data-hh="80"> </a>

1 2 3 4 5 6 7 8 9 | <a class="tp-caption tp-resizeme" href="http://www.google.de" target="_self" id="slide-416-layer-3" ... (Further data Settings) style="z-index: 7;"> <img src="layer.png" alt="" width="80" height="80" data-ww="80" data-hh="80"> </a>

#### 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:

<div class="tp-caption Gym-Menuitem tp-resizeme" id="slide-416-layer-1" ... data-actions='[ { "event":"click", "action":"simplelink", "target":"_blank", "url":"http:\/\/www.google.de" }, { "event":"click", "action":"jumptoslide", "slide":"next", "delay":""}]' ... style="">Click on Me </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="tp-caption Gym-Menuitem tp-resizeme" id="slide-416-layer-1" ... data-actions='[ { "event":"click", "action":"simplelink", "target":"_blank", "url":"http:\/\/www.google.de" }, { "event":"click", "action":"jumptoslide", "slide":"next", "delay":""}]' ... style="">Click on Me </div>

##### Links (External, Internal)

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.

Back
Next