public function preview_panel() { global $post; if ($post->post_type !== 'mega-slider') { return; } $settings = get_post_meta($post->ID, 'md-slider-settings', true); if (!$settings) { return; } if ($settings['googlefonts']) { $link = parse_url($settings['googlefonts']); parse_str($link['query']); if ($family) { $fonts = explode("|", $family); } } $sliders = get_post_meta($post->ID, 'md-slider-data', true); $sliders = json_decode($sliders, true); $sliders = $sliders ? $sliders : array(); // Hold current thumbnail, background attachment id in JSON $old = array('fid' => array(), 'thumb' => array(), 'width' => $settings['width'], 'height' => $settings['height'], 'widthThumb' => $settings['widthThumb'], 'heightThumb' => $settings['heightThumb']); foreach ($sliders as $i => $slider) { $old['fid'][] = $slider['itemsetting']['fid']; $old['thumb'][] = $slider['itemsetting']['thumb']; $old['crop'] = $settings['imgslide']; } $old = json_encode($old); foreach ($sliders as $i => $slider) { $bg_id = $slider['itemsetting']['fid']; $thumb_id = $slider['itemsetting']['thumb'] !== '' ? $slider['itemsetting']['thumb'] : $bg_id; if (file_exists(megaSlider_get_image(get_attached_file($thumb_id), $settings['widthThumb'], $settings['heightThumb'], true))) { continue; } // Force cropping thumbnail megaSlider_create_image($thumb_id, $settings['widthThumb'], $settings['heightThumb'], true); if ($settings['fullwidth'] || file_exists(megaSlider_get_image(get_attached_file($bg_id), $settings['width'], $settings['height'], $settings['imgslide']))) { continue; } // Create background megaSlider_create_image($bg_id, $settings['width'], $settings['height'], $settings['imgslide']); } $style_options = (include MS_PATH . '/admin/list-styles.php'); ?> <div class="md-wrap" data-url="<?php echo MS_ADMIN_URL; ?> "> <h2><?php _e('Slider Content', 'mega-slider'); ?> </h2> <input type="hidden" id="mega-old" name="mega-old" value='<?php echo $old; ?> '/> <input type="submit" name="secondpublish" id="secondpublish" class="button button-primary button-large" style="float: right" value="Update Settings" accesskey="p"> <a class="button button-primary button-large" title="<?php _e('Add new tab', 'mega-slider'); ?> " id="add_tab" href="#"><?php _e('ADD', 'mega-slider'); ?> </a> <div id="md-tabs"> <ul class="md-tabs-head clearfix"> <?php for ($i = 1; $i <= count($sliders); $i++) { ?> <li class="tab-item <?php echo $i === 0 ? "first" : ""; ?> clearfix"> <a class="tab-link" href="#tabs-<?php echo $i; ?> "><span class="tab-text"><?php _e('Slide', 'mega-slider'); ?> <?php echo $i; ?> </span></a> <span class="ui-icon ui-icon-close"><?php _e('Remove Tab', 'mega-slider'); ?> </span> </li> <?php } ?> </ul> <?php foreach ($sliders as $i => $tabs) { backward_transition_compatibility($tabs, $settings); $bg_id = isset($tabs['itemsetting']['fid']) ? $tabs['itemsetting']['fid'] : ''; $items = $tabs['boxitems']; ?> <div id="tabs-<?php echo $i + 1; ?> " data-timelinewidth="<?php echo $tabs['itemsetting']['timelinewidth']; ?> " class="md-tabcontent clearfix"> <div class="settings"> <a href="#" class="panel-settings-link">[<?php _e('Settings', 'mega-slider'); ?> ]</a> <a class="panel-clone" href="#">[<?php _e('Clone slide', 'mega-slider'); ?> ]</a> <input type="hidden" autocomplete="off" class="panelsettings" value='<?php echo json_encode($tabs['itemsetting']); ?> '/> </div> <div class="md-slidewrap" style="width: <?php echo esc_attr($settings['width']); ?> px; height: <?php echo esc_attr($settings['height']); ?> px;"> <div class="md-slide-image" style="width: <?php echo esc_attr($settings['width']); ?> px; height: <?php echo esc_attr($settings['height']); ?> px;"> <?php if (!$settings['fullwidth'] && $settings['imgslide']) { ?> <img src="<?php echo $bg_id === '' ? MS_ADMIN_URL . "/images/default_bg.jpg" : esc_attr(megaSlider_create_image($bg_id, $settings['width'], $settings['height'], true)); ?> "/> <?php } else { ?> <img src="<?php echo $bg_id === '' ? MS_ADMIN_URL . "/images/default_bg.jpg" : esc_attr(wp_get_attachment_url($bg_id)); ?> "/> <?php } ?> </div> <div class="md-objects" style="width: <?php echo esc_attr($settings['width']); ?> px; height: <?php echo esc_attr($settings['height']); ?> px;"> <?php foreach ($items as $it) { $datas = ""; foreach ($it as $i => $v) { if (is_array($v)) { $datas .= sprintf('data-%s=\'%s\'', $i, json_encode($v)); } else { $datas .= sprintf('data-%s="%s" ', $i, esc_attr($v)); } } ?> <div class="slider-item ui-widget-content" <?php echo $datas; ?> style=""> <?php if ($it['type'] == 'text') { ?> <div><?php echo esc_attr($it['title']); ?> </div> <?php } elseif ($it['type'] == 'image') { ?> <img width="100%" height="100%" alt="<?php echo esc_attr($it['title']); ?> " src="<?php echo esc_attr(wp_get_attachment_url($it['fileid'])); ?> "> <?php } elseif ($it['type'] == 'video') { ?> <img width="100%" height="100%" alt="<?php echo esc_attr($it['title']); ?> " src="<?php echo esc_attr($it['thumb']); ?> "> <?php } ?> <span class="sl-tl"></span> <span class="sl-tr"></span> <span class="sl-bl"></span> <span class="sl-br"></span> <span class="sl-top"></span> <span class="sl-right"></span> <span class="sl-bottom"></span> <span class="sl-left"></span> </div> <?php } ?> </div> </div> </div> <?php } ?> </div> <div class="md-toolbar" id="md-toolbar" disabled="true"> <a title="<?php _e('Add new text', 'mega-slider'); ?> " class="mdt-button mdt-text" href="#"></a> <a title="<?php _e('Add new image', 'mega-slider'); ?> " class="mdt-button mdt-image" href="#"></a> <a title="<?php _e('Add new video', 'mega-slider'); ?> " class="mdt-button mdt-video" href="#"></a> <a title="<?php _e('Align left edge', 'mega-slider'); ?> " class="mdt-button mdt-align-left" href="#"></a> <a title="<?php _e('Align horizontal center', 'mega-slider'); ?> " class="mdt-button mdt-align-center" href="#"></a> <a title="<?php _e('Align right edge', 'mega-slider'); ?> " class="mdt-button mdt-align-right" href="#"></a> <a title="<?php _e('Align top edge', 'mega-slider'); ?> " class="mdt-button mdt-align-top" href="#"></a> <a title="<?php _e('Align vertical center', 'mega-slider'); ?> " class="mdt-button mdt-align-vcenter" href="#"></a> <a title="<?php _e('Align bottom edge', 'mega-slider'); ?> " class="mdt-button mdt-align-bottom" href="#"></a> <a title="<?php _e('Space evenly vertically', 'mega-slider'); ?> " class="mdt-button mdt-spacev" href="#"></a> <a title="<?php _e('Space evenly horizontally', 'mega-slider'); ?> " class="mdt-button mdt-spaceh" href="#"></a> <input type="text" class="mdt-text mdt-spacei" value=""> <a title="proportions" class="mdt-proportions mdt-proportions-yes" href="#"></a> <input type="text" class="mdt-text mdt-input mdt-width" name="width" value="" disabled=""> <input type="text" class="mdt-text mdt-input mdt-height" name="height" value="" disabled=""> <input type="text" class="mdt-text mdt-input mdt-left" name="left" value="" disabled=""> <input type="text" class="mdt-text mdt-input mdt-top" name="top" value="" disabled=""> <div class="mdt-item-type mdt-type-text" style="display: none;"> <div class="mdt-label"><?php _e('Text', 'mega-slider'); ?> :</div> <textarea name="text" class="mdt-text mdt-textvalue"></textarea> <a href="#" class="mdt-button mdt-addlink" title="<?php _e('Add link', 'mega-slider'); ?> "></a> <input type="text" class="mdt-text mdt-input mdt-fontsize" name="font-size" value="12"> <span class="mdt-fontsizeunit"></span> <select name="font-family" class="mdt-select mdt-input mdt-font-family"> <option value=""></option> <optgroup label="System fonts"> <option value="Arial" data-fontweight="400,700,400italic,700italic" style="font-family: Arial"> Arial </option> <option value="Verdana" data-fontweight="400,700,400italic,700italic" style="font-family: Verdana">Verdana </option> <option value="Trebuchet MS" data-fontweight="400,700,400italic,700italic" style="font-family: 'Trebuchet MS'">Trebuchet MS </option> <option value="Georgia" data-fontweight="400,700,400italic,700italic" style="font-family: Georgia">Georgia </option> <option value="Times New Roman" data-fontweight="400,700,400italic,700italic" style="font-family: 'Times New Roman'">Times New Roman </option> <option value="Tahoma" data-fontweight="400,700,400italic,700italic" style="font-family: Tahoma">Tahoma </option> </optgroup> <?php if (isset($fonts)) { ?> <optgroup label="Google Fonts"> <?php foreach ($fonts as $font) { $f = explode(":", $font); if (!isset($f[1])) { $f[1] = ""; } if (isset($f[0])) { printf('<option value="%s" data-fontweight="%s" style="font-family: \'%s\'">%s</option>', $f[0], $f[1], $f[0], $f[0]); } } ?> </optgroup> <?php } ?> </select> <select name="font-weight" class="mdt-select mdt-input mdt-font-weight"> <option value=""></option> </select> <a href="#" class="mdt-button button-style mdt-font-underline" name="text-decoration" active="underline" normal="none" title="<?php _e('Underline', 'mega-slider'); ?> "></a> <a href="#" class="mdt-button button-style mdt-font-allcaps" name="text-transform" active="uppercase" normal="none" title="<?php _e('All caps', 'mega-slider'); ?> "></a> <a href="#" class="mdt-button button-align mdt-left-alignment" value="left" title="<?php _e('Left alignment', 'mega-slider'); ?> "></a> <a href="#" class="mdt-button button-align mdt-center-alignment" value="center" title="<?php _e('Center alignment', 'mega-slider'); ?> "></a> <a href="#" class="mdt-button button-align mdt-right-alignment" value="right" title="<?php _e('Right alignment', 'mega-slider'); ?> "></a> <a href="#" class="mdt-button button-align mdt-justified-alignment" value="justify" title="<?php _e('Justified alignment', 'mega-slider'); ?> "></a> <a class="mdt-button mdt-text-color" title="<?php _e('Text color', 'mega-slider'); ?> "></a> <input type="hidden" name="color" value="" class="mdt-color mdt-input"/> <input type="hidden" name="border-color" value="" class="mdt-border-color mdt-input"/> </div> <div style="display: none;" class="mdt-item-type mdt-type-image"> <div class="mdti-image"> <input type="hidden" value="" name="fileid" class="mdt-text mdt-input mdt-image-fileid"/> <img class="mdt-imgsrc" src=""/> </div> <a href="#" class="mdt-button mdt-addlink" title="<?php _e('Add link', 'mega-slider'); ?> "></a> <div class="mdt-label"><?php _e('Image', 'mega-slider'); ?> : <a id="change-image" href="#"><?php _e('Change image', 'mega-slider'); ?> </a> </div> <textarea class="mdt-textarea mdt-imgalt" name="imgalt"></textarea> </div> <div style="display: none;" class="mdt-item-type mdt-type-video"> <div class="mdti-image"> <input type="hidden" value="" name="fileid" class="mdt-text mdt-input mdt-video-fileid"/> <img class="mdt-videosrc" src=""/><span class="mdt-play"></span> </div> <div class="mdt-label"><?php _e('Video', 'mega-slider'); ?> : <a id="change-video" href="#"><?php _e('Change', 'mega-slider'); ?> </a> </div> <textarea class="mdt-textarea mdt-videoname" name="videoname"></textarea> </div> <input type="text" class="mdt-text mdt-starttime" name="starttime" readonly="readonly" value="" disabled=""> <input type="text" class="mdt-text mdt-stoptime" name="stoptime" readonly="readonly" value="" disabled=""> <select class="mdt-select mdt-input mdt-startani" name="startani" disabled=""> <option value="none">none</option> <option value="random">random</option> <option value="bounceIn">bounceIn</option> <option value="bounceInDown">bounceInDown</option> <option value="bounceInUp">bounceInUp</option> <option value="bounceInLeft">bounceInLeft</option> <option value="bounceInRight">bounceInRight</option> <option value="fadeIn">fadeIn</option> <option value="fadeInUp">fadeInUp</option> <option value="fadeInDown">fadeInDown</option> <option value="fadeInLeft">fadeInLeft</option> <option value="fadeInRight">fadeInRight</option> <option value="fadeInRight">fadeInRight</option> <option value="fadeInUpBig">fadeInUpBig</option> <option value="fadeInDownBig">fadeInDownBig</option> <option value="fadeInLeftBig">fadeInLeftBig</option> <option value="fadeInRightBig">fadeInRightBig</option> <option value="flipInX">flipInX</option> <option value="flipInY">flipInY</option> <option value="foolishIn">foolishIn</option> <option value="lightSpeedIn">lightSpeedIn</option> <option value="puffIn">puffIn</option> <option value="rollIn">rollIn</option> <option value="rotateIn">rotateIn</option> <option value="rotateInDownLeft">rotateInDownLeft</option> <option value="rotateInDownRight">rotateInDownRight</option> <option value="rotateInUpLeft">rotateInUpLeft</option> <option value="rotateInUpRight">rotateInUpRight</option> <option value="twisterInDown">twisterInDown</option> <option value="twisterInUp">twisterInUp</option> <option value="swap">swap</option> <option value="swashIn">swashIn</option> <option value="tinRightIn">tinRightIn</option> <option value="tinLeftIn">tinLeftIn</option> <option value="tinUpIn">tinUpIn</option> <option value="tinDownIn">tinDownIn</option> <option value="vanishIn">vanishIn</option> </select> <select class="mdt-select mdt-input mdt-stopani" name="stopani" disabled=""> <option value="none">none</option> <option value="keep">Keep in slide</option> <option value="random">random</option> <option value="bombRightOut">bombRightOut</option> <option value="bombLeftOut">bombLeftOut</option> <option value="bounceOut">bounceOut</option> <option value="bounceOutDown">bounceOutDown</option> <option value="bounceOutUp">bounceOutUp</option> <option value="bounceOutLeft">bounceOutLeft</option> <option value="bounceOutRight">bounceOutRight</option> <option value="fadeOut">fadeOut</option> <option value="fadeOutUp">fadeOutUp</option> <option value="fadeOutDown">fadeOutDown</option> <option value="fadeOutLeft">fadeOutLeft</option> <option value="fadeOutRight">fadeOutRight</option> <option value="fadeOutRight">fadeOutRight</option> <option value="fadeOutUpBig">fadeOutUpBig</option> <option value="fadeOutDownBig">fadeOutDownBig</option> <option value="fadeOutLeftBig">fadeOutLeftBig</option> <option value="fadeOutRightBig">fadeOutRightBig</option> <option value="flipOutX">flipOutX</option> <option value="flipOutY">flipOutY</option> <option value="foolishOut">foolishOut</option> <option value="hinge">hinge</option> <option value="holeOut">holeOut</option> <option value="lightSpeedOut">lightSpeedOut</option> <option value="puffOut">puffOut</option> <option value="rollOut">rollOut</option> <option value="rotateOut">rotateOut</option> <option value="rotateOutDownLeft">rotateOutDownLeft</option> <option value="rotateOutDownRight">rotateOutDownRight</option> <option value="rotateOutUpLeft">rotateOutUpLeft</option> <option value="rotateOutUpRight">rotateOutUpRight</option> <option value="rotateDown">rotateDown</option> <option value="rotateUp">rotateUp</option> <option value="rotateLeft">rotateLeft</option> <option value="rotateRight">rotateRight</option> <option value="swashOut">swashOut</option> <option value="tinRightOut">tinRightOut</option> <option value="tinLeftOut">tinLeftOut</option> <option value="tinUpOut">tinUpOut</option> <option value="tinDownOut">tinDownOut</option> <option value="vanishOut">vanishOut</option> </select> <input type="text" name="opacity" value="100" maxlength="3" class="mdt-text mdt-input mdt-opacity"/> <select class="mdt-select mdt-input mdt-style" name="style" disabled=""> <option value="none">None</option> <?php foreach ($style_options as $class => $name) { ?> <option value="<?php echo esc_attr($class); ?> "><?php echo esc_attr($name); ?> </option> <?php } ?> </select> <a class="mdt-button mdt-background-color" title="<?php _e('Background color', 'mega-slider'); ?> "></a> <input type="hidden" id="background-color" class="mdt-background mdt-input" value="" name="background-color"> <input type="text" value="" maxlength="3" name="background-transparent" class="mdt-text mdt-input mdt-background-transparent"/> <div class="border-position" id="border-position"> <a href="#" class="bp-all" title="<?php _e('All borders', 'mega-slider'); ?> "><span></span></a> <a href="#" class="bp-top" title="<?php _e('Top borders', 'mega-slider'); ?> "><span></span></a> <a href="#" class="bp-right" title="<?php _e('Right borders', 'mega-slider'); ?> "><span></span></a> <a href="#" class="bp-bottom" title="<?php _e('Bottom borders', 'mega-slider'); ?> "><span></span></a> <a href="#" class="bp-left" title="<?php _e('Left borders', 'mega-slider'); ?> "><span></span></a> </div> <input type="text" value="" maxlength="3" name="border-width" class="mdt-text mdt-input mdt-border-width"/> <select name="border-style" class="mdt-select mdt-input mdt-border-style"> <option value="solid">solid</option> <option value="dashed">dashed</option> <option value="dotted">dotted</option> <option value="double">double</option> </select> <a class="mdt-button mdt-border-color" title="<?php _e('Border color', 'mega-slider'); ?> "></a> <input type="hidden" id="border-color" class="mdt-border mdt-input" value="" name="border-color"> <input type="text" value="" maxlength="2" name="border-top-left-radius" class="mdt-text mdt-border-radius mdt-br-topleft"/> <input type="text" value="" maxlength="2" name="border-top-right-radius" class="mdt-text mdt-border-radius mdt-br-topright"/> <input type="text" value="" maxlength="2" name="border-bottom-right-radius" class="mdt-text mdt-border-radius mdt-br-bottomright"/> <input type="text" value="" maxlength="2" name="border-bottom-left-radius" class="mdt-text mdt-border-radius mdt-br-bottomleft"/> <input type="text" value="" maxlength="2" name="padding-top" class="mdt-text mdt-padding mdt-p-top"/> <input type="text" value="" maxlength="2" name="padding-right" class="mdt-text mdt-padding mdt-p-right"/> <input type="text" value="" maxlength="2" name="padding-bottom" class="mdt-text mdt-padding mdt-p-bottom"/> <input type="text" value="" maxlength="2" name="padding-left" class="mdt-text mdt-padding mdt-p-left"/> <div id="mdt-linkexpand" class="mdt-linkexpand mdt-input"> <a href="#" class="mdt-link-close"></a> <input type="text" value="" name="" class="mdt-text mdt-link-value"/> <input type="text" value="" name="" class="mdt-text mdt-link-title"/> <a class="mdt-link-color mdt-edit-color" title="<?php _e('Hover text color', 'mega-slider'); ?> "></a> <input type="hidden" id="link-color" class="link-color" value="" name="link-color"> <a class="mdt-link-background mdt-edit-color" title="<?php _e('Hover background color', 'mega-slider'); ?> "></a> <input type="hidden" id="link-background" class="link-background" value="" name="link-background"> <input type="text" value="" maxlength="3" name="link-background-transparent" class="mdt-text link-background-transparent"/> <a class="mdt-link-border mdt-edit-color" title="<?php _e('Hover border color', 'mega-slider'); ?> "></a> <input type="hidden" id="link-border" class="link-border" value="" name="link-border"> <a href="#" class="mdt-link-remove">Remove</a> <a href="#" class="mdt-link-save">Save</a> </div> </div> <!-- /#md-toolbar --> <div class="md-timeline"> <div class="mdtl-layers"> <div class="mdtl-head"> <div class="mdtl-head-left"><?php _e('Timeline', 'mega-slider'); ?> </div> <div class="mdtl-head-right"> <div class="mdtl-ruler"> <?php for ($i = 0; $i < 20; $i++) { ?> <div class="number"><span><?php print $i; ?> </span></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <?php } ?> </div> <div id="slideshow-time"> <div></div> </div> </div> </div> <div class="timeline-wrap"> <div id="timeline-items"> </div> </div> </div> </div> <!-- /.md-timeline --> <!-- dialog --> <div id="dlg-video" style="display:none;" title="<?php _e('Item setting', 'mega-slider'); ?> "> <div class="dlg-inner"> <form id="form-slider-panelsetting"> <fieldset class="ui-helper-reset"> <div class="form-item"> <label for="videoid"><?php _e('Video URL', 'mega-slider'); ?> </label> <input type="text" name="txtvideoid" id="txtvideoid" class="form-text" autocomplete="false" value=""/> <button class="button button-large" id="btn-search"><?php _e('Search', 'mega-slider'); ?> </button> </div> <div class="form-item"> <label for="videoid"><?php _e('Video Id', 'mega-slider'); ?> </label> <input type="text" name="videoid" id="videoid" class="form-text" autocomplete="false" value=""/> </div> <div class="form-item"> <label for="videoname"><?php _e('Video Name', 'mega-slider'); ?> </label> <input type="text" name="videoname" id="videoname" class="form-text" autocomplete="false" value=""/> </div> <div class="form-item"> <img src="" id="videothumb" width="100px" height="100px"/> </div> <button class="button" id="videothumb-pick"><?php _e('Choose another thumbnail', 'mega-slider'); ?> </button> </fieldset> </form> </div> </div> <input id="savedcolor1" type="hidden" name="color_saved" value="ff9900,CC0000"/> <div id="dlg-slide-setting" style="display:none;"> <div class="settings"> <a href="#" class="panel-settings-link">[<?php _e('Settings', 'mega-slider'); ?> ]</a> <a class="panel-clone" href="#">[<?php _e('Clone slide', 'mega-slider'); ?> ]</a> <input class="panelsettings" type="hidden" value='{}' autocomplete="off"> </div> <div class="md-slidewrap" style="width: <?php echo esc_attr($settings['width']); ?> px; height: <?php echo esc_attr($settings['height']); ?> px;"> <div class="md-slide-image"><img src="<?php echo MS_ADMIN_URL; ?> /images/default_bg.jpg"/></div> <div class="md-objects" style="width: <?php echo esc_attr($settings['width']); ?> px; height: <?php echo esc_attr($settings['height']); ?> px;"></div> </div> </div> <input type="hidden" name="default-timelinewidth" value="<?php echo esc_attr($settings['slideShowDelay'] / 100); ?> "> <input type="hidden" name="md-slider-data" id="md-slider-data"/> <div id='slide-setting-dlg' title="Slide setting" style="display: none"> <div class="megaslider-popup clearfix"> <div id="slide-setting-tabs" class="cs-popup-tabs clearfix"> <div class="slide-setting clearfix"> <div class="choose-image"> <a class="slide-choose-image-link" href="#">[Choose image]</a> <div><img id="slide-background-preview" src=""/></div> </div> <input type="hidden" id="slide-backgroundimage"> <div class="choose-thumbnail"> <a class="slide-choose-thumbnail-link" href="#">[Choose thumbnail]</a> <div><img id="slide-thumbnail-preview" src=""/></div> </div> <input type="hidden" id="slide-thumbnail"> </div> <!-- / .slide-setting --> <div class="transition"> <h3>Transitions <a href="#" class="random-transition">[Choose random]</a></h3> <p>You can select multiple value, slide will take random effect form what you selected.</p> <div id="navbar-content-transitions" class="transition-inner"> <?php $transitions = array('slit-horizontal-left-top' => "Slit horizontal left top", 'slit-horizontal-top-right' => "Slit horizontal top right", 'slit-horizontal-bottom-up' => "Slit horizontal bottom up", 'slit-vertical-down' => "Slit vertical down", 'slit-vertical-up' => "Slit vertical up", 'strip-up-right' => "Strip up right", 'strip-up-left' => "Strip up left", 'strip-down-right' => "Strip down right", 'strip-down-left' => "Strip down left", 'strip-left-up' => "Strip left up", 'strip-left-down' => "Strip left down", 'strip-right-up' => "Strip right up", 'strip-right-down' => "Strip right down", 'strip-right-left-up' => "Strip right left up", 'strip-right-left-down' => "Strip right left down", 'strip-up-down-right' => "Strip up down right", 'strip-up-down-left' => "Strip up down left", 'left-curtain' => "Left curtain", 'right-curtain' => "Right curtain", 'top-curtain' => "Top curtain", 'bottom-curtain' => "Bottom curtain", 'slide-in-right' => "Slide in right", 'slide-in-left' => "Slide in left", 'slide-in-up' => "Slide in up", 'slide-in-down' => "Slide in down", 'fade' => "Fade"); ?> <div id="navbar-content" class="navbar-content navbar-content-tr"> <ul class="megaslider-3columns clearfix"> <?php foreach ($transitions as $key => $transition) { ?> <li><input type="checkbox" id="transitions_<?php echo $key; ?> " value="<?php echo $key; ?> "/> <label for="transitions_<?php echo $key; ?> "><?php echo $transition; ?> </label> </li> <?php } ?> </ul> </div> </div> <div id="md-tooltip" class="tooltip" style="display: none;"> <div class="md-slide-wrap"> <div class="md-slide-items" id="md-slider"> <div class="md-slide-item" data-timeout="2000"> <div class="md-mainimg"><img style="left:0px;top:0px;" src="<?php echo MS_ADMIN_URL; ?> /preview/img/1.jpg"/> </div> <div class="md-objects"> </div> </div> <div class="md-slide-item" data-timeout="2000" style="display: none;"> <div class="md-mainimg"><img style="left:0px;top:0px;" src="<?php echo MS_ADMIN_URL; ?> /preview/img/2.jpg"/> </div> <div class="md-objects"> </div> </div> </div> </div> </div> </div> <!-- / .transitions --> </div> <!-- / .cs-popup-tabs --> </div> </div> </div> <?php }
function add_md_slider_shortcode($atts) { extract(shortcode_atts(array('id' => ''), $atts)); $settings = get_post_meta($id, 'md-slider-settings', true); $sliders = json_decode(get_post_meta($id, 'md-slider-data', true), true); if (!$settings || !$sliders) { return ""; } $script = "<script>"; $html = ""; $html .= sprintf('<div class="md-slide-items md-slider" id="md-slider-%s" data-thumb-width="%s" data-thumb-height="%s" style="height: %spx;">', $id, $settings['widthThumb'], $settings['heightThumb'], $settings['height']); $class = ''; foreach ($sliders as $k => $slider) { backward_transition_compatibility($slider, $settings); $is = $slider['itemsetting']; $transition = isset($is['transitions']) ? implode(",", $is['transitions']) : ""; if (isset($is['thumb']) && $is['thumb'] !== '') { $html .= sprintf('<div class="md-slide-item slide-%s" data-timeout="%s" data-thumb="%s" data-transition="%s">', $k, $is['timelinewidth'] * 100, megaSlider_get_image(wp_get_attachment_url($is['thumb']), $settings['widthThumb'], $settings['heightThumb'], true), $transition); } else { $html .= sprintf('<div class="md-slide-item slide-%s" data-timeout="%s" data-thumb="%s" data-transition="%s">', $k, $is['timelinewidth'] * 100, megaSlider_get_image(wp_get_attachment_url($is['fid']), $settings['widthThumb'], $settings['heightThumb'], true), $transition); } if (isset($is['fid']) && $is['fid'] !== '') { if (!$settings['fullwidth'] && $settings['imgslide']) { $html .= sprintf('<div class="md-mainimg"><img src="%s" alt="%s"></div>', megaSlider_get_image(wp_get_attachment_url($is['fid']), $settings['width'], $settings['height'], true), get_the_title($id)); } else { $html .= sprintf('<div class="md-mainimg"><img src="%s" alt="%s"></div>', wp_get_attachment_url($is['fid']), get_the_title($id)); } } else { $html .= sprintf('<div class="md-mainimg"></div>'); } $html .= '<div class="md-objects">'; foreach ($slider['boxitems'] as $tab_id => $tab) { $data = ""; $style = ""; $style = 'style="'; $style .= process_layer_style((object) $tab); $style .= '"'; if (isset($tab['left'])) { $data .= sprintf('data-x="%s" ', $tab['left']); } if (isset($tab['top'])) { $data .= sprintf('data-y="%s" ', $tab['top']); } if (isset($tab['width'])) { $data .= sprintf('data-width="%s" ', $tab['width']); } if (isset($tab['height'])) { $data .= sprintf('data-height="%s" ', $tab['height']); } if (isset($tab['paddingtop'])) { $data .= sprintf('data-padding-top="%s" ', $tab['paddingtop']); } if (isset($tab['paddingbottom'])) { $data .= sprintf('data-padding-bottom="%s" ', $tab['paddingbottom']); } if (isset($tab['paddingleft'])) { $data .= sprintf('data-padding-left="%s" ', $tab['paddingleft']); } if (isset($tab['paddingright'])) { $data .= sprintf('data-padding-right="%s" ', $tab['paddingright']); } if (isset($tab['starttime'])) { $data .= sprintf('data-start="%s" ', $tab['starttime']); } if (isset($tab['stoptime'])) { $data .= sprintf('data-stop="%s" ', $tab['stoptime']); } if (isset($tab['startani'])) { $data .= sprintf('data-easein="%s" ', $tab['startani']); } if (isset($tab['stopani'])) { $data .= sprintf('data-easeout="%s"', $tab['stopani']); } if (isset($tab['style'])) { $style_class = $tab['style']; } else { $style_class = ''; } if (isset($tab['link']) && is_array($tab['link'])) { $link = $tab['link']; $className = 'mega-slider-link-object-' . $tab_id; $class .= 'a.mega-slider-link-object-' . $tab_id . ':hover { '; if ($link['color'] !== '') { $class .= 'color: #' . $link['color'] . '!important; '; } if ($link['background'] !== '') { $class .= 'background: #' . $link['background'] . '!important; '; } if ($link['transparent'] !== '') { $class .= 'opacity: ' . $link['transparent'] . '!important; '; } if ($link['border']) { $class .= 'border-color: #' . $link['border'] . '!important; '; } $class .= '} '; } if ('text' === $tab['type']) { if (isset($link) && is_array($link) && $link['value'] !== '') { $inner = sprintf('<a href="%s" title="%s" class="%s" %s>%s</a>', $link['value'], $link['title'], $className, $style, $tab['title']); $html .= sprintf('<div class="md-object %s" %s>%s</div>', $style_class, $data, $inner); } else { $inner = sprintf('<div>%s</div>', $tab['title']); $html .= sprintf('<div class="md-object %s" %s %s>%s</div>', $style_class, $data, $style, $inner); } } elseif ('video' === $tab['type']) { $videohref = generate_video_embeded_url($tab['fileid']); $html .= sprintf('<div class="md-object %s" %s %s><a title="%s" class="md-video" href="%s"><div class="play_button"></div><img src="%s" alt="%s"/></a></div>', $style_class, $data, $style, $tab['title'], $videohref, $tab['thumb'], $tab['title']); } elseif ('image' === $tab['type']) { if (isset($link) && $link['value'] !== '') { $inner = sprintf('<a href="%s" title="%s" class="%s" %s><img src="%s" alt="%s"/></a>', $link['value'], $link['title'], $className, $style, wp_get_attachment_url($tab['fileid']), $link['title']); $html .= sprintf('<div class="md-object %s" %s>%s</div>', $style_class, $data, $inner); } else { $inner = sprintf('<img src="%s" alt=""/>', wp_get_attachment_url($tab['fileid'])); $html .= sprintf('<div class="md-object %s" %s %s>%s</div>', $style_class, $data, $style, $inner); } } // Unset $link if (isset($link)) { unset($link); } } $html .= '</div>'; $html .= '</div>'; } $html .= '</div>'; if (isset($class)) { $class = '<style>' . $class . '</style>'; $html .= $class; } if ($settings['googlefonts'] != '') { $html .= '<style type="text/css" media="all">@import url("' . trim($settings['googlefonts']) . '");</style>'; } $mdSliderOptions = array('fullwidth: %s', 'transitionsSpeed: %s', 'width: %s', 'height: %s', 'responsive: %s', 'loop: %s', 'styleBorder: %s', 'styleShadow: %s', 'slideShowDelay: %s', 'slideShow: %s', 'showLoading: %s', 'loadingPosition: "%s"', 'showArrow: %s', 'touchArrow: %s', 'playButton: %s', 'showBullet: %s', 'posBullet: %s', 'showThumb: %s', 'posThumb: %s', 'enableDrag: %s'); $mdSliderScripts = '$("#md-slider-%s").mdSlider({' . implode(',', $mdSliderOptions) . '});'; $script_pt = 'jQuery(document).ready(function ($) {'; $script_pt .= $mdSliderScripts . '});'; $script .= sprintf($script_pt, $id, $settings['fullwidth'], $settings['transitionsSpeed'], $settings['width'], $settings['height'], $settings['responsive'], $settings['loop'], $settings['styleBorder'], $settings['styleShadow'], $settings['slideShowDelay'], $settings['autoPlay'], $settings['showLoading'], $settings['loadingPosition'], $settings['showArrow'], $settings['showArrowTouch'], $settings['playButton'], $settings['showBullet'], $settings['posBullet'], $settings['showThumb'], $settings['posThumb'], $settings['enableDrag']); $script .= '</script>'; return $script . $html; }