????
Your IP : 216.73.216.152
<?php
global $wpdb,$objCloudSlider;
$sliderid=isset($_GET['id'])?$_GET['id']:'';
if($sliderid=='' && (isset($_GET['type']) && $_GET['type']=='new')){
$sliderid=$objCloudSlider->fnInsertNewSlider();
}
$slider_data=(array)$objCloudSlider->fnGetSliderData($sliderid);
$slider = base64_decode($slider_data['data']);
$slider = unserialize($slider);
$slider_settings = $slider['settings'];
$slider_callback = $slider['callbacks'];
$queryArgs = array(
'post_status' => 'publish',
'limit' => 1,
'post_type' => "post",
'orderby' => 'date',
'order' => 'desc'
);
$postdata=get_post($queryArgs);
$postid=$postdata->ID;
$main_pre_css = $slider_settings['slider-width'] ? "width:".$slider_settings['slider-width']."px;" : 'width:1000px;';
$main_pre_css .= $slider_settings['slider-height'] ? "height:".$slider_settings['slider-height']."px;" : 'height:500px;';
$backLink='admin.php?page=cloud-slider-list';
if(count($slider_data)>0){
?>
<div class="cloud_slider_panel edit">
<div class='popup-trans-layer'><span><img src='<?php echo CS_ROOT_URL; ?>/images/loading.gif' alt='Loading...'><p class="successMsg"><strong>Page is loading, Please wait ...</strong></p></span></div>
<?php
if(isset($_REQUEST["msg"]) && $_REQUEST["msg"]=="success")
{
?>
<div class="cs_msg_right"><i class="fa fa-check"></i> Slider Saved.</div>
<?php
}?>
<input type="hidden" name="editid" id="editid" value="<?php echo $sliderid?>"/>
<form action="?page=cloud-slider&action=edit&id=<?php echo $sliderid?>" method="post" id="frmslider">
<input type="hidden" value="<?php echo $sliderid; ?>" name="id" >
<input type="hidden" value="" name="hdnPreview" id="hdnPreview">
<div class="main_heading">
<h2>
Edit Slider : <?php echo isset($slider_data['name']) && $slider_data['name'] ? stripcslashes($slider_data['name']) : 'Edit Slider: '.$sliderid; ?>
<a href="<?php echo $backLink;?>" class="btn-link">Back to list</a>
</h2>
</div>
<div class="cloud_slider_wrapper">
<div class="cloud_slider_settings_panel hidden">
<div class="slider-heading">
<div class="float-left slider-name">
<input type="text" value="<?php echo stripcslashes($slider_data['name']); ?>" class="input-long" placeholder="Edit Slider <?php echo $sliderid;?>" name="slider-name"/>
</div>
<div class="slider-slug">
Slider slug : e.g hompageslider
</div>
</div>
<div class="slide-container slides-options hidden" id="slider-settings">
<div class="setting-data options hidden" id="layout-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-newspaper-o"></i>General Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container" id="setting_accordion">
<h3 class="accordion-head-active">Layout settings<span class="float-right"><i class="fa fa-minus-circle"></i></span></h3>
<div class="accordion_conatiner">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td class="text-right">Slider Width</td>
<td><input type="number" min="100" step="10" class="input-small1 slider-width keypressFilter" name="slider-width" value="<?php echo isset($slider_settings['slider-width']) && $slider_settings['slider-width']? $slider_settings['slider-width'] : '1000' ; ?>"> px</td>
<td class="sub-head2">The width of the slider in pixels. Accepts percents, but is only recommended for full-width layout.</td>
</tr>
<tr>
<td class="text-right">Slider Height</td>
<td><input type="number" min="100" step="10" class="input-small1 slider-height keypressFilter" name="slider-height" value="<?php echo isset($slider_settings['slider-height']) && $slider_settings['slider-height'] ? $slider_settings['slider-height'] : '500' ; ?>"> px</td>
<td class="sub-head2">The height of the slider in pixels.</td>
</tr>
<tr>
<td class="text-right">Responsive</td>
<td><input type="checkbox" class="checkbox" name="responsive" <?php if(isset($slider_settings['responsive']) && $slider_settings['responsive']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Responsive mode provides optimal viewing experience across a wide range of devices (from desktop to mobile) by adapting and scaling your sliders for the viewing environment.</td>
</tr>
<tr>
<td class="text-right">Full-width</td>
<td><input type="checkbox" class="checkbox" name="full-width" <?php if(isset($slider_settings['full-width']) && $slider_settings['full-width']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Enable this option to force the slider to become full-width, even if your theme does not support such layout.</td>
</tr>
<tr>
<td class="text-right">Full-size</td>
<td><input type="checkbox" class="checkbox" name="full-size" <?php if(isset($slider_settings['full-size']) && $slider_settings['full-size']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Enable this option to force the slider to become full-size, even if your theme does not support such layout.</td>
</tr>
</table>
</div>
<h3 class="accordion-head">Appearence settings<span class="float-right"><i class="fa fa-plus-circle"></i></span></h3>
<div class="accordion_conatiner">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td class="text-right">Slider Skin</td>
<td>
<?php echo $objCloudSlider->fnGetSkinDropdown($slider_settings['skin']);?>
</td>
<td class="sub-head2">Cloud Slider comes with 18 built-in skins. You can use these skins with this option. While you set this option, you can still use all options like "arrow", "bullet" and "thumb" to customize the skin. </td>
</tr>
<tr>
<td class="text-right">Container background color</td>
<?php $color = $objCloudSlider->rgb2hex($slider_settings['container-color']);?>
<td><input type="text" class="input-medium minicolors container-bg-clr" name="container-color" value="<?php echo $color[0]; ?>" data-opacity="<?php echo $color[1]?>"></td>
<td class="sub-head2">Background-color of slider container.</td>
</tr>
<tr>
<td class="text-right">Container border</td>
<td><input type="text" class="input-medium container-border" name="container-border" value="<?php echo $slider_settings['container-border']; ?>"></td>
<td class="sub-head2">Padding of the slider container. You can set like this : '1px 2px 3px 4px' or '5px'.</td>
</tr>
<tr>
<td class="text-right">Container box shadow</td>
<td><input type="text" class="input-medium container-box-shadow" name="container-box-shadow" value="<?php echo $slider_settings['container-box-shadow']; ?>"></td>
<td class="sub-head2">Box shadow of slider container. You can set like this : '0px 2px 30px 0px #000'.</td>
</tr>
<tr>
<td class="text-right">Progress bar position</td>
<td>
<select name="proress-bar-pos" class="element-cls input-medium progressbar-pos">
<option <?php if($slider_settings['proress-bar-pos']=="top"){ echo "selected='selected'"; } ?> value="top">Top</option>
<option <?php if($slider_settings['proress-bar-pos']=="bottom"){ echo "selected='selected'"; } ?> value="bottom">Bottom</option>
<option <?php if($slider_settings['proress-bar-pos']=="hidden"){ echo "selected='selected'"; } ?> value="hidden">Hidden</option>
</select>
</td>
<td class="sub-head2">Progress bar position in slider. Progress bar won't be shown with "hidden" value.</td>
</tr>
<tr>
<td class="text-right">Progress bar color</td>
<?php $color = $objCloudSlider->rgb2hex($slider_settings['progress-bar-color']);?>
<td><input type="text" class="input-medium minicolors progressbar-clr" name="progress-bar-color" value="<?php echo $color[0] ?>" data-opacity="<?php echo $color[1]?>"></td>
<td class="sub-head2">Progress bar color. Default color is grey: "#aaa".</td>
</tr>
<tr>
<td class="text-right">Progress bar thickness</td>
<td><input type="number" min="0" step="1" class="input-small1 progressbar-thick keypressFilter" name="progress-bar-thick" value="<?php echo $slider_settings['progress-bar-thick'] ? $slider_settings['progress-bar-thick'] : '3'; ?>"> px</td>
<td class="sub-head2">Progress bar thick. You can set this option as number or in pixel. </td>
</tr>
<tr>
<td class="text-right">Loader Image</td>
<td>
<input type="text" class="input-medium img-loader" name="img-loader" value="<?php echo isset($slider_settings['img-loader']) && $slider_settings['img-loader']!='' && $slider_settings['img-loader']!='0' ? $slider_settings['img-loader'] : CS_ROOT_URL. '/library/skins/default/loading.gif'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Image source string for the loader gif. The default image path is [cloudslider_library_path]/img/loading.gif. You can upload your own loading gif image and then change this option so that it replaces the default image.</td>
</tr>
<tr>
<td class="text-right">Lazy load images</td>
<td><input type="checkbox" class="checkbox" name="image-lazyload" <?php if($slider_settings['image-lazyload']){ echo "checked='checked'"; } ?></td>
<td class="sub-head2">Lazy image load mode for performance. </td>
</tr>
<tr>
<td class="text-right">Navigation type</td>
<td>
<select name="navigation-type" class="element-cls input-medium">
<option <?php if($slider_settings['navigation-type']=="bullet"){ echo "selected='selected'"; } ?> value="bullet">Bullet</option>
<option <?php if($slider_settings['navigation-type']=="thumb"){ echo "selected='selected'"; } ?> value="thumb">Thumb</option>
<option <?php if($slider_settings['navigation-type']=="none"){ echo "selected='selected'"; } ?> value="none">None</option>
</select>
</td>
<td class="sub-head2">Switching thumbnail navigation or bullet navigation. You can hide any navigation with "none" value. </td>
</tr>
<tr>
<td class="text-right">Custom Styles</td>
<td><textarea class="input-medium custom-styles" name="custom-styles"><?php echo isset($slider_settings['custom-styles']) ? $slider_settings['custom-styles'] : ''; ?></textarea></td>
<td class="sub-head2">Global Custom Styles. You can define your own custom styles here. </td>
</tr>
</table>
</div>
<h3 class="accordion-head">Slider behaviour<span class="float-right"><i class="fa fa-plus-circle"></i></span></h3>
<div class="accordion_conatiner">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td class="text-right">Auto slideshow</td>
<td><input type="checkbox" class="checkbox" name="start-slide-show" <?php if($slider_settings['start-slide-show']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Slideshow will automatically start after pages have loaded.</td>
</tr>
<tr>
<td class="text-right">Auto slide / carousel</td>
<td>
<select name="auto-slide-carousel" class="element-cls input-medium auto-slide-carousel">
<option <?php if($slider_settings['auto-slide-carousel']=="slide"){ echo "selected='selected'"; } ?> value="slide">Slide</option>
<option <?php if($slider_settings['auto-slide-carousel']=="carousel"){ echo "selected='selected'"; } ?> value="carousel">Carousel</option>
<option <?php if($slider_settings['auto-slide-carousel']=="combine"){ echo "selected='selected'"; } ?> value="combine">Combine</option>
</select>
</td>
<td class="sub-head2">Option to determine whether slides or carousel layers in each slide will slide automatically. </td>
</tr>
<tr>
<td class="text-right">Pause on hover</td>
<td><input type="checkbox" class="checkbox" name="pause-on-hover" <?php if(isset($slider_settings['pause-on-hover']) && $slider_settings['pause-on-hover']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Slideshow will temporally pause when someone moves the mouse cursor over the slider.</td>
</tr>
<tr>
<td class="text-right">Start with slide #</td>
<td><input type="number" min="1" step="1" class="input-medium keypressFilter" name="start-with-slide" value="<?php echo isset($slider_settings['start-with-slide']) ? $slider_settings['start-with-slide'] : '1'; ?>"></td>
<td class="sub-head2">The slider will start with the specified slide. You can use the value "random".</td>
</tr>
<tr>
<td class="text-right">Shuffle mode</td>
<td><input type="checkbox" class="checkbox" name="shuffle-mode" <?php if(isset($slider_settings['shuffle-mode']) && $slider_settings['shuffle-mode']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Slideshow will proceed in random order.</td>
</tr>
<tr>
<td class="text-right">Keyboard navigation</td>
<td><input type="checkbox" class="checkbox" name="keyboard-navigation" <?php if($slider_settings['keyboard-navigation'] && $slider_settings['keyboard-navigation']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Using keyboard navigation. Slider will slide to previous by left arrow keypress and to next by right arrow keypress.</td>
</tr>
</table>
</div>
</div>
</div>
<div class="setting-data options hidden" id="arrow-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-arrow-left"></i>Arrow Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="option-head">Arrow Settings</td>
</tr>
<tr>
<td class="text-right">Visibility</td>
<td>
<select name="arrow-visibility" class="element-cls input-medium">
<option <?php if($slider_settings['arrow-visibility']=="hover"){ echo "selected='selected'"; } ?> value="hover">Hover</option>
<option <?php if($slider_settings['arrow-visibility']=="show"){ echo "selected='selected'"; } ?> value="show">Show</option>
<option <?php if($slider_settings['arrow-visibility']=="hide"){ echo "selected='selected'"; } ?> value="hide">Hide</option>
</select>
</td>
<td class="sub-head2">Visibility of navigation arrows. "hover" means arrows will be shown/hidden on hover on slider. "show" means arrows will always be shown and "hide" means arrows will always be hidden. </td>
</tr>
<tr>
<td class="text-right">Arrow horizontal offset</td>
<td>
<input type="number" class="input-small1 keypressFilter arrow-pos-offset" name="arrow-pos" value="<?php echo isset($slider_settings['arrow-pos']) ? $slider_settings['arrow-pos'] : '20'; ?>" /> px
</td>
<td class="sub-head2">Sets the position of the arrows. You can set arrows' horizontal offset in pixels from left & right edge of the slider. Negative value is available for this option.</td>
</tr>
<tr>
<td class="text-right">Previous arrow image</td>
<td>
<input type="text" class="input-medium prev-arrow-img" name="left-arrow-img" value="<?php echo isset($slider_settings['left-arrow-img']) ? $slider_settings['left-arrow-img'] : CS_ROOT_URL.'/library/skins/default/left_arrow.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Image source string for the left arrow. The default image path is [cloudslider_library_path]/img/left_arrow.png. You can upload your own arrow image and then change this option so that it replaces the default image.</td>
</tr>
<tr>
<td class="text-right">Next arrow image</td>
<td>
<input type="text" class="input-medium next-arrow-img" name="right-arrow-img" value="<?php echo isset($slider_settings['right-arrow-img']) && $slider_settings['right-arrow-img']!='' && $slider_settings['right-arrow-img']!='0' ? $slider_settings['right-arrow-img'] : CS_ROOT_URL.'/library/skins/default/right_arrow.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Image source string for the right arrow. The default image path is [cloudslider_library_path]/img/right_arrow.png. You can upload your own arrow image and then change this option so that it replaces the default image.</td>
</tr>
<tr>
<td class="text-right">Prevoius hover arrow image</td>
<td>
<input type="text" class="input-medium prev-hover-arrow-img" name="left-hover-arrow-img" value="<?php echo isset($slider_settings['left-hover-arrow-img']) && $slider_settings['left-hover-arrow-img']!='' && $slider_settings['left-hover-arrow-img']!='0' ? $slider_settings['left-hover-arrow-img'] : CS_ROOT_URL.'/library/skins/default/left_arrow_activated.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Image source string for the left arrow hovered. The default image path is [cloudslider_library_path]/img/left_arrow_activated.png. You can upload your own arrow image and then change this option so that it replaces the default image.</td>
</tr>
<tr>
<td class="text-right">Next hover arrow image</td>
<td>
<input type="text" class="input-medium next-hover-arrow-img" name="right-hover-arrow-img" value="<?php echo isset($slider_settings['right-hover-arrow-img']) && $slider_settings['right-hover-arrow-img']!='' && $slider_settings['right-hover-arrow-img']!='0' ? $slider_settings['right-hover-arrow-img'] : CS_ROOT_URL.'/library/skins/default/right_arrow_activated.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2"> Image source string for the right arrow hovered. The default image path is [cloudslider_library_path]/img/right_arrow_activated.png. You can upload your own arrow image and then change this option so that it replaces the default image.</td>
</tr>
<tr>
<td class="text-right">Responsive level</td>
<td>
<input type="number" step="0.1" min="0.1" class="input-medium keypressFilter arrow-responsive-level" name="arrow-responsive-level" value="<?php echo isset($slider_settings['arrow-responsive-level']) ? $slider_settings['arrow-responsive-level'] : '2' ?>" />
</td>
<td class="sub-head2"> Responsive level of the arrows. Normal responsive level is 1. But it makes arrows too small in mobile browsers. If we set this option to bigger than 1, arrows won't be such small in mobile browsers.</td>
</tr>
</table>
</div>
</div>
<div class="setting-data options hidden" id="bullet-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-list-ul"></i>Bullet Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="option-head">Bullet Settings</td>
</tr>
<tr>
<td class="text-right">Visibility</td>
<td>
<select name="bullet-visibility" class="element-cls input-medium">
<option <?php if($slider_settings['bullet-visibility']=="hover"){ echo "selected='selected'"; } ?> value="hover">Hover</option>
<option <?php if($slider_settings['bullet-visibility']=="show"){ echo "selected='selected'"; } ?> value="show">Show</option>
</select>
</td>
<td class="sub-head2">Visibility of navigation bullets. "hover" means bullets will be shown/hidden on hover on slider. "show" means bullets will always be shown.</td>
</tr>
<tr>
<td class="text-right">Bullet position</td>
<td>
<?php echo $objCloudSlider->fnGetBulletPositionDropdown($slider_settings['bullet-pos']);?>
</td>
<td class="sub-head2"> Position of the navigation bullets. "bottom_center" means bullets container will be shown at bottom center of the slider. </td>
</tr>
<tr>
<td class="text-right">Horizontal Offset</td>
<td><input type="number" step="1" class="input-small1 keypressFilter bullet-horizontal-offset" name="horizontal-offset" value="<?php echo isset($slider_settings['horizontal-offset']) ? $slider_settings['horizontal-offset'] : '0'; ?>"> px</td>
<td class="sub-head2">Horizontal offset in pixel of the bullet container from current position set with 'position' option.</td>
</tr>
<tr>
<td class="text-right">Vertical Offset</td>
<td><input type="number" step="1" class="input-small1 keypressFilter bullet-vertical-offset" name="vertical-offset" value="<?php echo isset($slider_settings['vertical-offset']) ? $slider_settings['vertical-offset'] : '0'; ?>"> px</td>
<td class="sub-head2">Vertical offset in pixel of the bullet container from current position set with 'position' option.</td>
</tr>
<tr>
<td class="text-right">Bullet opacity</td>
<td><input type="number" step="0.1" class="input-medium keypressFilter bullet-opacity" min="0" max="1" name="bullet-opacity" value="<?php echo isset($slider_settings['bullet-opacity']) ? $slider_settings['bullet-opacity'] : '1'; ?>"></td>
<td class="sub-head2">Opacity of bullet items. </td>
</tr>
<tr>
<td class="text-right">Active bullet opacity</td>
<td><input type="number" step="0.1" class="input-medium keypressFilter bullet-active-opacity" min="0" max="1" name="active-bullet-opacity" value="<?php echo isset($slider_settings['active-bullet-opacity']) ? $slider_settings['active-bullet-opacity'] : '1'; ?>"></td>
<td class="sub-head2">Opacity of activated bullet items.</td>
</tr>
<tr>
<td class="text-right">Bullet image</td>
<td>
<input type="text" class="input-medium bullet-img" name="bullet-img" value="<?php echo isset($slider_settings['bullet-img']) && $slider_settings['bullet-img']!='' ? $slider_settings['bullet-img'] : CS_ROOT_URL.'/library/skins/default/bullet_item.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2"> Image source string of bullet items. The default image path is [cloudslider_library_path]/img/bullet_item.png. You can upload your own bullet image and then change this option so that it features instead of the default. </td>
</tr>
<tr>
<td class="text-right">Active bullet image</td>
<td>
<input type="text" class="input-medium bullet-active-img" name="active-bullet-img" value="<?php echo isset($slider_settings['active-bullet-img']) && $slider_settings['active-bullet-img']!='' ? $slider_settings['active-bullet-img'] : CS_ROOT_URL.'/library/skins/default/bullet_item_activated.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2"> Image source string of an activated bullet item. Default image path is [cloudslider_library_path]/img/bullet_item_activated.png. You can upload your own image and then change this option so that it features instead of the default. </td>
</tr>
<tr>
<td class="text-right">Bullet left container image</td>
<td>
<input type="text" class="input-medium bullet-left-container-img" name="bullet-left-container-img" value="<?php echo isset($slider_settings['bullet-left-container-img']) && $slider_settings['bullet-left-container-img']!='' ? $slider_settings['bullet-left-container-img'] : '' ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Image source string of left section of bullet container. By default it's empty string so bullet container will contain only bullet images, but you can upload your own image and then change this option so that bullet container will contain that image at the left side of it. Please check following skins so you can see left & right images different from bullet item images: "Light Iron", "Dark Iron", "Dark Rounded Longish".</td>
</tr>
<tr>
<td class="text-right">Bullet right container image</td>
<td>
<input type="text" class="input-medium bullet-right-container-img" name="bullet-right-container-img" value="<?php echo isset($slider_settings['bullet-right-container-img']) ? $slider_settings['bullet-right-container-img'] : '' ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2"> Image source string of right section of bullet container. By default it's empty string so bullet container will contain only bullet images, but you can upload your own image and then change this option so that bullet container will contain that image at the right side of it. Please check following skins so you can see left & right images different from bullet item images: "Light Iron", "Dark Iron", "Dark Rounded Longish". </td>
</tr>
<tr>
<td class="text-right">Margin of bullet</td>
<td>
<input type="text" class="input-medium bullet-margin" name="bullet-margin" value="<?php echo $slider_settings['bullet-margin'] != '' ? $slider_settings['bullet-margin'] : '5px 5px 5px 5px' ?>" />
</td>
<td class="sub-head2">Margin of each bullet item. You can set this option like this: "5px 5px 5px 5px". It's exactly like margin property in css. So it's like "{top} {right} {bottom} {left}".</td>
</tr>
<tr>
<td class="text-right">Responsive level</td>
<td>
<input type="number" step="0.1" min="0.1" class="input-medium keypressFilter bullet-responsive-level" name="bullet-responsive-level" value="<?php echo isset($slider_settings['bullet-responsive-level']) ? $slider_settings['bullet-responsive-level'] : '2' ?>" />
</td>
<td class="sub-head2">Responsive level of the bullets. Normal responsive level is 1. But it makes bullets too small in mobile browsers. If we set this option to bigger than 1, bullets won't be such small in mobile browsers.</td>
</tr>
</table>
</div>
</div>
<div class="setting-data options hidden" id="thumb-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-picture-o"></i>Thumbnail Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="option-head">Thumbnail Setting</td>
</tr>
<tr>
<td class="text-right">Visibility</td>
<td>
<select name="thumb-visibility" class="element-cls input-medium">
<option <?php if($slider_settings['thumb-visibility']=="hover"){ echo "selected='selected'"; } ?> value="hover">Hover</option>
<option <?php if($slider_settings['thumb-visibility']=="show"){ echo "selected='selected'"; } ?> value="show">Show</option>
</select>
</td>
<td class="sub-head2">Visibility of navigation thumbnail. "hover" means thumbnail will be shown/hidden on hover on slider. "show" means thumbnail will always be shown.</td>
</tr>
<tr>
<td class="text-right">Container position offset</td>
<td><input type="text" class="input-medium thumb-position-offset" name="thumb-position-offset" value="<?php echo isset($slider_settings['thumb-position-offset']) ? $slider_settings['thumb-position-offset'] : 'outside' ?>"></td>
<td class="sub-head2">Sets the position of the thumbnail container. "inside" means thumbnail container will appear within the slider and "outside" means thumbnail container will appear below the slider. You can also set thumbnail container's vertical offset as pixels from bottom edge of the slider. Negative value is available for this option.</td>
</tr>
<tr>
<td class="text-right">Container width</td>
<td><input type="text" class="input-medium thumb-container-width" name="thumb-container-width" value="<?php echo isset($slider_settings['thumb-container-width']) ? $slider_settings['thumb-container-width'] : 'auto'; ?>"></td>
<td class="sub-head2">Width of the thumbnail navigation container. Container width will be fit automatically as the sum of the widths of all thumbnail items. If this sum is bigger than the slider container width, it will be just the slider container width. You can also set it statically as a pixel value or a percentage of the slider container width.</td>
</tr>
<tr>
<td class="text-right">Container bg color</td>
<td><input type="text" class="input-medium thumb-bg-color minicolors" name="thumb-bg-color" value="<?php $color = $objCloudSlider->rgb2hex($slider_settings['thumb-bg-color']); echo $color[0] ?>" data-opacity="<?php echo $color[1]?>"></td>
<td class="sub-head2">Background color of thumbnail navigation container. You can set this option like this: "#00ff00" or "Green" </td>
</tr>
<tr>
<td class="text-right">Container padding</td>
<td><input type="text" class="input-medium thumb-container-padding" name="thumb-container-padding" value="<?php echo isset($slider_settings['thumb-container-padding']) ? $slider_settings['thumb-container-padding'] : '5px'; ?>"></td>
<td class="sub-head2">Margin of thumbnail container. You can set this option like this: "5px 5px 5px 5px". It's exactly like the padding property in css. So it's like "{top} {right} {bottom} {left}".</td>
</tr>
<tr>
<td class="text-right">Thumb item size</td>
<td>
<input type="number" min="0" class="input-small1 keypressFilter" name="thumb-width" placeholder="Width" value="<?php echo stripslashes($slider_settings['thumb-width']); ?>" /> px
<input type="number" min="0" class="input-small1 keypressFilter" name="thumb-height" placeholder="Height" value="<?php echo stripslashes($slider_settings['thumb-height']); ?>" /> px
</td>
<td class="sub-head2">Size of the thumbnail item images. Thumbnail images will be shown with their original dimension. But if you set these options their dimension will be adjusted. You can set width and height like 30 or 30px.</td>
</tr>
<tr>
<td class="text-right">Thumb item margin</td>
<td>
<input type="text" class="input-medium thumb-margin" name="thumb-margin" value="<?php echo isset($slider_settings['thumb-margin']) ? $slider_settings['thumb-margin'] : '2px 1px' ?>" />
</td>
<td class="sub-head2"> Margin of each thumbnail item. You can set this option like this: "1px 2px 3px 4px". It's exactly like margin property in css. So it's like "{top} {right} {bottom} {left}".</td>
</tr>
<tr>
<td class="text-right">Thumb border width</td>
<td><input type="number" class="input-small1 keypressFilter thumb-border-width" step="1" min="0" name="thumb-border-width" value="<?php echo isset($slider_settings['thumb-border-width']) ? $slider_settings['thumb-border-width'] : '3'?>"> px</td>
<td class="sub-head2"> Border width of each thumbnail item. </td>
</tr>
<tr>
<td class="text-right">Thumb border color</td>
<td><input type="text" class="input-medium thumb-border-color minicolors" name="thumb-border-color" value="<?php $color = $objCloudSlider->rgb2hex($slider_settings['thumb-border-color']); echo $color[0] ?>" data-opacity="<?php echo $color[1]?>"></td>
<td class="sub-head2">Border color of each thumbnail item. You can set this option like this: "#00FF00" or "Green".</td>
</tr>
<tr>
<td class="text-right">Active Thumb border color</td>
<td><input type="text" class="input-medium thumb-active-border-color minicolors" name="active-thumb-border-color" value="<?php $color = $objCloudSlider->rgb2hex($slider_settings['active-thumb-border-color']); echo $color[0] ?>" data-opacity="<?php echo $color[1]?>"></td>
<td class="sub-head2">Border color of activated thumbnail item. You can set this option like this: "#00FF00" or "Green".</td>
</tr>
<tr>
<td class="text-right">Thumb opacity</td>
<td><input type="number" step="0.1" min="0" max="1" class="input-medium keypressFilter thumb-opacity" name="thumb-opacity" value="<?php echo isset($slider_settings['thumb-opacity']) ? $slider_settings['thumb-opacity'] : '0.6'; ?>"></td>
<td class="sub-head2">Opacity of thumbnail items. </td>
</tr>
<tr>
<td class="text-right">Active Thumb opacity</td>
<td><input type="number" step="0.1" min="0" max="1" class="input-medium keypressFilter thumb-active-opacity" name="active-thumb-opacity" value="<?php echo isset($slider_settings['active-thumb-opacity']) ? $slider_settings['active-thumb-opacity'] : '1'; ?>"></td>
<td class="sub-head2">Opacity of activated thumbnail items.</td>
</tr>
<tr>
<td class="text-right">Responsive level</td>
<td>
<input type="number" step="0.1" min="0.1" class="input-medium keypressFilter thumb-responsive-level" name="thumb-responsive-level" value="<?php echo isset($slider_settings['thumb-responsive-level']) ? $slider_settings['thumb-responsive-level'] : '1.3' ?>" />
</td>
<td class="sub-head2">Responsive level of the thumbnails. Normal responsive level is 1. But it makes thumbnails too small in mobile browsers. If we set this option to bigger than 1, thumbnails won't be such small in mobile browsers.</td>
</tr>
<tr>
<td class="text-right">No thumb image</td>
<td>
<input type="text" class="input-medium no-thumb-img" name="no-thumb-img" value="<?php echo isset($slider_settings['no-thumb-img']) && $slider_settings['no-thumb-img']!='' ? $slider_settings['no-thumb-img'] : CS_ROOT_URL. '/library/skins/default/no_thumb.png'; ?>" /><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="sub-head2">Some slides have no background image or thumbnail image. In that case this option will be effective.</td>
</tr>
</table>
</div>
</div>
<div class="setting-data options hidden" id="video-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-video-camera"></i>Video Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="option-head">Video Setting</td>
</tr>
<tr>
<td class="text-right">Auto play</td>
<td><input type="checkbox" class="checkbox" name="auto-play" <?php if(isset($slider_settings['auto-play']) && $slider_settings['auto-play']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Videos will play automatically with this option set to true once it's shown.</td>
</tr>
<tr>
<td class="text-right">Pause when playing </td>
<td><input type="checkbox" class="checkbox" name="pause-when-playing" <?php if(isset($slider_settings['pause-when-playing']) && $slider_settings['pause-when-playing']){ echo "checked='checked'"; } ?>></td>
<td class="sub-head2">Slider will be paused while video is playing. Once you pause the video or video playing finished, slider will be resumed.</td>
</tr>
</table>
</div>
</div>
</div>
<div class="slide-container slides-options hidden" id="events">
<div class="options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-rotate-left"></i>Event Callbacks <span>Slider Object : $('.cloud-container')</span></div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<div class="event-callbacks">
<table class="slide-table" cellpadding="0" cellspacing="0">
<tr>
<td class="subhead-td" valign="top">onInit | <span class="info">Calling after slider initialized.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onInit : function() { </td>
</tr>
<tr>
<td>
<textarea rows="4" cols="75" class="cs-textarea" name="callback-onInit"><?php echo trim(stripcslashes($slider_callback['callback-onInit'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onResume | <span class="info">Calling when slider is resumed.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onResume : function() { </td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onResume"><?php echo trim(stripcslashes($slider_callback['callback-onResume'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onPause | <span class="info">Calling when slider is paused.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onPause : function() { </td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onPause"><?php echo trim(stripcslashes($slider_callback['callback-onPause'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onPrev | <span class="info">Calling when slider is slide to previous slide.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onPrev : function() { </td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onPrev"><?php echo trim(stripcslashes($slider_callback['callback-onPrev'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onNext | <span class="info">Calling when slider is slide to next slide.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onNext : function() { </td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onNext"><?php echo trim(stripcslashes($slider_callback['callback-onNext'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onSlideTo | <span class="info">Calling when slider is slide to specific slide.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onSlideTo : function() {</td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onSlideTo"><?php echo trim(stripcslashes($slider_callback['callback-onSlideTo'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onSlidingStart | <span class="info">Calling before slider is sliding</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onSlidingStart : function() {</td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onSlidingStart"><?php echo trim(stripcslashes($slider_callback['callback-onSlidingStart'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onSlidingComplete | <span class="info">Calling after sliding has completed</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onSlidingComplete : function() { </td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onSlidingComplete"><?php echo trim(stripcslashes($slider_callback['callback-onSlidingComplete'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onCloudClick | <span class="info">Calling when user clicked a layer. "target" is a jquery object of the layer element.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onCloudClick : function(target) {</td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onCloudClick"><?php echo trim(stripcslashes($slider_callback['callback-onCloudClick'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead-td" valign="top">onCloudHover | <span class="info">Calling when mouse hovered over a layer. "target" is a jquery object of the layer element.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="callback-table">
<tr>
<td class="sub-head">onCloudHover : function(target, isOver) {</td>
</tr>
<tr>
<td>
<textarea rows="6" cols="75" class="cs-textarea" name="callback-onCloudHover"><?php echo trim(stripcslashes($slider_callback['callback-onCloudHover'])); ?></textarea>
</td>
</tr>
<tr>
<td class="sub-head">}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="slide-container hidden" id="document"></div>
<div class="slide-container hidden" id="questions"></div>
<div class="slide-container" id="all-slides">
<a href="#" class="add-new-slide btn-link"><i class="fa fa-plus-circle"></i>Add New Slide</a>
<div id="slide-tabs">
<ul>
<?php
for($i = 0; $i < count($slider['layers']); $i++)
{
?>
<li><a href='#tabs-<?php echo ($i + 1)?>'>Slide#<?php echo ($i + 1)?></a><span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>
<?php
}
?>
</ul>
<?php
for($i = 0; $i < count($slider['layers']); $i++)
{
$main_slide = $slider['layers'][$i];
?>
<div id="tabs-<?php echo ($i +1)?>" slide-id='slide-<?php echo ($i +1)?>'>
<div class="preview-wrapper">
<?php
/*$main_slide_css = $slider_settings['background-image'] ? "background-image: url(".$slider_settings['background-image'].");" : '';*/
$pre_width=$slider_settings['slider-width'] ? $slider_settings['slider-width']."px;" : '1000px;';
$pre_height=$slider_settings['slider-height'] ? $slider_settings['slider-height']."px;" : '500px;';
?>
<div class="preview-container" >
<div class="preview" slide-id="slide-<?php echo ($i + 1)?>" style="<?php echo $main_pre_css; ?>">
<?php
if(isset($main_slide['properties']['background']) && $main_slide['properties']['background']!="")
{
$slide_css ="background-image:url(".$main_slide['properties']['background'].");";
if(isset($main_slide['properties']['kenburn']) && $main_slide['properties']['kenburn'])
{
list($width, $height, $type, $attr) = getimagesize($main_slide['properties']['background']);
$top="100";
$left="100";
if(isset($main_slide['properties']['position-from']) && $main_slide['properties']['position-from']=="top_left_per")
{
$top=$main_slide['properties']['position-from-top'];
$left=$main_slide['properties']['position-from-left'];
$slide_css .="background-position:".$top."% ".$left."%;";
}
else
$slide_css .="background-position:".str_replace("_"," ",$main_slide['properties']['position-from']).";";
if(isset($main_slide['properties']['scale-from']) && $main_slide['properties']['scale-from']!="")
{
$scale=$main_slide['properties']['scale-from']*100;
$factor = ($pre_width /$width);
$nheight = $height * $factor;
$hfactor = ($nheight / $pre_height)*$scale;
$slide_css .="background-size:".$scale."% ".$hfactor."%";
$nwidth = $width * $main_slide['properties']['scale-from']."px";
$nheight = $height * $main_slide['properties']['scale-from']."px";
//$slide_css .="height:$nheight;width:$nwidth";
}
else
{
$slide_css .="background-size:cover";
//$slide_css .="height:$height;width:$width";
}
}
?>
<div layerid='abc' class='main-bg-img' style="<?php echo $slide_css; ?>">
</div>
<?php
}
for($j = 0; $j < count($main_slide['sub_layer']); $j++)
{
$sub_layer = $main_slide['sub_layer'][$j]['properties'];
$temp_id = $main_slide['sub_layer'][$j]['properties']['layer_id'];
$main_slide['sub_layer'][$j]['layer_id'] = $temp_id;
$layer_style = '';
if(isset($sub_layer['custom_style'])){
if (isset($sub_layer['carousel-layer']) && $sub_layer['carousel-layer'] == 'on') {
$layer_style = ' style="'.$sub_layer['custom_style'].'"';
}
}
echo '<div layerid="'.$temp_id.'" class="preview_layer"'.$layer_style.'>';
$style_elements = 'z-index:'.($j+2).';';
if(isset($sub_layer['pos_width']) && $sub_layer['pos_width']!="")
{
if(strpos($sub_layer['pos_width'],"%")!==false || $sub_layer['pos_width'] == "auto" || strpos($sub_layer['pos_width'],"px")!==false){
$style_elements .= 'width:'.$sub_layer['pos_width'].';';
}else{
$style_elements .= 'width:'.$sub_layer['pos_width'].'px;';
}
}
if(isset($sub_layer['pos_height']) && $sub_layer['pos_height']!="")
{
if(strpos($sub_layer['pos_height'],"%")!==false || $sub_layer['pos_height'] == "auto" || strpos($sub_layer['pos_height'],"px")!==false){
$style_elements.= 'height:' . $sub_layer['pos_height'] . ';';
}else{
$style_elements.= 'height:' . $sub_layer['pos_height'] . 'px;';
}
}
if(isset($sub_layer['pos_top'])){
$style_elements .= 'top:'.$sub_layer['pos_top'].$sub_layer['pos_top_type'].';';
}
if(isset($sub_layer['pos_left'])){
$style_elements .= 'left:'.$sub_layer['pos_left'].$sub_layer['pos_left_type'].';';
}
if(isset($sub_layer['padding_top'])){
$style_elements .= 'padding-top:'.$sub_layer['padding_top'].'px;';
}
if(isset($sub_layer['padding_right'])){
$style_elements .= 'padding-right:'.$sub_layer['padding_right'].'px;';
}
if(isset($sub_layer['padding_bottom'])){
$style_elements .= 'padding-bottom:'.$sub_layer['padding_bottom'].'px;';
}
if(isset($sub_layer['padding_left'])){
$style_elements .= 'padding-left:'.$sub_layer['padding_left'].'px;';
}
if(isset($sub_layer['font_family'])){
$style_elements .= 'font-family:'.str_replace('"',"'",stripslashes($sub_layer['font_family'])).';';
}
if(isset($sub_layer['font_size'])){
$style_elements .= 'font-size:'.$sub_layer['font_size'].'px;';
}
if(isset($sub_layer['line_height'])){
$line_height=$sub_layer['line_height']=='Normal'?'Normal;':$sub_layer['line_height'].'px;';
$style_elements .= 'line-height:'.$line_height;
}
if(isset($sub_layer['font_color'])){
$style_elements .= 'color:'.$sub_layer['font_color'].';';
}
if(isset($sub_layer['radius'])){
$style_elements .= 'border-radius:'.$sub_layer['radius'].'px;';
}
if(isset($sub_layer['font_background'])){
$style_elements .= 'background-color:'.$sub_layer['font_background'].';';
}
if(isset($sub_layer['custom_style'])){
if (isset($sub_layer['carousel-layer']) && $sub_layer['carousel-layer'] == 'on') {
} else {
$style_elements .= $sub_layer['custom_style'];
}
}
if(isset($sub_layer['hide']) && $sub_layer['hide']){
$style_elements .="display:none";
}
$attr_elements = $sub_layer['id']?'id="'.$sub_layer['id'].'"':'';
$attr_elements .= $sub_layer['id']?'title="'.$sub_layer['title'].'"':'';
$attr_elements .= $sub_layer['id']?'alt="'.$sub_layer['alt'].'"':'';
$attr_elements .= $sub_layer['id']?'rel="'.$sub_layer['rel'].'"':'';
$dragdiv = "";
if(strpos($sub_layer['html'],"iframe") !== false)
$dragdiv='<div style="position:absolute;'.$style_elements.'"></div>';
switch($sub_layer['type']){
case 'image':
if($sub_layer['image'])
{
echo '<img '.$attr_elements.' src="'.$sub_layer['image'].'" class="drag-img draggable'.$sub_layer['classes'].'" style="position:relative;'.$style_elements.'" layerid="'.$temp_id.'" />';
}
break;
case 'html':
if($sub_layer['html']){
echo '<span '.$attr_elements.' class="draggable '.$sub_layer['classes'].'" style="position:relative;'.$style_elements.'">'.htmlspecialchars_decode(htmlentities(stripcslashes($sub_layer['html']))).'<span class="hoverLayer"></span>';
}
break;
case 'dynamic_text':
/*if($sub_layer["hidden_post_id"]!="")
{
get_post($sub_layer["hidden_post_id"]);
$post=get_post($sub_layer['hidden_post_id']);
if($sub_layer['url'] && $sub_layer['url']!="")
$layer_data = '<div '.$attr.$attr_elements.' class="kr-cloud'.$cls.'" style="'.$style_elements.'" '.$tran_in.' '.$tran_out.' data-title="'.$sub_layer['subtitle'].'" '.$link.'><a '.$link.'>'.cs_get_content_with_format(stripcslashes($sub_layer['dynamic_text']), $sub_layer['text-limit'],$post,"str").'</a></div>';
else
$layer_data = '<div '.$attr.$attr_elements.' class="kr-cloud'.$cls.'" style="'.$style_elements.'" '.$tran_in.' '.$tran_out.' data-title="'.$sub_layer['subtitle'].'" '.$link.'>'.cs_get_content_with_format(stripcslashes($sub_layer['dynamic_text']), $sub_layer['text-limit'],$post,"str").'</div>';
}
else
{
if($layer['url'] && $layer['url']!="")
$layer_data = '<div '.$attr.$attr_elements.' class="kr-cloud'.$cls.'" style="'.$style_elements.'" '.$tran_in.' '.$tran_out.' data-title="'.$sub_layer['subtitle'].'" '.$link.'><a '.$link.'>'.stripcslashes($sub_layer['dynamic_text']).'</a></div>';
else
$layer_data = '<div '.$attr.$attr_elements.' class="kr-cloud'.$cls.'" style="'.$style_elements.'" '.$tran_in.' '.$tran_out.' data-title="'.$sub_layer['subtitle'].'" '.$link.'>'.stripcslashes($sub_layer['dynamic_text']).'</div>';
}*/
$temp=isset($sub_layer['dynamic_text']) && $sub_layer['dynamic_text']!=""?stripcslashes($sub_layer['dynamic_text']):"";
echo '<span '.$attr_elements.' class="draggable '.$sub_layer['classes'].'" style="position:relative;'.$style_elements.'">'.$temp.'</span>';
break;
default:
if($sub_layer['type'] && $sub_layer['text'])
echo '<'.$sub_layer['type'].' '.$attr_elements.' class="draggable '.$cls.'" style="position:relative;'.$style_elements.'">'.stripcslashes($sub_layer['text']).'</'.$sub_layer['type'].'>';
break;
}
echo '</div>';
}
?>
</div>
</div>
<a href="#" class="table-btn-link enter-preview">Enter Preview</a>
</div>
<div class="slides-options">
<div id="slide-options-<?php echo ($i +1)?>" class="hidden options" setting="slide-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-edit"></i>Slider Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table slide-property" cellpadding="0" cellspacing="0">
<tr>
<td class="sub-head" colspan="4">
Slider Background/Thumbnail Image
<a href="#" class="float-right duplicate-slide" slide-id="slide-<?php echo ($i + 1)?>">Duplicate this slide</a>
</td>
</tr>
<tr>
<td colspan="4">
<table cellpadding="0" cellspacing="0">
<tr>
<td nowrap="nowrap" class="text-right">Background image<br> or <a href="#" class="enter_url" preview="1">enter URL</a></td>
<td>
<div class="pos-rel">
<?php if($main_slide['properties']['background']) { ?>
<span class="delete-img-icon" layerid="abc"><i class="fa fa-times-circle-o"></i></span>
<?php } ?>
<button type="button" class="click-set tooltip layer-add-img" preview="1" data-title="The slide image/background. Click on the image to open the WordPress Media Library to choose or upload an image." style="<?php echo isset($main_slide['properties']['background']) ? 'background-image: url('.$main_slide['properties']['background'].')' : ''; ?>"><?php echo isset($main_slide['properties']['background']) ? '' : 'Click To Set';?></button>
<input type="hidden" value="<?php echo $main_slide['properties']['background']?>" name="background">
</div>
</td>
<td nowrap="nowrap" class="text-right">Thumbnail image<br> or <a href="#" class="enter_url">enter URL</a></td>
<td>
<div class="pos-rel">
<?php if($main_slide['properties']['thumbnail']) { ?>
<span class="delete-img-icon"><i class="fa fa-times-circle-o"></i></span>
<?php } ?>
<button type="button" class="click-set tooltip layer-add-img" data-title="The thumbnail image of this slide. Click on the image to open the WordPress Media Library to choose or upload an image. If you leave this field empty, the slide image will be used." style="<?php echo isset($main_slide['properties']['thumbnail']) ? 'background-image: url('.$main_slide['properties']['thumbnail'].')' : ''; ?>"><?php echo isset($main_slide['properties']['thumbnail'])? '' : 'Click To Set';?></button>
<input type="hidden" value="<?php echo $main_slide['properties']['thumbnail']?>" name="thumbnail">
</div>
</td>
<td nowrap="nowrap" class="text-right">Background Size</td>
<td>
<div class="pos-rel">
<select class="element-cls tooltip backsize" name="backsize" data-title="You can control here the size of background: 'cover' means the background will cover all the area and 'contain' will be depend on image size.">
<option <?php echo $main_slide['properties']['backsize']=='cover'?'selected':''?> value="cover">Cover</option>
<option <?php echo $main_slide['properties']['backsize']=='contain'?'selected':''?> value="contain">Contain</option>
</select>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Slide Transitions</td>
</tr>
<tr>
<td nowrap="nowrap" colspan="2" class="text-center">
<input type="hidden" name="2d_transitions_id" class="2d_trans_ids" slide-id="slide-<?php echo ($i + 1)?>" value="<?php echo isset($main_slide['properties']['2d_transitions_id']) ? $main_slide['properties']['2d_transitions_id'] : '1,2' ?>" />
<input type="hidden" name="3d_transitions_id" class="3d_trans_ids" slide-id="slide-<?php echo ($i + 1)?>" value="<?php echo $main_slide['properties']['3d_transitions_id'] ?>" />
<a href="#" class="table-btn-link tooltip slide-transition" slide-id="slide-<?php echo ($i + 1)?>" data-title="You can select your desired slide transitions by clicking on this button.">Select Transitions</a>
</td>
<td class="sub-head2 text-right">Slide Delay <input type="number" min="0" name="slidedelay" value="<?php echo $main_slide['properties']['slidedelay']?>" class="input-small tooltip keypressFilter" data-title="Here you can set the time interval between slide changes, this slide will stay visible for the time specified here. This value is in millisecs, so the value 1000 means 1 second. Please don't use 0 or very low values."/> ms</td>
<td class="sub-head2 text-right">Hidden
<input type="checkbox" name="hidden" <?php echo isset($main_slide['properties']['hidden']) && $main_slide['properties']['hidden']?'checked':''?> class="checkbox misc-hidden" data-title="If you don't want to use this slide in your front-page, but you want to keep it, you can hide it with this switch."/>
</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Link this slide</td>
</tr>
<tr>
<td class="sub-head2 text-right" colspan="3">URL
<input type="text" value="<?php echo $main_slide['properties']['layer_link']?>" name="layer_link" class="input-long tooltip" data-title="If you want to link the whole slide, enter the URL of your link here."/>
</td>
<td class="sub-head2 text-right">
Open
<select class="element-cls tooltip" name="layer_link_target" data-title="You can control here the link behaviour: _self means the linked page will open in the current tab/window, _blank will create a new tab/window.">
<option <?php echo $main_slide['properties']['layer_link_target']=='_self'?'selected':''?> value="_self">On the same page</option>
<option <?php echo $main_slide['properties']['layer_link_target']=='_blank'?'selected':''?> value="_blank">On new page</option>
<option <?php echo $main_slide['properties']['layer_link_target']=='_parent'?'selected':''?> value="_parent">In parent frame</option>
<option <?php echo $main_slide['properties']['layer_link_target']=='_top'?'selected':''?> value="_top">In main frame</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<div id="kenburn-options-<?php echo ($i +1)?>" class="hidden options" setting="kenburn-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-search-plus"></i>Ken Burns/ Pan Zoom Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table slide-property" cellpadding="0" cellspacing="0">
<tr class="is-kenburn">
<td colspan="4" class="text-center">Ken Burns/ Pan Zoom Setting <input type="checkbox" name="kenburn" class="checkbox kenburn" <?php echo isset($main_slide['properties']['kenburn']) && $main_slide['properties']['kenburn'] ? "checked='checked'" : ''; ?> /></td>
</tr>
<tr class="kenburn-setting<?php echo isset($main_slide['properties']['kenburn']) && $main_slide['properties']['kenburn'] ? '' : ' hidden' ?>">
<td class="text-right sub-head2">Scale From</td>
<td><input type="number" min="0.1" step="0.1" name="scale-from" class="input-extra-small keypressFilter tooltip scale-from" data-title=" Start scale of background." value="<?php echo isset($main_slide['properties']['scale-from']) ? $main_slide['properties']['scale-from'] : '1'; ?>" /></td>
<td class="text-right sub-head2">Position From</td>
<td class="sub-head2">
<?php echo $objCloudSlider->fnGetPositionsDropdown(array('name'=>'position-from','class'=>'element-cls input-medium ken-position position-from tooltip','title'=>'You can set kenburn background effect start from position.','default'=>$main_slide['properties']['position-from']));?>
<span class="<?php if($main_slide['properties']['position-from'] != "top_left_per" ){ echo 'hidden'; } ?>">
<input type="number" min="0.1" step="0.1" class="input-extra-small keypressFilter scale-pos position-from-left" name="position-from-left" placeholder="Left" value="<?php echo $main_slide['properties']['position-from-left']; ?>"/> %
<input type="number" min="0.1" step="0.1" class="input-extra-small keypressFilter scale-pos position-from-top" name="position-from-top" placeholder="Top" value="<?php echo $main_slide['properties']['position-from-top']; ?>"/> %
</span>
</td>
</tr>
<tr class="kenburn-setting<?php echo isset($main_slide['properties']['kenburn']) && $main_slide['properties']['kenburn'] ? '' : ' hidden' ?>">
<td class="text-right sub-head2">Scale To</td>
<td><input type="number" min="0.1" step="0.1" name="scale-to" class="input-extra-small keypressFilter scale-to tooltip" data-title="End scale of background." value="<?php echo isset($main_slide['properties']['scale-to']) ? $main_slide['properties']['scale-to'] : '1' ; ?>" /></td>
<td class="text-right sub-head2">Position To</td>
<td class="sub-head2">
<?php echo $objCloudSlider->fnGetPositionsDropdown(array('name'=>'position-to','class'=>'element-cls input-medium ken-position position-to tooltip','title'=>'You can set kenburn background effect end to position.','default'=>$main_slide['properties']['position-to']));?>
<span class="<?php if($main_slide['properties']['position-to'] != "top_left_per" ){ echo 'hidden'; } ?>">
<input type="number" min="0" class="input-extra-small keypressFilter position-to-left" name="position-to-left" placeholder="Left" value="<?php echo $main_slide['properties']['position-to-left']; ?>"/> %;
<input type="number" min="0" class="input-extra-small keypressFilter position-to-top" name="position-to-top" placeholder="Top" value="<?php echo $main_slide['properties']['position-to-top']; ?>"/> %
</span>
</td>
</tr>
<tr class="kenburn-setting<?php echo isset($main_slide['properties']['kenburn']) && $main_slide['properties']['kenburn'] ? '' : ' hidden' ?>">
<td class="text-right sub-head2">Duration</td>
<td class="sub-head2"><input type="number" min="0" class="input-extra-small tooltip keypressFilter" data-title="This options is for duration value of ken burn effect in miliseconds. If you set it to 4000, it means 4 seconds." name="kenburn-duration" value="<?php echo isset($main_slide['properties']['kenburn-duration']) ? $main_slide['properties']['kenburn-duration'] : 5000; ?>"/> ms</td>
<td class="text-right sub-head2">Easing</td>
<td>
<?php echo $objCloudSlider->fnGetEasingDropdown(array('name'=>'kenburn-easing','class'=>'element-cls input-medium tooltip','title'=>'You can set easing of ken burn effect.','default'=>$main_slide['properties']['kenburn-easing']));?>
</td>
</tr>
</table>
</div>
</div>
<div id="carousel-options-<?php echo ($i +1)?>" class="hidden options" setting="carousel-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-copy"></i>Carousel Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table slide-property" cellpadding="0" cellspacing="0">
<tr class="is-carousel hidden">
<td class="text-center" colspan="4">Carousel Layers Setting <input type="hidden" name="carousel_layer_ids" class="carousel_layer_ids" /> <input type="checkbox" name="carousel" class="checkbox carousel" checked='checked' /></td>
</tr>
<tr class="carousel-setting">
<td class="subhead-td" colspan="4">Carousel Layer Settings</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Position: </td>
<td class="sub-head2">
<select name="carousel-pos" class="input-small element-cls carousel-pos tooltip" data-title='Top position of the carousel container. You can set top position of the container in pixel or percent of height of the slider.'>
<option <?php if($main_slide['properties']['carousel-pos']=="center"){ echo "selected='selected'"; } ?> value="center">Center</option>
<option <?php if($main_slide['properties']['carousel-pos']=="top"){ echo "selected='selected'"; } ?> value="top">Top</option>
<option <?php if($main_slide['properties']['carousel-pos']=="bottom"){ echo "selected='selected'"; } ?> value="bottom">Bottom</option>
<option <?php if($main_slide['properties']['carousel-pos']=="px_or_per"){ echo "selected='selected'"; } ?> value="px_or_per">(px) or (%)</option>
</select>
<span class="<?php if($main_slide['properties']['carousel-pos']!="px_or_per"){ echo 'hidden'; } ?>">
<input name="carousel-pos-px-per" class="input-small tooltip carousel-pos-px-per" data-title="You can set position in pixel or %. For example 20% or 100px" value="<?php echo $main_slide['properties']['carousel-pos-px-per']; ?>"/>
</span>
</td>
<td class="text-right sub-head2">Size: </td>
<td>
<input type="number" min="0" name="carousel-width" placeholder="Width" class="input-extra-small tooltip keypressFilter carousel-width" data-title="You can set carousel item width. Default is empty and it means carousel item width will be original width of carousel item. But if you set this option, width will be adjusted. You can set this option 300 or 300px" value="<?php echo stripcslashes($main_slide['properties']['carousel-width']); ?>"/> px
<input type="number" min="0" name="carousel-height" placeholder="Height" class="input-extra-small tooltip keypressFilter carousel-height" data-title="You can set carousel item height. Default is empty and it means carousel item height will be original height of carousel item. But if you set this option, height will be adjusted. You can set this option 300 or 300px" value="<?php echo stripcslashes($main_slide['properties']['carousel-height']); ?>"/> px
</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">First Show: </td>
<td>
<input name="carousel-fisrt-show" class="input-extra-small keypressFilter tooltip" type="number" min="1" step="1" data-title="ID of the carousel item to firstly show." value="<?php echo isset($main_slide['properties']['carousel-fisrt-show']) ? $main_slide['properties']['carousel-fisrt-show'] : '1' ; ?>">
</td>
<td class="text-right sub-head2">Overlay: </td>
<td><input name="carousel-overlay" value="<?php echo isset($main_slide['properties']['carousel-overlay']) ? $main_slide['properties']['carousel-overlay'] : '20%'; ?>" class="input-small tooltip carousel-overlay" data-title="Overlay degree. You can change overlay of each level of carousels with this options. You can also use negative value for this option to keep apart each carousel item from adjacent carousel item. You can set value in px or %." value="<?php echo isset($main_slide['properties']['carousel-overlay']) ? $main_slide['properties']['carousel-overlay'] : '20%'; ?>" /></td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Perspective: </td>
<td><input name="carousel-perspective" value="<?php echo isset($main_slide['properties']['carousel-perspective']) ? $main_slide['properties']['carousel-perspective'] : '1000'; ?>" class="input-small tooltip carousel-perspective" data-title='The perspective property defines how many pixels a 3D element is placed from the view.' /></td>
<td class="text-right sub-head2">Easing</td>
<td>
<?php echo $objCloudSlider->fnGetEasingDropdown(array('name'=>'carousel-easing','class'=>'element-cls input-medium tooltip','title'=>'Easing of carousel flowing.','default'=>$main_slide['properties']['carousel-easing']));?>
</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Duration: </td>
<td>
<input type="number" min="100" name="carousel-duration" class="input-small keypressFilter tooltip" value="<?php echo isset($main_slide['properties']['carousel-duration']) ? $main_slide['properties']['carousel-duration'] : '700';?>" data-title="Carousel Flowing duration in miliseconds. " /> ms
</td>
<td class="text-right sub-head2">Delay: </td>
<td>
<input type="number" min="0" name="carousel-delay" class="input-small keypressFilter tooltip" value="<?php echo isset($main_slide['properties']['carousel-delay']) ? $main_slide['properties']['carousel-delay'] : '6000';?>" data-title="Carousel Flowing delay in miliseconds. It's effective in only case you set autoSlide option to true." /> ms
</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Direction: </td>
<td>
<select name="carousel-direction" class="element-cls input-medium tooltip" data-title="Carousel Flowing direction. It's effective in only case you set autoSlide option to true.">
<option <?php if($main_slide['properties']['carousel-direction']=="right") { echo "selected='selected'"; } ?> value="right">right</option>
<option <?php if($main_slide['properties']['carousel-direction']=="left") { echo "selected='selected'"; } ?> value="left">left</option>
</select>
</td>
</tr>
<tr class="carousel-setting">
<td colspan="4" class="subhead-td">Carousel Arrow Settings</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Visibility</td>
<td>
<select name="carousel-arrow-visibility" class="element-cls input-small tooltip" data-title='Visibility of the carousel arrow navigation. "hover" means arrows will only be shown when mouse comes over carousel container. "show" means arrows will always be shown and "hide" means arrows will not be shown.'>
<option <?php if($main_slide['properties']['carousel-arrow-visibility'] == "hover") { echo "selected='selected'"; } ?> value="hover">Hover</option>
<option <?php if($main_slide['properties']['carousel-arrow-visibility'] == "show") { echo "selected='selected'"; } ?> value="show">Show</option>
<option <?php if($main_slide['properties']['carousel-arrow-visibility'] == "hide") { echo "selected='selected'"; } ?> value="hide">Hide</option>
</select>
</td>
<td class="text-right sub-head2">Position</td>
<td><input name="carousel-arrow-pos" class="input-small tooltip" value="<?php echo isset($main_slide['properties']['carousel-arrow-pos']) ? $main_slide['properties']['carousel-arrow-pos'] : 'auto';?>" data-title='Position of the carousel navigation arrows. If you set this option to "auto", arrows will be aligned on either side of level 1 of carousel item. You can set this option with distance from left, right edge of the carousel container in pixel or in percent of container.'></td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2" valign="top">Left Arrow</td>
<td>
<input type="text" class="input-medium tooltip" name="carousel-left-arrow-img" value="<?php echo isset($main_slide['properties']['carousel-left-arrow-img']) && $main_slide['properties']['carousel-left-arrow-img']!="" ? $main_slide['properties']['carousel-left-arrow-img'] : plugins_url('library/img/left_carousel_arrow.png', dirname(__FILE__)); ?>" data-title="Image src string of carousel left arrow. Default image path is cloudslider/img/left_carousel_arrow.png and that image will appear as left arrow on carousel by default. You can upload your own arrow image and then change this option so it will be shown as left arrow on carousel."/><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
<td class="text-right sub-head2" valign="top">Right Arrow</td>
<td>
<input type="text" class="input-medium tooltip" name="carousel-right-arrow-img" value="<?php echo isset($main_slide['properties']['carousel-right-arrow-img']) && $main_slide['properties']['carousel-right-arrow-img']!="" ? $main_slide['properties']['carousel-right-arrow-img'] : plugins_url('library/img/right_carousel_arrow.png', dirname(__FILE__)); ?>" data-title="Image src string of carousel right arrow. Default image path is cloudslider/img/right_carousel_arrow.png and that image will appear as right arrow on carousel by default. You can upload your own arrow image and then change this option so it will be shown as right arrow on carousel."/><br><br>
<a href="#" class="upload-image btn-link">Upload Image</a>
</td>
</tr>
<tr class="carousel-setting">
<td class="text-right sub-head2">Responsive Level</td>
<td colspan="3"><input type="number" min="0.1" name="carousel-responsive-level" class="input-small keypressFilter tooltip" value="<?php echo isset($main_slide['properties']['carousel-responsive-level']) ? $main_slide['properties']['carousel-responsive-level'] : '2';?>" data-title="Responsive level of the carousel arrows. Normal responsive level is 1. But it makes arrows too small in mobile browsers. If we set this option to bigger than 1, arrows won't be such small in mobile browsers. "></td>
</tr>
<tr class="carousel-setting">
<td class="subhead-td" colspan="4">Carousel Level Settings <a href="#" class="add-carousel-level">Add Level</a></td>
</tr>
<tr class="carousel-setting carousel-level">
<td colspan="4">
<table width="100%" cellpadding="0" cellspacing="0" class="carousel-multi-level">
<tr>
<td class="text-center sub-head2">Opacity</td>
<td class="text-center sub-head2">Scale</td>
<td class="text-center sub-head2">RotationX</td>
<td class="text-center sub-head2">RotationY</td>
<td class="text-center sub-head2">RotationZ</td>
<td> </td>
</tr>
<?php
for($k=1; $k <= sizeof($main_slide['properties']['carousel-level']); $k++)
{
$level=$main_slide['properties']['carousel-level'][$k];
?>
<tr>
<td class="text-center"><input type="number" min="0" max="1" step="0.1" name="carousel-opacity" value="<?php echo (isset($level['carousel-opacity'])) ? $level['carousel-opacity'] : '1' ?>" class="input-extra-small keypressFilter tooltip carousel-opacity" data-title="Opacity of the carousel item for level." /></td>
<td class="text-center"><input type="number" min="0.1" step="0.1" name="carousel-scale" value="<?php echo (isset($level['carousel-scale'])) ? $level['carousel-scale'] : '1'; ?>" class="input-extra-small keypressFilter tooltip carousel-scale" data-title="Scale of the carousel item for level." /></td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-x" value="<?php echo (isset($level['carousel-rotation-x'])) ? $level['carousel-rotation-x'] : '0'; ?>" class="input-extra-small keypressFilter tooltip carousel-rotation-x" data-title="Rotate Degree of the carousel item for level along X axis." /> °</td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-y" value="<?php echo (isset($level['carousel-rotation-y'])) ? $level['carousel-rotation-y'] : '0'; ?>" class="input-extra-small keypressFilter tooltip carousel-rotation-y" data-title="Rotate Degree of the carousel item for level along Y axis." /> °</td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-z" value="<?php echo (isset($level['carousel-rotation-z'])) ? $level['carousel-rotation-z'] : '0'; ?>" class="input-extra-small keypressFilter tooltip carousel-rotation-z" data-title="Rotate Degree of the carousel item for level along Z axis." /> °</td>
<td class="text-center"><?php if($k>1 ){ ?><a href="#" class="delete-carousel-level">Delete</a><?php }?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="layer-options-<?php echo ($i +1)?>" class="hidden options" setting="layer-options">
<div class="option-header">
<div class="option-title" data-draggable="true"><i class="fa fa-file-o"></i>Layer Options</div>
<div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
</div>
<div class="option-container">
<table class="slide-table all-layer-table" slide-id="slide-<?php echo ($i + 1)?>">
<tbody>
<?php
for($j = 0; $j < count($main_slide['sub_layer']); $j++)
{
$sub_layer = $main_slide['sub_layer'][$j]['properties'];
?>
<tr id="<?php echo $main_slide['sub_layer'][$j]['layer_id']?>" class="layer">
<td class="main_td">
<div class="layer-container sortable">
<span class="layer-main ui-state-default">
<span class="move"><a href="#"><i class="fa fa-navicon"></i></a></span>
<span class="layer-no"><?php echo ($j + 1);?></span>
<span><input type="text" class="layer-text" value="<?php echo $sub_layer['subtitle']?>" name="subtitle" placeholder="Layer#<?php echo ($j + 1);?>"/></span>
<span class="float-right layer-tab-right">
<span class="layer-icons float-left">
<input type="hidden" name="layer_id" value="<?php echo $sub_layer['layer_id'] ?>" />
<a href="#" data-title="Highlight layer in editor." class="tooltip highlight-layer <?php echo $sub_layer['highlight'] ? 'active-highlight' : '' ?>" highlight="<?php echo $sub_layer['highlight'] ? 1 : 0 ?>"><i class="fa fa-lightbulb-o"></i></a>
<input type="hidden" name="highlight" value="<?php echo $sub_layer['highlight'] ?>" />
<a href="#" data-title="Prevent layer from dragging in editor." class="tooltip lock-layer <?php echo $sub_layer['lock'] ? 'active-lock' : '' ?>" lock="<?php echo $sub_layer['lock'] ? 1 : 0 ?>"><i class="fa fa-lock"></i></a>
<input type="hidden" name="lock" value="<?php echo $sub_layer['lock'] ?>" />
<a href="#" data-title="Hide layer in editor." class="tooltip hide-layer <?php echo $sub_layer['hide'] ? 'active-hide' : '' ?>" hide="<?php echo $sub_layer['hide'] ? 1 : 0 ?>"><i class="fa fa-eye"></i></a>
<input type="hidden" name="hide" value="<?php echo $sub_layer['hide'] ?>" />
</span>
<span class="layer-tabs">
<a href="#content" class="active tooltip" data-title="Content" applycls="main-layer-tab"><i class="fa fa-file-text-o"></i></a>
<a href="#styles" class="tooltip" data-title="Styles" applycls="main-layer-tab"><i class="fa fa-credit-card"></i></a>
<a href="#transition" class="tooltip" data-title="Transitions" applycls="main-layer-tab"><i class="fa fa-space-shuttle"></i></a>
<a href="#carousel" class="tooltip" data-title="Carousel" applycls="main-layer-tab"><i class="fa fa-users"></i></a>
<a href="#attributes" class="tooltip" data-title="Attributes" applycls="main-layer-tab"><i class="fa fa-file-code-o"></i></a>
</span>
<a href="#" class="duplicate-layer tooltip" layerid="<?php echo $main_slide['sub_layer'][$j]['layer_id']?>" data-title="Duplicate"><i class="fa fa-plus-circle"></i></a>
<a href="#" class="remove-layer tooltip" layerid="<?php echo $main_slide['sub_layer'][$j]['layer_id']?>" data-title="Remove"><i class="fa fa-times-circle"></i></a>
</span>
</span>
<div class="current-layer">
<div class="layer-data active main-layer-tab content">
<div class="content-nav text-center">
<div class="content-subnav">
<a href="#layer-image" data-type="image" class="<?php echo $sub_layer['type']=='image'?'active':''?>" applycls="layer-cls"><i class="fa fa-image"></i> Image</a>
<a href="#layer-daynamic-content" data-type="dynamic_text" class="<?php echo $sub_layer['type']=='dynamic_text'?'active':''?>" applycls="layer-cls"><i class="fa fa-file"></i>Text/HTML</a>
<a href="#layer-html-video-audio" data-type="html" class="<?php echo $sub_layer['type']=='html'?'active':''?>" applycls="layer-cls"><i class="fa fa-file-code-o"></i>Video/Audio</a>
<!--<a href="#layer-content-text" data-type="span" class="<?php //echo $sub_layer['type']!='image'&&$sub_layer['type']!='html'&&$sub_layer['type']!='dynamic_text'?'active':''?>" applycls="layer-cls"><i class="fa fa-file-text"></i>Text</a>-->
<input type="hidden" class="type" value="<?php echo $sub_layer['type']?>" name="type" />
</div>
<div class="layer-image-container layer-cls layer-image <?php echo $sub_layer['type']!='image'?'hidden':''?>">
<div class="pos-rel">
<?php if($sub_layer['image']) { ?>
<span layerid="<?php echo $main_slide['sub_layer'][$j]['layer_id']?>" class="delete-img-icon"><i class="fa fa-times-circle-o"></i></span>
<?php } ?>
<button type="button" style="<?php echo $sub_layer['image'] ? 'background-image: url('.$sub_layer['image'].')' : ''; ?>" class="click-set layer-add-img" preview="1" layer="1" layerid="<?php echo $main_slide['sub_layer'][$j]['layer_id']?>"><?php echo $sub_layer['image']?'':'Click To Set'?></button>
<input type="hidden" class="image" value="<?php echo $sub_layer['image']?>" name="image" />
</div>
<span class="layer-image-text">Click on image preview to open Wordpress Media Library or <a href="#" class="enter_url" preview="1" layer="1">insert from URL</a></span>
</div>
<div class="layer-daynamic-content layer-cls <?php echo $sub_layer['type']!='dynamic_text'?'hidden':''?>">
<div class="text-center layer-daynamic-html-textarea">
<textarea cols="50" rows="5" class="daynamic-content-text tooltip" placeholder="Enter layer content here" name="dynamic_text" data-title="Type here the contents of your layer. You can use any HTML codes in this field to insert other contents then text. This field is also shortcode-aware, so you can insert content from other plugins as well as video embed codes."><?php echo stripcslashes($sub_layer['dynamic_text'])==''?'[Text here]':stripcslashes($sub_layer['dynamic_text']);?></textarea>
</div>
<div class="layer-post-short-code">
<a href="#">[post-id]</a>
<a href="#">[post-slug]</a>
<a href="#">[post-url]</a>
<a href="#">[date-published]</a>
<a href="#">[date-modified]</a>
<a href="#">[image]</a>
<a href="#">[image-url]</a>
<a href="#">[title]</a>
<a href="#">[content]</a>
<a href="#">[excerpt]</a>
<a href="#">[link]</a>
<a href="#">[author]</a>
<a href="#">[author-id]</a>
<a href="#">[categories]</a>
<a href="#">[tags]</a>
<a href="#">[comments]</a>
<p>Click on one or more post placeholders to insert them into your layer's content. Post placeholders are acting like shortcodes in WP, and they will be filled with the actual content from your posts.</p>
<div class="limit-text">
Limit text length (if any)
<input type="number" class="input-extra-small keypressFilter textlength" name="text-limit" value="<?php echo $sub_layer['text-limit']?>"/>
<button type="button" class="click-set configure-post"><i class="fa fa-gear"></i>Configure post options</button>
<input type="hidden" name="hidden_post_id" class="cs-post-id" value="<?php echo $sub_layer['hidden_post_id'] ? $sub_layer['hidden_post_id'] : $postid ; ?>"/>
<input type="hidden" name="hidden_post_type" class="cs-post-type" value="<?php echo $sub_layer['hidden_post_type'] ? $sub_layer['hidden_post_type'] : 'post'; ?>" />
<input type="hidden" name="hidden_post_cat" class="cs-post-cat" value="<?php echo $sub_layer['hidden_post_cat'] ? $sub_layer['hidden_post_cat'] : '' ; ?>"/>
<input type="hidden" name="hidden_post_tag" class="cs-post-tag" value="<?php echo $sub_layer['hidden_post_tag'] ? $sub_layer['hidden_post_tag'] : '' ; ?>" />
<input type="hidden" name="hidden_orderby" class="cs-orderby" value="<?php echo $sub_layer['hidden_orderby'] ? $sub_layer['hidden_orderby'] : 'date' ; ?>" />
<input type="hidden" name="hidden_order" class="cs-order" value="<?php echo $sub_layer['hidden_order'] ? $sub_layer['hidden_order'] : 'desc'; ?>" />
</div>
</div>
</div>
<div class="layer-html-video-audio layer-cls <?php echo $sub_layer['type']!='html'?'hidden':''?>">
<div class="text-center layer-html-video-audio-textarea">
<textarea cols="50" rows="5" class="video-audio-text tooltip" placeholder="Enter layer content here" name="html" data-title="Type here the contents of your layer. You can use any HTML codes in this field to insert other contents then text. This field is also shortcode-aware, so you can insert content from other plugins as well as video embed codes."><?php echo stripcslashes($sub_layer['html'])?></textarea>
</div>
<div class="pos-rel">
<button class="click-set layer-add-media" preview="1"><i class="fa fa-music"></i>Add Media</button> insert self hosted video or audio
</div>
</div>
</div>
</div>
<div class="layer-data hidden main-layer-tab styles">
<table class="style-layer-table layer-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" class="sub-head">Layout & Positions</td>
</tr>
<tr>
<td class="sub-head2 text-right">Width</td>
<td>
<input name="pos_width" data-default="auto" value="<?php echo isset($sub_layer['pos_width'])?$sub_layer['pos_width']:'';?>" type="text" class="input-extra-small img-width tooltip" data-title="You can set the width of your layer. You can use pixels, percents, or the 'auto'. Examples: 100px, 50% or auto"/>
</td>
<td class="sub-head2 text-right">Height</td>
<td>
<input name="pos_height" data-default="auto" value="<?php echo isset($sub_layer['pos_height'])? $sub_layer['pos_height']:'';?>" type="text" class="input-extra-small img-height tooltip" data-title="You can set the height of your layer. You can use pixels, percents, or the 'auto'. Examples: 100px, 50% or auto"/>
</td>
</tr>
<tr>
<td class="sub-head2 text-right">Top</td>
<td>
<input name="pos_top" data-default="0" value="<?php echo isset($sub_layer['pos_top'])?$sub_layer['pos_top']:'';?>" type="number" class="input-extra-small img-top keypressFilter tooltip" data-title="The layer position from the top of the slide. You can use pixels and percents. Examples: 100px or 50%. You can move your layers in the preview above with a drag n' drop, or set the exact values here."/>
<select name="pos_top_type" class='img-top-px element-cls'>
<option <?php echo isset($sub_layer['pos_top_type']) && $sub_layer['pos_top_type']=='px'?'selected':''?> value="px">px</option>
<option <?php echo isset($sub_layer['pos_top_type']) && $sub_layer['pos_top_type']=='%'?'selected':''?> value="%">%</option>
</select>
</td>
<td class="sub-head2 text-right">Left</td>
<td>
<input name="pos_left" data-default="0" value="<?php echo isset($sub_layer['pos_left'])?$sub_layer['pos_left']:'';?>" type="number" class="input-extra-small img-left keypressFilter tooltip" data-title="The layer position from the left side of the slide. You can use pixels and percents. Examples: 100px or 50%. You can move your layers in the preview above with a drag n' drop, or set the exact values here."/>
<select name="pos_left_type" class='img-left-px element-cls'>
<option <?php echo isset($sub_layer['pos_left_type']) && $sub_layer['pos_left_type']=='px'?'selected':''?> value="px">px</option>
<option <?php echo isset($sub_layer['pos_left_type']) && $sub_layer['pos_left_type']=='%'?'selected':''?> value="%">%</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Padding</td>
</tr>
<tr>
<td class="sub-head2 text-right">Top</td>
<td class="sub-head2">
<input name="padding_top" data-default="0" type="number" min="0" value="<?php echo isset($sub_layer['padding_top']) ? $sub_layer['padding_top']:'';?>" class="input-extra-small img-padding-top keypressFilter tooltip" data-title="Padding on the top of the layer. Example: 10px"/> px
</td>
<td class="sub-head2 text-right">Right</td>
<td class="sub-head2">
<input name="padding_right" data-default="0" type="number" min="0" value="<?php echo isset($sub_layer['padding_right']) ? $sub_layer['padding_right']:'';?>" class="input-extra-small img-padding-right keypressFilter tooltip" data-title="Padding on the right side of the layer. Example: 10px"/> px
</td>
</tr>
<tr>
<td class="sub-head2 text-right">Bottom</td>
<td class="sub-head2">
<input name="padding_bottom" data-default="0" type="number" min="0" value="<?php echo isset($sub_layer['padding_bottom']) ? $sub_layer['padding_bottom']:'';?>" class="input-extra-small img-padding-bottom keypressFilter tooltip" data-title="Padding on the bottom of the layer. Example: 10px"/> px
</td>
<td class="sub-head2 text-right">Left</td>
<td class="sub-head2">
<input name="padding_left" data-default="0" type="number" min="0" value="<?php echo isset($sub_layer['padding_left']) ? $sub_layer['padding_left']:'';?>" class="input-extra-small img-padding-left keypressFilter tooltip" data-title="Padding on the left side of the layer. Example: 10px"/> px
</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Font</td>
</tr>
<tr>
<td class="sub-head2 text-right">Family</td>
<td><input name="font_family" data-default="Arial, Helvetica, sans-serif" value="<?php echo isset($sub_layer['font_family'])?str_replace('"',"'",stripslashes($sub_layer['font_family'])):'';?>" type="text" class="input-extra-small text-font-family tooltip" data-title="List of your chosen fonts separated with a comma. Please use apostrophes if your font names contains white spaces. Example: Helvetica, Arial, sans-serif"/></td>
<td class="sub-head2 text-right">Color</td>
<td>
<?php if(isset($sub_layer['font_color'])){?>
<input name="font_color" data-default="#000000" value="<?php $color = $objCloudSlider->rgb2hex($sub_layer['font_color']); echo $color[0];?>" data-opacity="<?php echo $color[1]?>" type="text" class="input-extra-small text-color tooltip minicolors" data-title="The color of your text. You can use color names, hexadecimal, RGB or RGBA values. Example: #333333"/><?php } else{?>
<input name="font_color" data-default="#000000" value="#000000" data-opacity="1" type="text" class="input-extra-small text-color tooltip minicolors" data-title="The color of your text. You can use color names, hexadecimal, RGB or RGBA values. Example: #333333"/>
<?php
}?></td>
</tr>
<tr>
<td class="sub-head2 text-right">Size</td>
<td class="sub-head2"><input name="font_size" data-default="15" value="<?php echo isset($sub_layer['font_size'])?$sub_layer['font_size']:'';?>" type="number" min="1" class="input-extra-small text-font-size keypressFilter tooltip" data-title="The font size in pixels. Example: 16px."/> px</td>
<td class="sub-head2 text-right">Line-height</td>
<td class="sub-head2"><input name="line_height" data-default="Normal" value="<?php echo isset($sub_layer['line_height'])?$sub_layer['line_height']:'';?>" class="input-extra-small text-line-height tooltip" data-title="The line height of your text. The default setting is 'normal'. Example: 22px"/> px</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Misc</td>
</tr>
<tr>
<td class="sub-head2 text-right">Background</td>
<td>
<?php if(isset($sub_layer['font_background'])){?>
<input name="font_background" data-default="" value="<?php $color = $objCloudSlider->rgb2hex($sub_layer['font_background']); echo $color[0] ?>" data-opacity="<?php echo $color[1]?>" type="text" class="input-extra-small bg-color tooltip minicolors" data-title="The background color of your layer. You can use color names, hexadecimal, RGB or RGBA values as well as the 'transparent' keyword. Example: #FFFFFF"/>
<?php }else{?>
<input name="font_background" data-default="" value="" data-opacity="" type="text" class="input-extra-small bg-color tooltip minicolors" data-title="The background color of your layer. You can use color names, hexadecimal, RGB or RGBA values as well as the 'transparent' keyword. Example: #FFFFFF"/>
<?php }?>
</td>
<td class="sub-head2 text-right">Rounded corners</td>
<td class="sub-head2"><input name="radius" data-default="0" value="<?php echo isset($sub_layer['radius']) ? $sub_layer['radius'] : '';?>" type="number" min="0" class="input-extra-small rounded-corner keypressFilter tooltip" data-title="If you want rounded corners, you can set here its radius. Example: 5px"/> px</td>
</tr>
<tr>
<td colspan="4" class="sub-head">Custom style settings</td>
</tr>
<tr>
<td colspan="4" class="text-center"><textarea name="custom_style" type="text" class="custom-style tooltip" data-title="If you want to set style settings other then above, you can use here any CSS codes. Please make sure to write valid markup." cols="65" rows="4"><?php echo isset($sub_layer['custom_style']) ? $sub_layer['custom_style'] : '';?></textarea></td>
</tr>
</table>
</div>
<div class="layer-data hidden main-layer-tab transition">
<table class="layer-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6" class="transition_in sub-head">Transition in</td>
</tr>
<tr>
<td class="sub-head2">OffsetX</td>
<td><input type="number" name="ti-offsetx" value="<?php echo (isset($sub_layer['ti-offsetx']) && $sub_layer['ti-offsetx'] != '') ? $sub_layer['ti-offsetx'] : '0'; ?>" class="input-extra-small keypressFilter tooltip" data-title="The horizontal offset to align the starting position of layers. Positive and negative numbers are allowed or enter left / right to position the layer out of the frame."/></td>
<td class="sub-head2">OffsetY</td>
<td><input type="number" value="<?php echo (isset($sub_layer['ti-offsety']) && $sub_layer['ti-offsety'] != '') ? $sub_layer['ti-offsety'] : '0'; ?>" name="ti-offsety" class="input-extra-small keypressFilter tooltip" data-title="The vertical offset to align the starting position of layers. Positive and negative numbers are allowed or enter top / bottom to position the layer out of the frame."/></td>
<td class="sub-head2">Duration</td>
<td class="sub-head2"><input type="number" min="0" name="ti-duration" value="<?php echo (isset($sub_layer['ti-duration']) && $sub_layer['ti-duration'] != '') ? $sub_layer['ti-duration'] : '800'; ?>" class="input-extra-small keypressFilter tooltip" data-title="The transition duration in milliseconds when the layer entering into the slide. A second is equal to 1000 milliseconds."/> ms</td>
</tr>
<tr>
<td class="sub-head2">Delay</td>
<td class="sub-head2"><input type="number" min="0" value="<?php echo (isset($sub_layer['ti-delay']) && $sub_layer['ti-delay'] != '') ? $sub_layer['ti-delay'] : '0'; ?>" name="ti-delay" class="input-extra-small keypressFilter tooltip" data-title="Delays the transition with the given amount of milliseconds before the layer entering into the slide. A second is equal to 1000 milliseconds."/> ms</td>
<td class="sub-head2">Fade</td>
<td>
<input type="checkbox" name="ti-fade" class="checkbox transition-fade-in" <?php echo isset($sub_layer['ti-fade']) && $sub_layer['ti-fade']?'checked':''?> />
</td>
<td class="sub-head2">Easing</td>
<td>
<?php echo $objCloudSlider->fnGetEasingDropdown(array('name'=>'ti-easing','class'=>'element-cls tooltip','title'=>'The timing function of the animation to manipualte the layer\'s movement. Click on the link next to this field to open easings.net for examples and more information.','default'=>isset($sub_layer['ti-easing'])?$sub_layer['ti-easing']:''));?>
</td>
</tr>
<tr>
<td class="sub-head2">Rotate</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['ti-rotate']) && $sub_layer['ti-rotate'] != '') ? $sub_layer['ti-rotate'] : '0'; ?>" name="ti-rotate" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer clockwise from the given angle to zero degree. Negative values are allowed for anticlockwise rotation."/> °</td>
<td class="sub-head2">RotateX</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['ti-rotatex']) && $sub_layer['ti-rotatex'] != '') ? $sub_layer['ti-rotatex'] : '0'; ?>" name="ti-rotatex" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the X (horizontal) axis from the given angle to zero degree. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">RotateY</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['ti-rotatey']) && $sub_layer['ti-rotatey'] != '') ? $sub_layer['ti-rotatey'] : '0'; ?>" name="ti-rotatey" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the Y (vertical) axis from the given angle to zero degree. Negative values are allowed for reverse direction."/> °</td>
</tr>
<tr>
<td class="sub-head2">SkewX</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['ti-skewx']) && $sub_layer['ti-skewx'] != '') ? $sub_layer['ti-skewx'] : '0'; ?>" name="ti-skewx" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the X (horizontal) axis from the given angle to 0 degree. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">SkewY</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['ti-skewy']) && $sub_layer['ti-skewy'] != '') ? $sub_layer['ti-skewy'] : '0'; ?>" name="ti-skewy" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">TransformOrigin</td>
<td><input type="text" name="ti-origin" value="<?php echo (isset($sub_layer['ti-origin']) && $sub_layer['ti-origin'] != '') ? $sub_layer['ti-origin'] : '50% 50% 0' ;?>" class="input-small tooltip" data-title="This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space."/></td>
</tr>
<tr>
<td class="sub-head2">ScaleX</td>
<td><input type="number" min="0" step="0.1" value="<?php echo (isset($sub_layer['ti-scalex']) && $sub_layer['ti-scalex'] != '') ? $sub_layer['ti-scalex'] : '1'; ?>" class="input-extra-small keypressFilter tooltip" name="ti-scalex" data-title="Scales the layer's width from the given value to its original size."/></td>
<td class="sub-head2">ScaleY</td>
<td><input type="number" min="0" step="0.1"value="<?php echo (isset($sub_layer['ti-scaley']) && $sub_layer['ti-scaley'] != '') ? $sub_layer['ti-scaley'] : '1'; ?>" class="input-extra-small keypressFilter tooltip" name="ti-scaley" data-title="Scales the layer's height from the given value to its original size."/></td>
<td class="sub-head2">Perspective</td>
<td class="sub-head2"><input type="number" min="0" value="<?php echo (isset($sub_layer['ti-perspective']) && $sub_layer['ti-perspective'] != '') ? $sub_layer['ti-perspective'] : '400'; ?>" class="input-small keypressFilter tooltip" name="ti-perspective" data-title="The perspective property defines how many pixels a 3D element is placed from the view. You can change feeling of rotation with this option."/> px</td>
</tr>
<tr>
<td colspan="6" class="transition_out sub-head">Transition out</td>
</tr>
<tr>
<td class="sub-head2">OffsetX</td>
<td><input type="number" name="to-offsetx" value="<?php echo (isset($sub_layer['to-offsetx']) && $sub_layer['to-offsetx'] != '') ? $sub_layer['to-offsetx'] : '0'; ?>" class="input-extra-small keypressFilter tooltip" data-title="The horizontal offset to align the ending position of layers. Positive and negative numbers are allowed or write left / right to position the layer out of the frame."/> px</td>
<td class="sub-head2">OffsetY</td>
<td><input type="number" value="<?php echo (isset($sub_layer['to-offsety']) && $sub_layer['to-offsety'] != '') ? $sub_layer['to-offsety'] : '0'; ?>" name="to-offsety" class="input-extra-small keypressFilter tooltip" data-title="The vertical offset to align the starting position of layers. Positive and negative numbers are allowed or write top / bottom to position the layer out of the frame."/> px</td>
<td class="sub-head2">Duration</td>
<td class="sub-head2"><input type="number" min="0" name="to-duration" value="<?php echo (isset($sub_layer['to-duration']) && $sub_layer['to-duration'] != '') ? $sub_layer['to-duration'] : '800'; ?>" class="input-extra-small keypressFilter tooltip" data-title="The transition duration in milliseconds when the layer leaving the slide. A second is equal to 1000 milliseconds."/> ms</td>
</tr>
<tr>
<td class="sub-head2">Delay</td>
<td class="sub-head2"><input type="number" min="0" value="<?php echo (isset($sub_layer['to-delay']) && $sub_layer['to-delay'] != '') ? $sub_layer['to-delay'] : '0'; ?>" name="to-delay" class="input-extra-small keypressFilter tooltip" data-title="The layer will be visible for the time you specify here, then it will slide out. You can use this setting for layers to leave the slide before the slide itself animates out, or for example before other layers will slide in. This value in millisecs, so the value 1000 means 1 second."/> ms</td>
<td class="sub-head2">Fade</td>
<td>
<input type="checkbox" name="to-fade" class="checkbox transition-fade-in" <?php echo isset($sub_layer['to-fade']) && $sub_layer['to-fade']?'checked':''?>/>
</td>
<td class="sub-head2">Easing</td>
<td>
<?php echo $objCloudSlider->fnGetEasingDropdown(array('name'=>'to-easing','class'=>'element-cls tooltip','title'=>'The timing function of the animation to manipualte the layer\'s movement. Click on the link next to this field to open easings.net for examples and more information.','default'=>isset($sub_layer['to-easing'])?$sub_layer['to-easing']:''));?>
</td>
</tr>
<tr>
<td class="sub-head2">Rotate</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['to-rotate']) && $sub_layer['to-rotate'] != '') ? $sub_layer['to-rotate'] : '0'; ?>" name="to-rotate" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer clockwise by the given angle from its original position. Negative values are allowed for anticlockwise rotation."/> °</td>
<td class="sub-head2">RotateX</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['to-rotatex']) && $sub_layer['to-rotatex'] != '') ? $sub_layer['to-rotatex'] : '0'; ?>" name="to-rotatex" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the X (horizontal) axis by the given angle from its original state. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">RotateY</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['to-rotatey']) && $sub_layer['to-rotatey'] != '') ? $sub_layer['to-rotatey'] : '0'; ?>" name="to-rotatey" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the Y (vertical) axis by the given angle from its orignal state. Negative values are allowed for reverse direction."/> °</td>
</tr>
<tr>
<td class="sub-head2">SkewX</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['to-skewx']) && $sub_layer['to-skewx'] != '') ? $sub_layer['to-skewx'] : '0'; ?>" name="to-skewx" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the X (horizontal) axis by the given angle from its orignal state. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">SkewY</td>
<td class="sub-head2"><input type="number" value="<?php echo (isset($sub_layer['to-skewy']) && $sub_layer['to-skewy'] != '') ? $sub_layer['to-skewy'] : '0';?>" name="to-skewy" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the Y (vertical) axis by the given angle from its original state. Negative values are allowed for reverse direction."/> °</td>
<td class="sub-head2">TransformOrigin</td>
<td><input type="text" name="to-origin" value="<?php echo (isset($sub_layer['to-origin']) && $sub_layer['to-origin'] != '') ? $sub_layer['to-origin'] : '50% 50% 0'; ?>" class="input-small tooltip" data-title="This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space."/></td>
</tr>
<tr>
<td class="sub-head2">ScaleX</td>
<td><input type="number" step="0.1" min="0" value="<?php echo (isset($sub_layer['to-scalex']) && $sub_layer['to-scalex'] != '') ? $sub_layer['to-scalex'] : '1'; ?>" class="input-extra-small keypressFilter tooltip" name="to-scalex" data-title="Scales the layer's width by the given value from its original size."/></td>
<td class="sub-head2">ScaleY</td>
<td><input type="number" step="0.1" min="0" value="<?php echo (isset($sub_layer['to-scaley']) && $sub_layer['to-scaley'] != '') ? $sub_layer['to-scaley'] : '1'; ?>" class="input-extra-small keypressFilter tooltip" name="to-scaley" data-title="Scales the layer's height by the given value from its original size."/></td>
<td class="sub-head2">Perspective</td>
<td class="sub-head2"><input type="number" min="0" value="<?php echo (isset($sub_layer['to-perspective']) && $sub_layer['to-perspective'] != '') ? $sub_layer['to-perspective']: '400'; ?>" class="input-small keypressFilter tooltip" name="to-perspective" data-title="The perspective property defines how many pixels a 3D element is placed from the view. You can change feeling of rotation with this option."/> px</td>
</tr>
</table>
</div>
<div class="layer-data hidden main-layer-tab carousel">
<table class="layer-table" cellpadding="0" cellspacing="0">
<tr class="other-info">
<td colspan="2" class="sub-head2 carousel-layer<?php if(!$main_slide['properties']['carousel']) echo ' hidden'; ?>">Carousel Layer</td>
<td colspan="3" class="carousel-layer<?php if(!$main_slide['properties']['carousel']) echo ' hidden'; ?>">
<input type="checkbox" name="carousel-layer" <?php echo isset($sub_layer['carousel-layer']) && $sub_layer['carousel-layer']?'checked':''?> class="checkbox carousel-layer" data-title="If you want to use this layer as carousel layer, you can set it with this switch."/>
</td>
</tr>
<tr class="common-layer<?php if(isset($sub_layer['carousel-layer']) && !$sub_layer['carousel-layer']){ echo " hidden"; } ?>">
<td valign="top"><a class="table-btn-link add-attach-layer" href="#">Add</a></td>
<td colspan="5">
<table cellpadding="0" cellspacing="0" class="carousel-attr">
<?php
if(count($sub_layer['carousel_attr']) > 0)
{
for($a=0; $a < sizeof($sub_layer['carousel_attr']); $a++)
{
$carousel=$sub_layer['carousel_attr'][$a];
?>
<tr>
<td valign="top" class="sub-head2">Attach Layer</td>
<td valign="top">
<select name="attach_layer" class="element-cls input-small attach-layer">
<option value="<?php echo $carousel['attach_layer']; ?>"></option>
</select>
</td>
<td><textarea name="attach_layer_value" class="input-long attr-value"><?php echo stripcslashes($carousel['attach_layer_value']); ?></textarea></td>
<td valign="top"><a href='#' class='remove-carousel-attr'>Delete</a></td>
</tr>
<?php
}
}
?>
</table>
</td>
</tr>
</table>
</div>
<div class="layer-data hidden main-layer-tab attributes">
<table class="layer-table" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" class="sub-head">Link: </td>
</tr>
<tr>
<td class="sub-head2 text-center" colspan="4">URL</td>
<td class="sub-head2 text-center" colspan="1">Target</td>
</tr>
<tr>
<td class="text-center" colspan="4">
<input type="text" name="url" style="width:98%" value="<?php echo $sub_layer['url']?>" class="input-long layer-link tooltip" data-title="If you want to link your layer, type here the URL. You can use a hash mark followed by a number to link this layer to another slide. Example: #3 - this will switch to the third slide." />
</td>
<td class="text-center" colspan="1">
<select class="element-cls layer-link-open tooltip" name="target" data-title="You can control here the link behaviour: _self means the linked page will open in the current tab/window, _blank will open it in a new tab/window.">
<option <?php echo $sub_layer['target']=='_self'?'selected':''?> value="_self">Same page</option>
<option <?php echo $sub_layer['target']=='_blank'?'selected':''?> value="_blank">New page</option>
<option <?php echo $sub_layer['target']=='_parent'?'selected':''?> value="_parent">Parent frame</option>
<option <?php echo $sub_layer['target']=='_top'?'selected':''?> value="_top">Main frame</option>
</select>
</td>
</tr>
<tr>
<td colspan="5" class="sub-head">Attributes: </td>
</tr>
<tr>
<td class="sub-head2 text-center">ID</td>
<td class="sub-head2 text-center">Classes</td>
<td class="sub-head2 text-center">Title</td>
<td class="sub-head2 text-center">Alt</td>
<td class="sub-head2 text-center">Rel</td>
</tr>
<tr>
<td class="text-center"><input name="id" value="<?php echo $sub_layer['id']?>" type="text" class="input-small layer-id tooltip" data-title="You can apply an ID attribute on the HTML element of this layer to work with it in your custom CSS or Javascript code."/></td>
<td class="text-center"><input name="classes" value="<?php echo $sub_layer['classes']?>" type="text" class="input-small layer-class tooltip" data-title="You can apply classes on the HTML element of this layer to work with it in your custom CSS or Javascript code."/></td>
<td class="text-center"><input name="title" value="<?php echo $sub_layer['title']?>" type="text" class="input-small layer-title tooltip" data-title="You can add a title to this layer which will display as a tooltip if someone holds his mouse cursor over the layer." value=""/></td>
<td class="text-center"><input name="alt" value="<?php echo $sub_layer['alt']?>" type="text" class="input-small layer-alt tooltip" data-title="You can add an alternative text to your layer which is indexed by search engine robots and it helps people with certain disabilities." value=""/></td>
<td class="text-center"><input name="rel" value="<?php echo $sub_layer['rel']?>" type="text" class="input-small layer-rel tooltip" data-title="Some plugin may use the rel attribute of a linked content, here you can specify it to make interaction with these plugins." value=""/></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<a href="#" class="add-new-layer table-btn-link" id="slide-<?php echo ($i + 1)?>"><i class="fa fa-plus-circle"></i>Add New Layer</a>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
<div class="cloud_slider_settings">
<ul class="main-settings">
<li>
<a applycls="slide-container" class="tooltip" data-title="Slider Settings" href="#slider-settings"><i class="fa fa-gears"></i></a>
<ul class="hidden">
<li><a applycls="setting-data" class="slider-options tooltip tooltipstered" data-title="General Options" href="#layout-options"><i class="fa fa fa-newspaper-o"></i></a></li>
<li><a applycls="setting-data" class="slider-options tooltip tooltipstered" data-title="Arrow Options" href="#arrow-options"><i class="fa fa fa-arrow-left"></i></a></li>
<li><a applycls="setting-data" class="slider-options tooltip tooltipstered" data-title="Bullet Options" href="#bullet-options"><i class="fa fa fa-list-ul"></i></a></li>
<li><a applycls="setting-data" class="slider-options tooltip tooltipstered" data-title="Thumbnail Options" href="#thumb-options"><i class="fa fa-leaf"></i></a></li>
<li><a applycls="setting-data" class="slider-options tooltip tooltipstered" data-title="Video Options" href="#video-options"><i class="fa fa-video-camera"></i></a></li>
</ul>
</li>
<li>
<a applycls="slide-container" class="tooltip active" data-title="Slides" href="#all-slides"><i class="fa fa-image"></i></a>
<ul>
<li><a href="#slide-options-1" class="slide-options tooltip" applycls="options" setting="slide-options" data-title="Slide options"><i class="fa fa-edit"></i></a></li>
<li><a href="#kenburn-options-1" class="slide-options tooltip" applycls="options" setting="kenburn-options" data-title="Kenburn options"><i class="fa fa-search-plus"></i></a></li>
<li><a href="#carousel-options-1" class="slide-options tooltip" applycls="options" setting="carousel-options" data-title="Carousel options"><i class="fa fa-users"></i></a></li>
<li><a href="#layer-options-1" class="slide-options tooltip" applycls="options" setting="layer-options" data-title="Layer options"><i class="fa fa-cloud"></i></a></li>
</ul>
</li>
<li>
<a applycls="slide-container" class="tooltip" data-title="Event Callbacks" href="#events"><i class="fa fa-rotate-left"></i></a>
</li>
<li>
<a applycls="slide-container" class="tooltip external" data-title="Documentation" href="http://webuddysoft.com/cslider/documentation-wp" target="_new"><i class="fa fa fa-question"></i></a>
</li>
<!--
<li>
<a applycls="slide-container" class="tooltip" data-title="FAQ" href="#questions"><i class="fa fa-life-bouy"></i></a>
</li>
-->
</ul>
</div>
<div class="slider-footer">
<input type="hidden" name="save_slider" value="1" />
<input type="button" class="btn-cls float-left" name="save_data" value="Save Changes" />
<div class="use-short-code">
Use Shortcode:
<br>
<input type="text" class="input-small" value='[cloudslider id="<?php echo $sliderid?>"]' />
</div>
<div class="use-short-code">
Use PHP Function:
<br>
<input type="text" class="input-small" value='<?php cloudslider(<?php echo $sliderid?>); ?>' />
</div>
</div>
<div class="clearfix"></div>
</div>
</form>
<!-- Template : Slide Transition => Start -->
<div class="hidden" id="slide-transition" data-title="Select Cloud Slider Transitions">
<table cellpadding="0" cellspacing="0" class="transition-table">
<tbody class="2d-transition">
<tr>
<td colspan="2" class="sub-head">Built in 2D transitions
Select all <input type="checkbox" class="checkbox 2d_select_all" />
</td>
</tr>
<tr>
<td><a href="#" rel="2d_1">1. Slide To Left</a></td>
<td><a href="#" rel="2d_2">2. Slide To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_3">3. Slide To Top</a></td>
<td><a href="#" rel="2d_4">4. Slide To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_5">5. Slide Cols To Left</a></td>
<td><a href="#" rel="2d_6">6. Slide Cols To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_7">7. Slide Rows To Top</a></td>
<td><a href="#" rel="2d_8">8. Slide Rows To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_9">9. Slide Cells Randomly</a></td>
<td><a href="#" rel="2d_10">10. Fade</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_11">11. Fade Cols To Left</a></td>
<td><a href="#" rel="2d_12">12. Fade Cols To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_13">13. Fade Rows To Top</a></td>
<td><a href="#" rel="2d_14">14. Fade Rows To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_15">15. Fade Cells Randomly</a></td>
<td><a href="#" rel="2d_16">16. Fade & Slide Cells Randomly</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_17">17. Rotate & Slide To Left</a></td>
<td><a href="#" rel="2d_18">18. Rotate & Slide To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_19">19. Rotate & Slide To Top</a></td>
<td><a href="#" rel="2d_20">20. Rotate & Slide To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_21">21. Scale In</a></td>
<td><a href="#" rel="2d_22">22. Scale Out</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_23">23. Scale & Rotate To Left</a></td>
<td><a href="#" rel="2d_24">24. Scale & Rotate To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_25">25. Slide & Scale Rows To Left Randomly</a></td>
<td><a href="#" rel="2d_26">26. Slide & Scale Rows To Right Randomly</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_27">27. Slide & Scale Cols To Top Randomly</a></td>
<td><a href="#" rel="2d_28">28. Slide & Scale Cols To Bottom Randomly</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_29">29. Slide Cols To Left Randomly</a></td>
<td><a href="#" rel="2d_30">30. Slide Cols To Right Randomly</a></td>
</tr>
<tr>
<td><a href="#" rel="2d_31">31. Slide Rows To Top Randomly</a></td>
<td><a href="#" rel="2d_32">32. Slide Rows To Bottom Randomly</a></td>
</tr>
</tbody>
<tbody class="3d-transition">
<tr>
<td colspan="2" class="sub-head">Built in 3D transitions
Select all <input type="checkbox" class="checkbox 3d_select_all" />
</td>
</tr>
<tr>
<td><a href="#" rel="3d_33">1. Twist Rows To Top</a></td>
<td><a href="#" rel="3d_34">2. Twist Rows To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_35">3. Twist Cols To Right</a></td>
<td><a href="#" rel="3d_36">4. Twist Cols To Left</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_37">5. Twist Cols To Top</a></td>
<td><a href="#" rel="3d_38">6. Twist Cols To Bottom</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_39">7. Twist Cells Randomly</a></td>
<td><a href="#" rel="3d_40">8. Totter Cols To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_41">9. Totter Cols To Left</a></td>
<td><a href="#" rel="3d_42">10. Rotate Cols To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_43">11. Rotate Cols To Left</a></td>
<td><a href="#" rel="3d_44">12. Rotate Rows To Top</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_45">13. Rotate Rows To Bottom</a></td>
<td><a href="#" rel="3d_46">14. Scale & Rotate Cube To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_47">15. Scale & Rotate Cube To Left</a></td>
<td><a href="#" rel="3d_48">16. Scale & Rotate Cells To Right</a></td>
</tr>
<tr>
<td><a href="#" rel="3d_49">17. Scale & Rotate Cells To Left</a></td>
<td><a href="#" rel="3d_50">18. Scale & Rotate Cells Randomly</a></td>
</tr>
</tbody>
</table>
</div>
<!-- Template : Slide Transition => End -->
<!-- Template : Carousel Level Setting => Start -->
<div id="carousel-level-setting" class="hidden">
<table>
<tr>
<td class="text-center"><input type="number" min="0" max="1" step="0.1" name="carousel-opacity" value="1" class="input-extra-small keypressFilter tooltip carousel-opacity" data-title="Opacity of the carousel item for level." /></td>
<td class="text-center"><input type="number" min="0.1" step="0.1" name="carousel-scale" value="1" class="input-extra-small keypressFilter tooltip carousel-scale" data-title="Scale of the carousel item for level." /></td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-x" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-x" data-title="Rotate Degree of the carousel item for level along X axis." /> °</td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-y" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-y" data-title="Rotate Degree of the carousel item for level along Y axis." /> °</td>
<td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-z" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-z" data-title="Rotate Degree of the carousel item for level along Z axis." /> °</td>
<td class="text-center"><a href="#" class="delete-carousel-level">Delete</a></td>
</tr>
</table>
</div>
<!-- Template : Carousel Level Setting => End -->
<!-- Template : Carousel Attribute => Start -->
<div id="carousel-attribute" class="hidden">
<table>
<tr>
<td valign="top" class="sub-head2">Attach Layer</td>
<td valign="top">
<select name="attach_layer" class="element-cls input-small attach-layer">
</select>
</td>
<td><textarea name="attach_layer_value" class="input-long attr-value"></textarea></td>
<td valign="top"><a href='#' class='remove-carousel-attr'>Delete</a></td>
</tr>
</table>
</div>
<!-- Template : Carousel Attribute => End -->
<!-- Template : Configure Post Data => Start -->
<div id="configure_post_data" class="hidden" data-title="Find post with filters">
<table class="post-data-table" cellpadding="0" cellspacing="0">
<tr>
<td class="sub-head">Post Type</td>
<td class="sub-head">Categories</td>
<td class="sub-head">Tags</td>
<td class="sub-head">Order result by</td>
</tr>
<tr>
<td>
<?php
$post_types=cs_get_post_types();
?>
<select name="post_type[]" id="cs_post_type" class="element-cls select-small" multiple="multiple">
<?php
$i=1;
foreach($post_types as $ptype)
{
//$selected=$i++==1?'selected="selected"':'';
?>
<option <?php //echo $selected;?> value="<?php echo $ptype['slug'] ?>"><?php echo ucfirst($ptype['name']) ?></option>
<?php
}
?>
</select>
</td>
<td>
<?php
$postCategories = get_categories();
?>
<select name="post_categories[]" id="cs_post_cat" class="element-cls select-small" multiple="multiple">
<option value="0">Don't filter categories</option>
<?php
foreach ($postCategories as $cat)
{
?>
<option value="<?php echo $cat->term_id ?>"><?php echo ucfirst($cat->name) ?></option>
<?php
}
?>
</select>
</td>
<td>
<?php
$postTags = get_tags();
?>
<select name="post_tags[]" id="cs_post_tags" class="element-cls select-small" multiple="multiple">
<option value="0">Don't filter tags</option>
<?php foreach ($postTags as $tag){ ?>
<option value="<?php echo $tag->term_id ?>"><?php echo ucfirst($tag->name) ?></option>
<?php } ?>
</select>
</td>
<td valign="top">
<select name="order_by" id="cs_order_by" class="element-cls input-small ordercls">
<option value="date">Date Created</option>
<option value="modified">Last Modified</option>
<option value="ID">Post ID</option>
<option value="title">Post Title</option>
<option value="comment_count">Number of Comments</option>
<option value="rand">Random</option>
</select>
<br>
<br>
<select name="order" id="cs_order" class="element-cls input-small ordercls">
<option value="desc">Descending</option>
<option value="asc">Ascending</option>
</select>
</td>
</tr>
<tr>
<td class="sub-head" colspan="4">Currently matched elements.</td>
</tr>
<tr>
<td colspan="4" class="filter_posts" id="filter_posts">
<table class="slide-table" cellpadding="0" cellpadding="0">
</table>
</td>
</tr>
</table>
</div>
<!-- Template : Configure Post Data => End -->
<div id="slider-preview" data-title="Slider Preview" class="hidden"></div>
</div>
<?php } else {
if ($_GET['type'] == 'new') {
echo '<div class="cs_msg_right" style="display:block;">Could not add new slider. Please reactive the plugin and try again.</div>';
} else {
echo '<div class="cs_msg_right" style="display:block;">The requested Slider does not exist.</div>';
}
}