%PDF-
%PDF-
Mini Shell
Mini Shell
<?php
if(!defined('LS_ROOT_FILE')) {
header('HTTP/1.0 403 Forbidden');
exit;
}
// Custom transitions file
$upload_dir = wp_upload_dir();
$custom_trs = $upload_dir['basedir'] . '/layerslider.custom.transitions.js';
$sample_trs = LS_ROOT_PATH.'/demos/transitions.js';
// Get transition file
if(file_exists($custom_trs)) { $data = file_get_contents($custom_trs); }
elseif(file_exists($sample_trs)) { $data = file_get_contents($sample_trs); }
// Get JSON data
if(!empty($data)) {
$data = substr($data, 35);
$data = substr($data, 0, -1);
$data = json_decode($data, true);
}
// Get screen options
$lsScreenOptions = get_option('ls-screen-options', '0');
$lsScreenOptions = ($lsScreenOptions == 0) ? array() : $lsScreenOptions;
$lsScreenOptions = is_array($lsScreenOptions) ? $lsScreenOptions : unserialize($lsScreenOptions);
// Defaults
if(!isset($lsScreenOptions['showTooltips'])) {
$lsScreenOptions['showTooltips'] = 'true';
}
// Function to convert array keys to property names
function lsTrGetProperty($key) {
switch ($key) {
case 'scale3d': return 'Scale3D'; break;
case 'rotateX': return 'RotateX'; break;
case 'rotateY': return 'RotateY'; break;
case 'x': return 'MoveX'; break;
case 'y': return 'MoveY'; break;
case 'delay': return 'Delay'; break;
default: return $key; break;
}
}
?>
<div id="ls-screen-options" class="metabox-prefs hidden">
<div id="screen-options-wrap" class="hidden">
<form id="ls-screen-options-form" action="<?php echo $_SERVER['REQUEST_URI']?>" method="post">
<h5><?php _e('Show on screen', 'LayerSlider') ?></h5>
<label>
<input type="checkbox" name="showTooltips"<?php echo $lsScreenOptions['showTooltips'] == 'true' ? ' checked="checked"' : ''?>> <?php _e('Tooltips', 'LayerSlider') ?>
</label>
</form>
</div>
<div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
<button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e('Screen Options', 'LayerSlider') ?></button>
</div>
</div>
<div id="ls-tr-sample-3d">
<div class="ls-transition-item">
<table class="ls-box ls-tr-settings">
<thead>
<tr>
<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ls-builder-preview ls-transition-preview">
<img src="<?php echo LS_ROOT_URL ?>/static/img/sample_slide_1.png" alt="preview image">
</div>
<div class="ls-builder-preview-button">
<button class="button"><?php _e('Enter Preview', 'LayerSlider') ?></button>
</div>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="basic">
<tr>
<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
<td colspan="3"><input type="text" name="name" value="Turn top" data-help="<?php _e('The name of your custom transition. When you edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
</tr>
<tr>
<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
<td><input type="text" name="rows" value="1" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
<td><input type="text" name="cols" value="1" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="tile">
<tr>
<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
<td><input type="text" name="delay" value="75" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
<td>
<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
<option value="forward"><?php _e('Forward', 'LayerSlider') ?></option>
<option value="reverse"><?php _e('Reverse', 'LayerSlider') ?></option>
<option value="col-forward"><?php _e('Col-forward', 'LayerSlider') ?></option>
<option value="col-reverse"><?php _e('Col-reverse', 'LayerSlider') ?></option>
<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="right"><?php _e('Depth', 'LayerSlider') ?></td>
<td>
<label data-help="<?php _e('The script tries to identify the optimal depth for your rotated objects (tiles). With this option you can force your objects to have a large depth when performing 180 degree (and its multiplies) rotation.', 'LayerSlider') ?>">
<input type="checkbox" class="checkbox" name="depth" value="large">
<?php _e('Large depth', 'LayerSlider') ?>
</label>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
<?php _e('Before animation', 'LayerSlider') ?>
<p class="ls-builder-checkbox">
<label><input type="checkbox" class="ls-builder-collapse-toggle"> <?php _e('Enabled', 'LayerSlider') ?></label>
</p>
</td>
</tr>
</thead>
<tbody class="before ls-builder-collapsed">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option>linear</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutQuad</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInOutCubic</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuart</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
<option selected="selected">easeInOutQuint</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeInOutSine</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutExpo</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCirc</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutBack</option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags"></ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
<?php _e('Animation', 'LayerSlider') ?>
</td>
</tr>
</thead>
<tbody class="animation">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option>linear</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutQuad</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInOutCubic</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuart</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
<option selected="selected">easeInOutQuint</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeInOutSine</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutExpo</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCirc</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutBack</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
<td>
<select name="direction" data-help="<?php _e('The direction of rotation.', 'LayerSlider') ?>">
<option value="vertical"><?php _e('Vertical', 'LayerSlider'); ?></option>
<option value="horizontal" selected="selected"><?php _e('Horizontal', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags">
<li>
<p>
<span><?php _e('RotateX', 'LayerSlider') ?></span>
<input type="text" name="rotateY" value="90">
</p>
<a href="#">x</a>
</li>
</ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
<?php _e('After animation', 'LayerSlider') ?>
<p class="ls-builder-checkbox">
<label><input type="checkbox" class="ls-builder-collapse-toggle"> <?php _e('Enabled', 'LayerSlider') ?></label>
</p>
</td>
</tr>
</thead>
<tbody class="after ls-builder-collapsed">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option>linear</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutQuad</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInOutCubic</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuart</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
<option selected="selected">easeInOutQuint</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeInOutSine</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutExpo</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCirc</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutBack</option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags"></ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<button class="button-primary ls-tr-remove right"><?php _e('Remove transition', 'LayerSlider') ?></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ls-tr-sample-2d">
<div class="ls-transition-item">
<table class="ls-box ls-tr-settings bottomborder">
<thead>
<tr>
<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ls-builder-preview ls-transition-preview">
<img src="<?php echo LS_ROOT_URL ?>/static/img/sample_slide_1.png" alt="preview image">
</div>
<div class="ls-builder-preview-button">
<button class="button"><?php _e('Enter Preview', 'LayerSlider') ?></button>
</div>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="basic">
<tr>
<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
<td colspan="3"><input type="text" name="name" value="Turn top" data-help="<?php _e('The name of your custom transition. When you edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
</tr>
<tr>
<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
<td><input type="text" name="rows" value="1" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
<td><input type="text" name="cols" value="1" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="tile">
<tr>
<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
<td><input type="text" name="delay" value="75" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
<td>
<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
<option value="forward"><?php _e('Forward', 'LayerSlider') ?></option>
<option value="reverse"><?php _e('Reverse', 'LayerSlider') ?></option>
<option value="col-forward"><?php _e('Col-forward', 'LayerSlider') ?></option>
<option value="col-reverse"><?php _e('Col-reverse', 'LayerSlider') ?></option>
<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
</select>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="transition">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="1000" data-help="<?php _e('The duration of the animation. This value is in millisecs, so the value 1000 measn 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option>linear</option>
<option>swing</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutQuad</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInOutCubic</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuart</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
<option selected="selected">easeInOutQuint</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeInOutSine</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutExpo</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCirc</option>
<option>easeInElastic</option>
<option>easeOutElastic</option>
<option>easeInOutElastic</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutBack</option>
<option>easeInBounce</option>
<option>easeOutBounce</option>
<option>easeInOutBounce</option>
</select>
</td>
</tr>
<tr>
<td class="right"><?php _e('Type', 'LayerSlider') ?></td>
<td>
<select name="type" data-help="<?php _e('The type of the animation, either slide, fade or both (mixed).', 'LayerSlider') ?>">
<option value="slide"><?php _e('Slide', 'LayerSlider') ?></option>
<option value="fade"><?php _e('Fade', 'LayerSlider') ?></option>
<option value="mixed"><?php _e('Mixed', 'LayerSlider') ?></option>
</select>
</td>
<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
<td>
<select name="direction" data-help="<?php _e('The direction of the slide or mixed animation if you\'ve chosen this type in the previous settings.', 'LayerSlider') ?>">
<option value="top"><?php _e('Top', 'LayerSlider') ?></option>
<option value="right"><?php _e('Right', 'LayerSlider') ?></option>
<option value="bottom"><?php _e('Bottom', 'LayerSlider') ?></option>
<option value="left"><?php _e('Left', 'LayerSlider') ?></option>
<option value="random"><?php _e('Random', 'LayerSlider') ?></option>
<option value="topleft"><?php _e('Top left', 'LayerSlider') ?></option>
<option value="topright"><?php _e('Top right', 'LayerSlider') ?></option>
<option value="bottomleft"><?php _e('Bottom left', 'LayerSlider') ?></option>
<option value="bottomright"><?php _e('Bottom right', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr>
<td class="right"><?php _e('RotateX', 'LayerSlider') ?></td>
<td><input type="text" name="rotateX" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the X axis. You can use negatuve values."></td>
<td class="right"><?php _e('RotateY', 'LayerSlider') ?></td>
<td><input type="text" name="rotateY" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Y axis. You can use negatuve values."></td>
</tr>
<tr>
<td class="right"><?php _e('RotateZ', 'LayerSlider') ?></td>
<td><input type="text" name="rotate" value="0" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Z axis. You can use negatuve values."></td>
<td class="right"><?php _e('Scale', 'LayerSlider') ?></td>
<td><input type="text" name="scale" value="1.0" data-help="The initial scale of the individual tiles which will be animated to the default (1.0) value."></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<button class="button-primary ls-tr-remove"><?php _e('Remove transition', 'LayerSlider') ?></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wrap">
<!-- Page title -->
<h2>
<?php _e('LayerSlider Transition Builder', 'LayerSlider') ?>
<a href="?page=layerslider" class="add-new-h2"><?php _e('Back to the list', 'LayerSlider') ?></a>
</h2>
<?php if(isset($_GET['edited'])) : ?>
<div class="updated"><?php _e('Your changes has been saved!', 'LayerSlider') ?></div>
<?php endif; ?>
<!-- Editor box -->
<form action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="post" id="ls-tr-builder-form">
<input type="hidden" name="ls-user-transitions" value="1">
<?php wp_nonce_field('save-user-transitions'); ?>
<div class="ls-box ls-tr-builder">
<h3 class="header medium">
<div class="ls-builder-left ls-half">
<div class="inner">
<?php _e('3D transitions', 'LayerSlider') ?>
<p>
<?php _e('Choose:', 'LayerSlider') ?>
<select class="ls-tr-builder-tr-select 3d">
<?php if(!empty($data['t3d']) && is_array($data['t3d'])) : ?>
<?php foreach($data['t3d'] as $tr) : ?>
<option><?php echo $tr['name'] ?></option>
<?php endforeach; ?>
<?php else : ?>
<option class="notification"><?php _e('No 3D transitions yet', 'LayerSlider') ?></option>
<?php endif; ?>
</select>
<?php _e('or', 'LayerSlider') ?>
<a href="#" class="ls-icon-tr-add ls-tr-builder-add-tr 3d"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
</p>
</div>
</div>
<div class="ls-builder-right ls-half">
<div class="inner">
<?php _e('2D transitions', 'LayerSlider') ?>
<p>
<?php _e('Choose:', 'LayerSlider') ?>
<select class="ls-tr-builder-tr-select 2d">
<?php if(!empty($data['t2d']) && is_array($data['t2d'])) : ?>
<?php foreach($data['t2d'] as $tr) : ?>
<option><?php echo $tr['name'] ?></option>
<?php endforeach; ?>
<?php else : ?>
<option class="notification"><?php _e('No 2D transitions yet', 'LayerSlider') ?></option>
<?php endif; ?>
</select>
<?php _e('or', 'LayerSlider') ?>
<a href="#" class="ls-icon-tr-add ls-tr-builder-add-tr 2d"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
</p>
</div>
</div>
</h3>
<div class="ls-tr-options">
<div class="ls-builder-left ls-tr-list-3d">
<?php if(!empty($data['t3d']) && is_array($data['t3d'])) : ?>
<?php foreach($data['t3d'] as $key => $tr) : ?>
<?php $activeClass = ($key == 0) ? ' active' : '' ?>
<div class="ls-transition-item<?php echo $activeClass ?>">
<table class="ls-box ls-tr-settings">
<thead>
<tr>
<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ls-builder-preview ls-transition-preview">
<img src="<?php echo LS_ROOT_URL ?>/static/img/sample_slide_1.png" alt="preview image">
</div>
<div class="ls-builder-preview-button">
<button class="button"><?php _e('Enter Preview', 'LayerSlider') ?></button>
</div>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="basic">
<tr>
<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
<td colspan="3"><input type="text" name="name" value="<?php echo $tr['name'] ?>" data-help="<?php _e('The name of your custom transition. When you edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
</tr>
<tr>
<?php $tr['rows'] = is_array($tr['rows']) ? implode(',', $tr['rows']) : $tr['rows']; ?>
<?php $tr['cols'] = is_array($tr['cols']) ? implode(',', $tr['cols']) : $tr['cols']; ?>
<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
<td><input type="text" name="rows" value="<?php echo $tr['rows'] ?>" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
<td><input type="text" name="cols" value="<?php echo $tr['cols'] ?>" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="tile">
<tr>
<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
<td><input type="text" name="delay" value="<?php echo $tr['tile']['delay'] ?>" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
<td>
<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
<option value="forward"<?php echo ($tr['tile']['sequence'] == 'forward') ? ' selected="selected"' : '' ?>><?php _e('Forward', 'LayerSlider') ?></option>
<option value="reverse"<?php echo ($tr['tile']['sequence'] == 'reverse') ? ' selected="selected"' : '' ?>><?php _e('Reverse', 'LayerSlider') ?></option>
<option value="col-forward"<?php echo ($tr['tile']['sequence'] == 'col-forward') ? ' selected="selected"' : '' ?>><?php _e('Col-forward', 'LayerSlider') ?></option>
<option value="col-reverse"<?php echo ($tr['tile']['sequence'] == 'col-reverse') ? ' selected="selected"' : '' ?>><?php _e('Col-reverse', 'LayerSlider') ?></option>
<option value="random"<?php echo ($tr['tile']['sequence'] == 'random') ? ' selected="selected"' : '' ?>><?php _e('Random', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="right"><?php _e('Depth', 'LayerSlider') ?></td>
<td>
<label data-help="<?php _e('The script tries to identify the optimal depth for your rotated objects (tiles). With this option you can force your objects to have a large depth when performing 180 degree (and its multiplies) rotation.', 'LayerSlider') ?>">
<input type="checkbox" class="checkbox" name="depth" value="large"<?php echo isset($tr['tile']['depth']) ? ' checked="checked"' : '' ?>>
<?php _e('Large depth', 'LayerSlider') ?>
</label>
</td>
</tr>
</tbody>
<?php
$checkboxProp = isset($tr['before']['enabled']) ? ' checked="checked"' : '';
$collapseClass = !isset($tr['before']['enabled']) ? ' ls-builder-collapsed' : '';
?>
<thead>
<tr>
<td colspan="4">
<span><?php _e('Before animation', 'LayerSlider') ?></span>
<p class="ls-builder-checkbox">
<label><input type="checkbox"<?php echo $checkboxProp ?> class="ls-builder-collapse-toggle"> <?php _e('Enabled', 'LayerSlider') ?></label>
</p>
</td>
</tr>
</thead>
<tbody class="before<?php echo $collapseClass ?>">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="<?php echo isset($tr['before']['duration']) ? $tr['before']['duration'] : '1000' ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<?php $tr['before']['easing'] = isset($tr['before']['easing']) ? $tr['before']['easing'] : 'easeInOutBack' ?>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option<?php echo ($tr['before']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
<option<?php echo ($tr['before']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
<option<?php echo ($tr['before']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
<option<?php echo ($tr['before']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
<option<?php echo ($tr['before']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
<option<?php echo ($tr['before']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
<option<?php echo ($tr['before']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
<option<?php echo ($tr['before']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
<option<?php echo ($tr['before']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
<option<?php echo ($tr['before']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
<option<?php echo ($tr['before']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags">
<?php if(isset($tr['before']['transition']) && !empty($tr['before']['transition'])) : ?>
<?php foreach($tr['before']['transition'] as $pkey => $prop) : ?>
<li>
<p>
<span><?php echo lsTrGetProperty($pkey) ?></span>
<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
</p>
<a href="#">x</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
<?php _e('Animation', 'LayerSlider') ?>
</td>
</tr>
</thead>
<tbody class="animation">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="<?php echo $tr['animation']['duration'] ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option<?php echo ($tr['animation']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
<option<?php echo ($tr['animation']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
<option<?php echo ($tr['animation']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
<td>
<select name="direction" data-help="<?php _e('The direction of rotation.', 'LayerSlider') ?>">
<option value="vertical"<?php echo ($tr['animation']['direction'] == 'vertical') ? ' selected="selected"' : '' ?>><?php _e('Vertical', 'LayerSlider'); ?></option>
<option value="horizontal"<?php echo ($tr['animation']['direction'] == 'horizontal') ? ' selected="selected"' : '' ?>><?php _e('Horizontal', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags">
<?php if(isset($tr['animation']['transition']) && !empty($tr['animation']['transition'])) : ?>
<?php foreach($tr['animation']['transition'] as $pkey => $prop) : ?>
<li>
<p>
<span><?php echo lsTrGetProperty($pkey) ?></span>
<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
</p>
<a href="#">x</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<?php
$checkboxProp = isset($tr['after']['enabled']) ? ' checked="checked"' : '';
$collapseClass = !isset($tr['after']['enabled']) ? ' ls-builder-collapsed' : '';
?>
<thead>
<tr>
<td colspan="4">
<?php _e('After animation', 'LayerSlider') ?>
<p class="ls-builder-checkbox">
<label><input type="checkbox"<?php echo $checkboxProp ?> class="ls-builder-collapse-toggle"> <?php _e('Enabled', 'LayerSlider') ?></label>
</p>
</td>
</tr>
</thead>
<tbody class="after<?php echo $collapseClass ?>">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="<?php echo isset($tr['after']['duration']) ? $tr['after']['duration'] : '1000' ?>" data-help="<?php _e('The duration of your animation. This value is in millisecs, so the value 1000 means 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<?php $tr['after']['easing'] = isset($tr['after']['easing']) ? $tr['after']['easing'] : 'easeInOutBack' ?>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option<?php echo ($tr['after']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
<option<?php echo ($tr['after']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
<option<?php echo ($tr['after']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
<option<?php echo ($tr['after']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
<option<?php echo ($tr['after']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
<option<?php echo ($tr['after']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
<option<?php echo ($tr['after']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
<option<?php echo ($tr['after']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
<option<?php echo ($tr['after']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
<option<?php echo ($tr['after']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
<option<?php echo ($tr['after']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
</select>
</td>
</tr>
<tr class="transition">
<td colspan="4">
<ul class="ls-tr-tags">
<?php if(isset($tr['after']['transition']) && !empty($tr['after']['transition'])) : ?>
<?php foreach($tr['after']['transition'] as $pkey => $prop) : ?>
<li>
<p>
<span><?php echo lsTrGetProperty($pkey) ?></span>
<input type="text" name="<?php echo $pkey ?>" value="<?php echo $prop ?>">
</p>
<a href="#">x</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<p class="ls-tr-add-property">
<a href="#" class="ls-icon-tr-add"><i class="dashicons dashicons-plus"></i><?php _e('Add new', 'LayerSlider') ?></a>
<select>
<option value="scale3d,0.8"><?php _e('Scale3D', 'LayerSlider') ?></option>
<option value="rotateX,90"><?php _e('RotateX', 'LayerSlider') ?></option>
<option value="rotateY,90"><?php _e('RotateY', 'LayerSlider') ?></option>
<option value="delay,200"><?php _e('Delay', 'LayerSlider') ?></option>
</select>
</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<button class="button-primary ls-tr-remove right"><?php _e('Remove transition', 'LayerSlider') ?></button>
</td>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
<?php else : ?>
<div class="ls-no-transitions-notification">
<h1><?php _e("You didn't create any 3D transitions yet", "LayerSlider") ?></h1>
<p><?php _e('To create a new transition, click to the \"Add new\" button above.', 'LayerSlider') ?></p>
</div>
<?php endif; ?>
</div>
<div class="ls-builder-right ls-tr-list-2d">
<?php if(!empty($data['t2d']) && is_array($data['t2d'])) : ?>
<?php foreach($data['t2d'] as $key => $tr) : ?>
<?php $activeClass = ($key == 0) ? ' active' : '' ?>
<div class="ls-transition-item<?php echo $activeClass ?>">
<table class="ls-box ls-tr-settings bottomborder">
<thead>
<tr>
<td colspan="4"><?php _e('Preview', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="ls-builder-preview ls-transition-preview">
<img src="<?php echo LS_ROOT_URL ?>/static/img/sample_slide_1.png" alt="preview image">
</div>
<div class="ls-builder-preview-button">
<button class="button"><?php _e('Enter Preview', 'LayerSlider') ?></button>
</div>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Basic properties', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="basic">
<tr>
<td class="right"><?php _e('Transition name', 'LayerSlider') ?></td>
<td colspan="3"><input type="text" name="name" value="<?php echo $tr['name'] ?>" data-help="<?php _e('The name of your custom transition. When you edit a slider, it will appear with this name, so you can easily identify the individual transitions.', 'LayerSlider') ?>"></td>
</tr>
<tr>
<?php $tr['rows'] = is_array($tr['rows']) ? implode(',', $tr['rows']) : $tr['rows']; ?>
<?php $tr['cols'] = is_array($tr['cols']) ? implode(',', $tr['cols']) : $tr['cols']; ?>
<td class="right"><?php _e('Rows', 'LayerSlider') ?></td>
<td><input type="text" name="rows" value="<?php echo $tr['rows'] ?>" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many rows of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Cols', 'LayerSlider') ?></td>
<td><input type="text" name="cols" value="<?php echo $tr['cols'] ?>" data-help="<?php _e('<i>number</i> or <i>min,max</i> If you specify a value greater than 1, LayerSlider will cut your slide into tiles. You can specify here how many columns of your transition should have. If you specify two numbers separated with a comma, LayerSlider will use that as a range and pick a random number between your values.', 'LayerSlider') ?>"></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Tiles', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="tile">
<tr>
<td class="right"><?php _e('Delay', 'LayerSlider') ?></td>
<td><input type="text" name="delay" value="<?php echo $tr['tile']['delay'] ?>" data-help="<?php _e('You can apply a delay between the tiles and postpone their animation relative to each other.', 'LayerSlider') ?>"></td>
<td class="right"><?php _e('Sequence', 'LayerSlider') ?></td>
<td>
<select name="sequence" data-help="<?php _e('You can control the animation order of the tiles here.', 'LayerSlider') ?>">
<option value="forward"<?php echo ($tr['tile']['sequence'] == 'forward') ? ' selected="selected"' : '' ?>><?php _e('Forward', 'LayerSlider') ?></option>
<option value="reverse"<?php echo ($tr['tile']['sequence'] == 'reverse') ? ' selected="selected"' : '' ?>><?php _e('Reverse', 'LayerSlider') ?></option>
<option value="col-forward"<?php echo ($tr['tile']['sequence'] == 'col-forward') ? ' selected="selected"' : '' ?>><?php _e('Col-forward', 'LayerSlider') ?></option>
<option value="col-reverse"<?php echo ($tr['tile']['sequence'] == 'col-reverse') ? ' selected="selected"' : '' ?>><?php _e('Col-reverse', 'LayerSlider') ?></option>
<option value="random"<?php echo ($tr['tile']['sequence'] == 'random') ? ' selected="selected"' : '' ?>><?php _e('Random', 'LayerSlider') ?></option>
</select>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody class="transition">
<tr>
<td class="right"><?php _e('Duration', 'LayerSlider') ?></td>
<td><input type="text" name="duration" value="<?php echo $tr['transition']['duration'] ?>" data-help="<?php _e('The duration of the animation. This value is in millisecs, so the value 1000 measn 1 second.', 'LayerSlider') ?>"></td>
<td class="right"><a href="http://easings.net/" target="_blank"><?php _e('Easing', 'LayerSlider') ?></a></td>
<td>
<select name="easing" data-help="<?php _e('The timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the link next to this select field to open easings.net for more information and real-time examples.', 'LayerSlider') ?>">
<option<?php echo ($tr['transition']['easing'] == 'linear') ? ' selected="selected"' : '' ?>>linear</option>
<option<?php echo ($tr['transition']['easing'] == 'swing') ? ' selected="selected"' : '' ?>>swing</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInQuad') ? ' selected="selected"' : '' ?>>easeInQuad</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutQuad') ? ' selected="selected"' : '' ?>>easeOutQuad</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutQuad') ? ' selected="selected"' : '' ?>>easeInOutQuad</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInCubic') ? ' selected="selected"' : '' ?>>easeInCubic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutCubic') ? ' selected="selected"' : '' ?>>easeOutCubic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutCubic') ? ' selected="selected"' : '' ?>>easeInOutCubic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInQuart') ? ' selected="selected"' : '' ?>>easeInQuart</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutQuart') ? ' selected="selected"' : '' ?>>easeOutQuart</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutQuart') ? ' selected="selected"' : '' ?>>easeInOutQuart</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInQuint') ? ' selected="selected"' : '' ?>>easeInQuint</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutQuint') ? ' selected="selected"' : '' ?>>easeOutQuint</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutQuint') ? ' selected="selected"' : '' ?>>easeInOutQuint</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInSine') ? ' selected="selected"' : '' ?>>easeInSine</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutSine') ? ' selected="selected"' : '' ?>>easeOutSine</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutSine') ? ' selected="selected"' : '' ?>>easeInOutSine</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInExpo') ? ' selected="selected"' : '' ?>>easeInExpo</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutExpo') ? ' selected="selected"' : '' ?>>easeOutExpo</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutExpo') ? ' selected="selected"' : '' ?>>easeInOutExpo</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInCirc') ? ' selected="selected"' : '' ?>>easeInCirc</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutCirc') ? ' selected="selected"' : '' ?>>easeOutCirc</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutCirc') ? ' selected="selected"' : '' ?>>easeInOutCirc</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInElastic') ? ' selected="selected"' : '' ?>>easeInElastic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutElastic') ? ' selected="selected"' : '' ?>>easeOutElastic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutElastic') ? ' selected="selected"' : '' ?>>easeInOutElastic</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInBack') ? ' selected="selected"' : '' ?>>easeInBack</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutBack') ? ' selected="selected"' : '' ?>>easeOutBack</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutBack') ? ' selected="selected"' : '' ?>>easeInOutBack</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInBounce') ? ' selected="selected"' : '' ?>>easeInBounce</option>
<option<?php echo ($tr['transition']['easing'] == 'easeOutBounce') ? ' selected="selected"' : '' ?>>easeOutBounce</option>
<option<?php echo ($tr['transition']['easing'] == 'easeInOutBounce') ? 'selected="selected"' : '' ?>>easeInOutBounce</option>
</select>
</td>
</tr>
<tr>
<td class="right"><?php _e('Type', 'LayerSlider') ?></td>
<td>
<select name="type" data-help="<?php _e('The type of the animation, either slide, fade or both (mixed).', 'LayerSlider') ?>">
<option value="slide"<?php echo ($tr['transition']['type'] == 'slide') ? ' selected="selected"' : '' ?>><?php _e('Slide', 'LayerSlider') ?></option>
<option value="fade"<?php echo ($tr['transition']['type'] == 'fade') ? ' selected="selected"' : '' ?>><?php _e('Fade', 'LayerSlider') ?></option>
<option value="mixed"<?php echo ($tr['transition']['type'] == 'mixed') ? ' selected="selected"' : '' ?>><?php _e('Mixed', 'LayerSlider') ?></option>
</select>
</td>
<td class="right"><?php _e('Direction', 'LayerSlider') ?></td>
<td>
<select name="direction" data-help="<?php _e('The direction of the slide or mixed animation if you\'ve chosen this type in the previous settings.', 'LayerSlider') ?>">
<option value="top"<?php echo ($tr['transition']['direction'] == 'top') ? ' selected="selected"' : '' ?>><?php _e('Top', 'LayerSlider') ?></option>
<option value="right"<?php echo ($tr['transition']['direction'] == 'right') ? ' selected="selected"' : '' ?>><?php _e('Right', 'LayerSlider') ?></option>
<option value="bottom"<?php echo ($tr['transition']['direction'] == 'bottom') ? ' selected="selected"' : '' ?>><?php _e('Bottom', 'LayerSlider') ?></option>
<option value="left"<?php echo ($tr['transition']['direction'] == 'left') ? ' selected="selected"' : '' ?>><?php _e('Left', 'LayerSlider') ?></option>
<option value="random"<?php echo ($tr['transition']['direction'] == 'random') ? ' selected="selected"' : '' ?>><?php _e('Random', 'LayerSlider') ?></option>
<option value="topleft"<?php echo ($tr['transition']['direction'] == 'topleft') ? ' selected="selected"' : '' ?>><?php _e('Top left', 'LayerSlider') ?></option>
<option value="topright"<?php echo ($tr['transition']['direction'] == 'topright') ? ' selected="selected"' : '' ?>><?php _e('Top right', 'LayerSlider') ?></option>
<option value="bottomleft"<?php echo ($tr['transition']['direction'] == 'bottomleft') ? ' selected="selected"' : '' ?>><?php _e('Bottom left', 'LayerSlider') ?></option>
<option value="bottomright"<?php echo ($tr['transition']['direction'] == 'bottomright') ? ' selected="selected"' : '' ?>><?php _e('Bottom right', 'LayerSlider') ?></option>
</select>
</td>
</tr>
<tr>
<td class="right"><?php _e('RotateX', 'LayerSlider') ?></td>
<td><input type="text" name="rotateX" value="<?php echo !empty($tr['transition']['rotateX']) ? $tr['transition']['rotateX'] : '0' ?>" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the X axis. You can use negatuve values."></td>
<td class="right"><?php _e('RotateY', 'LayerSlider') ?></td>
<td><input type="text" name="rotateY" value="<?php echo !empty($tr['transition']['rotateY']) ? $tr['transition']['rotateY'] : '0' ?>" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Y axis. You can use negatuve values."></td>
</tr>
<tr>
<td class="right"><?php _e('RotateZ', 'LayerSlider') ?></td>
<td><input type="text" name="rotate" value="<?php echo !empty($tr['transition']['rotate']) ? $tr['transition']['rotate'] : '0' ?>" data-help="The initial rotation of the individual tiles which will be animated to the default (0deg) value around the Z axis. You can use negatuve values."></td>
<td class="right"><?php _e('Scale', 'LayerSlider') ?></td>
<td><input type="text" name="scale" value="<?php echo !empty($tr['transition']['scale']) ? $tr['transition']['scale'] : '1.0' ?>" data-help="The initial scale of the individual tiles which will be animated to the default (1.0) value."></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4"><?php _e('Transition options', 'LayerSlider') ?></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<button class="button-primary ls-tr-remove"><?php _e('Remove transition', 'LayerSlider') ?></button>
</td>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
<?php else : ?>
<div class="ls-no-transitions-notification">
<h1><?php _e("You didn't create any 2D transitions yet", "LayerSlider") ?></h1>
<p><?php _e('To create a new transition, click to the \"Add new\" button above.', 'LayerSlider') ?></p>
</div>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
</div>
<div class="ls-publish">
<?php if(is_writable($upload_dir['basedir'])) : ?>
<button class="button button-primary button-hero"><?php _e('Save changes', 'LayerSlider') ?></button>
<?php else : ?>
<?php _e('Before you can save your changes, you need to make your "/wp-content/uploads" folder writable. See the <a href="http://codex.wordpress.org/Changing_File_Permissions" target="_blank">Codex</a>', 'LayerSlider') ?>
<?php endif; ?>
</div>
</form>
</div>
<script type="text/javascript">
var lsTrImgPath = '<?php echo LS_ROOT_URL ?>/static/img/';
var lsScreenOptions = <?php echo json_encode($lsScreenOptions) ?>;
</script>
<!-- Help menu WP Pointer -->
<?php
// Get users data
global $current_user;
get_currentuserinfo();
if(get_user_meta($current_user->ID, 'layerslider_builder_help_wp_pointer', true) != '1') {
add_user_meta($current_user->ID, 'layerslider_builder_help_wp_pointer', '1'); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#contextual-help-link-wrap').pointer({
pointerClass : 'ls-help-pointer',
pointerWidth : 320,
content: '<h3><?php _e('Transition Builder documentation', 'LayerSlider') ?></h3><div class="inner"><?php _e('To get started with the LayerSlider WP Transition Builder, please read our online documentation by clicking on this help menu.', 'LayerSlider') ?></div>',
position: {
edge : 'top',
align : 'right'
}
}).pointer('open');
});
</script>
<?php } ?>
Zerion Mini Shell 1.0