Actions – ThemePunch

Linking to Another Web Page

Click here to learn how to link a Slide or Layer to another web page.

1. HTML Markup Example

Actions are added to Slide Layers as the “data-actions” attribute, and are written in JavaScript Object format, as shown in the following example:

<div class="tp-caption tp-resizeme largewhitebg"

     data-actions='[{

         "event": "click",
         "action": "simplelink",
         "target": "_self",
         "url": "http://www.themepunch.com"

     }]'

     data-frames='[{"delay": 0, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-x="right"
     data-y="center"
     data-hoffset="30"
     data-voffset="-30"
     data-width="['500']"
     data-height="['auto']"

>Caption with Action</div>

2. Change Slides

2.1 Jump to a different Slide

To navigate to a specific slide, first add a “data-index” to the slide you wish to navigate to:

<li data-transition="fade" data-index="rs-2">

    
    <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">

    

</li>

Then link to the other slide’s “data-index” in the Action’s “slide” setting (shown as “rs-2” in the example below).

event

mouseenter
mouseleave
click

action

jumptoslide

slide

The other slide to jump to (based on its "data-index" attribute)

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "jumptoslide",
    "slide": "rs-2",
    "delay": "0"

}]'

2.2 Navigate to the Next Slide

event

mouseenter
mouseleave
click

action

jumptoslide

slide

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "jumptoslide",
    "slide": "next",
    "delay": "0"

}]'

2.3 Navigate to the Previous Slide

event

mouseenter
mouseleave
click

action

jumptoslide

slide

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "jumptoslide",
    "slide": "previous",
    "delay": "0"

}]'

3. Pause/Resume Slider Progress

event

mouseenter
mouseleave
click

action

pauseslider
playslider
toggleslider

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "pauseslider",
    "delay": "0"

}]'

Scroll Below Slider

Quick Tip

The "scrollbelow" Action scrolls the page to the content directly beneath the Slider. To scroll to a specific part of your web page, use an anchor link along with a traditional hyperlink tag instead.

event

mouseenter
mouseleave
click

action

scrollbelow

offset

Scroll an additional amount of pixels

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "scrollbelow",
    "offset": "50px"
    "delay": "0"

}]'

5. Show/Hide Additional Layers

The Actions below allow for controlling another Layer’s visibility. To get started, first assign an ID attribute to the Layer you’d like to control. In the following example, the Layer’s ID is “slide-2-layer-1”.

<div class="tp-caption tp-resizeme largewhitebg" id="slide-2-layer-1"

     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="['auto']"
     data-height="['auto']"

>Caption with ID Attribute</div>

Next, add the Action to your button:

event

mouseenter
mouseleave
click

action

startlayer
stoplayer
togglelayer

layer

The ID of the Layer to control

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "startlayer",
    "layer": "slide-1-layer-2",
    "delay": "0"

}]'

And then adjust the animation delay parameters and also add the “data-lasttriggerstate” attribute to the Layer you’d like to control.

In the following example, the first “data-frames” Object represents the Layer’s “start” animation, with the second representing its “end” animation.

delay

"bytrigger" takes the Layer out of the Slide's normal timeline, changing the Layer's start and/or end animations to be controlled by an Action instead.

data-lasttriggerstate

Use "reset" to always reset the trigger state. And use "keep" to retain the Layer's trigger state the next time the slide is shown.

<div id="slide-2-layer-1"
     class="tp-caption tp-resizeme largewhitebg"

     data-frames='[{

         "delay": "bytrigger",
         "speed": 300,
         "from": "opacity: 0",
         "to": "opacity: 1"

     }, {

         "delay": "bytrigger",
         "speed": 300,
         "to": "opacity: 0"

     }]'

     data-lasttriggerstate="reset"

     data-x="right"
     data-y="center"
     data-hoffset="30"
     data-voffset="-30"
     data-width="['500']"
     data-height="['auto']"

>Caption Text</div>

6. Video/Audio

To control the current slide’s Background Video, enter “backgroundvideo” for the Action’s “layer” setting.

If the current Slide only contains one Video/Audio Layer, enter “firstvideo” for the Action’s “layer” setting.

Or enter the Layer div’s ID to control a specific Layer, as shown in the following examples:

<div class="tp-caption tp-resizeme tp-videolayer" id="slide-1-layer-2"

<div class="tp-caption tp-resizeme tp-audiolayer" id="slide-1-layer-2"

6.1 Play/Pause Media

event

mouseenter
mouseleave
click

action

playvideo
pausevideo
togglevideo

layer

The video/audio to control. Options are "backgroundvideo", "firstvideo" or the Layer's ID.

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "playvideo",
    "layer": "slide-1-layer-2",
    "delay": "0"

}]'

6.2 Mute/Unmute Media

Quick Tip

Use the "toggle_global_mute_video" Action to mute all Audio in the slider. Useful for sliders that include multiple Audio Layers such as background music + narration.

event

mouseenter
mouseleave
click

action

mutevideo
unmutevideo
toggle_mute_video
toggle_global_mute_video

layer

The video to control. Options are "backgroundvideo", "firstvideo" or the Layer's ID.

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "mutevideo",
    "layer": "slide-1-layer-2",
    "delay": "0"

}]'

7. Fullscreen

The Fullscreen Action can be used to dynamically change the slider’s Layout, expanding the slider to fill the browser’s window.

event

mouseenter
mouseleave
click

action

togglefullscreen
gofullscreen
exitfullscreen

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "togglefullscreen",
    "delay": "0"

}]'

8. Misc.

8.1 Call an external JavaScript function

event

mouseenter
mouseleave
click

action

callback

callback

The external function to call

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "callback",
    "callback": "externalFunction()",
    "delay": "0"

}]'

8.2 Simulate Click

If another Layer contains certain Actions, those Actions can be triggered from a separate Layer with the “simulateclick” Action.

event

mouseenter
mouseleave
click

action

simulateclick

layer

The ID of the Layer to trigger

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "simulateclick",
    "layer": "slide-1-layer-2",
    "delay": "0"

}]'

8.3 Toggle any given Layer's class name

event

mouseenter
mouseleave
click

action

toggleclass

layer

The ID of the Layer to control (could also be the ID from the same Layer)

classname

The class to add/remove

delay

Apply an optional delay (in milliseconds) to the Action

data-actions='[{

    "event": "click",
    "action": "toggleclass",
    "layer": "slide-1-layer-1",
    "classname": "some-class-name",
    "delay": "0"

}]'

9. Example containing multiple Actions

The following Action combination could be applied to a “mute/unmute” button to control an Audio Layer, and then also toggle its own class for styling purposes.

data-actions='[{

    "event": "click",
    "action": "mutevideo",
    "layer": "slide-1-layer-2",
    "delay": "0"

}, {

    "event": "click",
    "action": "toggle_mute_video",
    "layer": "slide-1-layer-1",
    "classname": "mute-state-style",
    "delay": "0"

}]'

Linking to Another Web Page

Contents:

1. HTML Markup Example

2. Change Slides

2.1 Jump to a different Slide

2.2 Navigate to the Next Slide

2.3 Navigate to the Previous Slide

3. Pause/Resume Slider Progress

Scroll Below Slider

Quick Tip

5. Show/Hide Additional Layers

6. Video/Audio

6.1 Play/Pause Media

6.2 Mute/Unmute Media

Quick Tip

7. Fullscreen

8. Misc.

8.1 Call an external JavaScript function

8.2 Simulate Click

8.3 Toggle any given Layer's class name

9. Example containing multiple Actions

Popular Solutions