Layer Actions
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:
|
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:
|
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.
- 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
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:
|
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)
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..
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.
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
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
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
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/Mute/UnMute Video & Audio
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)
Toggle FullScreen / Go FullScreen / Exit FullScreen
event: defines the Event which triggers the action. It can be click, mouseenter, mouseleave
Simulate Click
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
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.