Add Links to
1. Add a Link to an entire Slide
<!-- "data-link", "data-target" and "data-slideindex" are the attributes for setting up slide links -->
<li data-transition="fade" data-link="http://www.themepunch.com" data-target="_blank" data-slideindex="back">
<!-- main background image -->
<img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
</li><!-- END SLIDE -->
- front
- back
2. Layer Links
The easiest way to add a link to a Layer is to convert the Layer’s markup element from <div> to <a>, where this:
<!-- BEGIN LAYER -->
<div class="tp-caption tp-resizeme largewhitebg"
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 Text</div><!-- END LAYER -->
.. is changed to this:
<!-- Layer Element converted to a traditional hyperlink, with a "href" and "target" attribute added -->
<a href="http://www.themepunch.com" target="_self" class="tp-caption tp-resizeme largewhitebg"
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 Text</a><!-- END LAYER LINK -->
Links can also be added to regular <div> Layers via the “data-actions” attribute.
<!-- LAYER WITH LINK ACTION APPLIED -->
<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 Text</div><!-- END LAYER -->
