$title = 'Template Customization'; include '../inc/inc_intro_demo.php'; ?>
This page demonstrates how Cycle2's default template regex can be replaced.
The data-cycle-tmpl-regex
attribute can be used to provide a custom
regular expression for template tokenization. The default regex
is {{((.)?.*?)}}
which facilitates mustache-style template. However if you
prefer not to use double curly braces you can provide your own expression as show in the
examples on this page.
Also note that, if you wish, you can replace Cycle2's tmpl
API method
completely by binding to the cycle-bootstrap event:
// attach handler to bootstrap event $( document ).on('cycle-bootstrap', function( e, opts, API ) { // replace default tmpl method in Cycle2 API API.tmpl = function( templateString, opts, contextElement ) { return str.replace(regex, function(_, str) { // custom tokenization (your code here) return opts[str] || contextElement[str]; }); } });
<div class="cycle-slideshow" data-cycle-tmpl-regex="\[\[((\.)?.*?)\]\]" data-cycle-pager-template="<a href=#> [[slideNum]] </a>" ...
<div class="cycle-slideshow" data-cycle-tmpl-regex="\*\*((\.)?.*?)\*\*" data-cycle-pager-template="<a href=#> **slideNum** </a>" ...
<div class="cycle-slideshow" data-cycle-tmpl-regex="%((\.)?.*?)%" data-cycle-pager-template="<a href=#> %slideNum% </a>" ...include '../inc/inc_outro.php'; ?>