/**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        if (empty($this->data['options'])) {
            return;
        }
        $elm_classes = array();
        $elm_classes[] = $uid = $this->data['uid'];
        $elm_classes[] = $this->opt('css_class', '');
        ?>
	<div class="media-container <?php 
        echo implode(' ', $elm_classes);
        ?>
">

		<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_embed_iframe' => $this->opt('source_vd_embed_iframe'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac'), 'source_overlay_gloss' => $this->opt('source_overlay_gloss', '')));
        $link_style = $this->opt('mc_link_style', 'lined');
        $link_class = '';
        $link_type = $this->opt('mc_link_type', '');
        $btn_text = $this->opt('mc_btn_text');
        // Target
        $target = '';
        $mc_link_target = $this->opt('mc_link_target', 'self');
        if ($mc_link_target == 'self') {
            $target = 'target="_self"';
        } elseif ($mc_link_target == 'blank') {
            $target = 'target="_blank"';
        } elseif ($mc_link_target == 'img') {
            $target = 'data-lightbox="image"';
        } elseif ($mc_link_target == 'iframe') {
            $target = 'data-lightbox="iframe"';
        }
        $mc_btn_link = $this->opt('mc_btn_link');
        // Override link if modal image selected
        if ($mc_link_target == 'img') {
            $mc_btn_link = $this->opt('mc_btn_modalimg');
        }
        if ($link_type == 'btn' && ($link_style == 'lined' || $link_style == 'linedplay') && !empty($btn_text)) {
            $link_class .= 'btn btn-lined';
        }
        $mct_link = array();
        $mct_link[] = 'media-container__link--' . $link_type;
        $mct_link[] = 'media-container__link--style-' . $link_style;
        $mct_link[] = $link_class;
        if ($link_style == 'borderanim1' || $link_style == 'borderanim2') {
            $mct_link[] = 'kl-font-alt';
        }
        if (!empty($mc_btn_link)) {
            ?>
		<a class="media-container__link <?php 
            echo implode(' ', $mct_link);
            ?>
" href="<?php 
            echo $mc_btn_link;
            ?>
" <?php 
            echo $target;
            ?>
 >
			<?php 
            // Show the text
            $text = '';
            if ($link_style != 'circle' && !empty($btn_text)) {
                $text = '<span class="media-container__text">' . $btn_text . '</span>';
            }
            // Show icon if circle or linedplay style
            if ($link_type == 'btn' && $link_style == 'lined') {
                // Show text
                echo $text;
            }
            // Show icon if circle or linedplay style
            if ($link_type == 'btn' && $link_style == 'linedplay') {
                echo '<i class="kl-icon glyphicon glyphicon-play"></i>';
                // Show text
                echo $text;
            }
            // Show icon if circle or circle style
            if ($link_type == 'btn' && $link_style == 'circle') {
                echo '
				<div class="circleanim-svg">
					<svg height="108" width="108" xmlns="http://www.w3.org/2000/svg" >
						<circle stroke-opacity="0.1" fill="#FFFFFF" stroke-width="5" cx="54" cy="54" r="48" class="circleanim-svg__circle-back"></circle>
						<circle stroke-width="5" fill="#FFFFFF" cx="54" cy="54" r="48" class="circleanim-svg__circle-front" transform="rotate(50 54 54) "></circle>
						<path d="M62.1556183,56.1947505 L52,62.859375 C50.6192881,63.7654672 49.5,63.1544098 49.5,61.491212 L49.5,46.508788 C49.5,44.8470803 50.6250889,44.2383396 52,45.140625 L62.1556183,51.8052495 C64.0026693,53.0173767 63.9947588,54.9878145 62.1556183,56.1947505 Z"  fill="#FFFFFF"></path>
					</svg>
				  ' . $text . '
				</div>';
            }
            // Show border animation Style 1 (part 1)
            if ($link_type == 'btn' && $link_style == 'borderanim1') {
                // part 1
                echo '<i class="media-container__border-tt"></i><i class="media-container__border-tl"></i>';
                // Show text
                echo $text;
                // part 2
                echo '<i class="media-container__border-bb"></i><i class="media-container__border-br"></i>';
            }
            // Show border animation Style 1 (part 1)
            if ($link_type == 'btn' && $link_style == 'borderanim2') {
                // There's a math behind the stroke animation,
                $boxWidth = $this->opt('mc_borderanim2_width', '400');
                // Box width
                $boxHeight = 70;
                // Box height
                echo '

				<div class="borderanim2-svg">
				  <svg height="' . $boxHeight . '" width="' . $boxWidth . '" xmlns="http://www.w3.org/2000/svg">
					<rect class="borderanim2-svg__shape" height="' . $boxHeight . '" width="' . $boxWidth . '" />
				  </svg>
				  ' . $text . '
				</div>';
            }
            ?>
		</a>
		<?php 
        }
        ?>

	</div>
<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        $title = '';
        $style = $this->opt('ps_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $hclass = 'psl--' . strtolower($this->opt('ps_sliding_direction', 'Vertical'));
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        $is_screffect = $this->opt('ps_scrolling_effect', 0) == 1;
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_captions = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-translatey="300" data-opacity="0.1" data-easing="linear"';
        }
        ?>

		<div class="kl-slideshow portfolio-slider__sideshow gradient <?php 
        echo $style;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="fake-loading loading-1s"></div>

			<div class="bgback"></div>

			<div class="kl-slideshow-inner portfolio-slider-frames psl__wrapper <?php 
        echo $hclass;
        ?>
 <?php 
        echo $this->opt('psl_fullscreen', '0') == 1 ? 'psl--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'psl--height' : '';
        ?>
">

				<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>
				<div class="th-sparkles"></div>

				<div class="psl__inner">

					<div class="kl-slideshow-safepadding psl__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs;
        ?>
>

						<?php 
        if ($this->opt('ps_slider_title') || $this->opt('ps_slider_desc')) {
            echo '<div class="container">';
            if ($this->opt('ps_slider_title')) {
                echo '<h3 class="psl__main-title">' . $this->opt('ps_slider_title') . '</h3>';
            }
            if ($this->opt('ps_slider_desc')) {
                echo '<h4 class="psl__main-desc">' . $this->opt('ps_slider_desc') . '</h4>';
            }
            echo '</div>';
        }
        ?>

						<div class="psl-carousel__wrapper">
							<div class="psl-carousel__container">
								<?php 
        if (isset($options['single_pslides']) && is_array($options['single_pslides'])) {
            foreach ($options['single_pslides'] as $k => $slide) {
                echo '<div class="psl-carousel__item psl--item-' . $k . ' ' . ($k == 0 ? 'psl--active-item' : '') . '">';
                if (isset($slide['ps_slide_title']) && !empty($slide['ps_slide_title'])) {
                    $title = '<span class="psl__project_title">' . $slide['ps_slide_title'] . '</span>';
                }
                $ps_slide_link = zn_extract_link($slide['ps_slide_link'], 'psl__project_url');
                // Right Image
                if (isset($slide['ps_slide_image3']) && !empty($slide['ps_slide_image3'])) {
                    echo '<div class="psl__img psl-img--right">';
                    if (isset($slide['ps_slide_image3']) && !empty($slide['ps_slide_image3'])) {
                        echo '<div class="psl__img-bg" style="background-image:url(' . $slide['ps_slide_image3'] . ')"></div>';
                    }
                    echo '</div>';
                }
                // Left Image
                if (isset($slide['ps_slide_image2']) && !empty($slide['ps_slide_image2'])) {
                    echo '<div class="psl__img psl-img--left">';
                    if (isset($slide['ps_slide_image2']) && !empty($slide['ps_slide_image2'])) {
                        echo '<div class="psl__img-bg" style="background-image:url(' . $slide['ps_slide_image2'] . ')"></div>';
                    }
                    echo '</div>';
                }
                // Front Image
                if (isset($slide['ps_slide_image1']) && !empty($slide['ps_slide_image1'])) {
                    echo '<div class="psl__img psl-img--front">';
                    echo $title;
                    echo $ps_slide_link['start'] . $ps_slide_link['end'];
                    if (isset($slide['ps_slide_image1']) && !empty($slide['ps_slide_image1'])) {
                        echo '<div class="psl__img-bg" style="background-image:url(' . $slide['ps_slide_image1'] . ')"></div>';
                    }
                    echo '</div>';
                }
                echo '<div class="clearfix"></div>';
                echo '</div>';
            }
        }
        ?>
							</div>
							<a class="psl__prev" href="#"><span class="glyphicon glyphicon-chevron-left kl-icon-white"></span></a>
							<a class="psl__next" href="#"><span class="glyphicon glyphicon-chevron-right kl-icon-white"></span></a>
						</div>
						<!-- end Carousel wrapper -->

					</div><!-- /.psl__container -->
				</div><!-- /.psl__inner -->
			</div><!-- /.psl__wrapper -->

			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>

		</div><!-- end kl-slideshow -->

		<?php 
    }
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $uid = $this->data['uid'];
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>

<div class="kl-slideshow static-content__slideshow static-simpletext nobg <?php 
        echo $uid;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>

	<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
 <?php 
        echo $this->opt('sc_fadeboxed', '0') ? 'sc--has-fade-mask' : '';
        ?>
">

		<div class="static-content__source <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs;
        ?>
 >

			<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>

			<div class="th-sparkles"></div>

			<?php 
        if ($this->opt('sc_fademask', '0')) {
            ?>
			<div class="sc__fade-boxed-mask">
				<?php 
            if ($this->opt('sc_fadeboxed', '0')) {
                ?>
				<div class="sc__boxed-mask"></div>
				<?php 
            }
            ?>
				<div class="sc__fade-mask"></div>
			</div>
			<?php 
        }
        ?>

		</div><!-- /.static-content__source -->

		<div class="static-content__inner container">

			<div class="kl-slideshow-safepadding sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

				<div class="static-content static-content--simple scs--theme-<?php 
        echo $this->opt('sc_text_theme', 'grayish');
        ?>
">
					<div class="row">
						<div class="col-sm-12">
							<?php 
        if (isset($options['sc_sc']) && !empty($options['sc_sc'])) {
            echo do_shortcode($options['sc_sc']);
        }
        $sc_button_text = $this->opt('sc_button_text', '');
        $sc_button_link = zn_extract_link($this->opt('sc_button_link', ''), 'btn ' . $this->opt('sc_button_style', 'btn-fullcolor'));
        if (!empty($sc_button_text) && !empty($sc_button_link['start'])) {
            echo '<div class="sc__simpleaction">';
            echo $sc_button_link['start'] . $sc_button_text . $sc_button_link['end'];
            echo '<span class="sc__line"></span>';
            echo '</div>';
        }
        ?>
						</div>
					</div><!-- end row -->
				</div><!-- end static content -->

			</div><!-- /.container -->
		</div><!-- /.static-content__inner -->
	</div><!-- /.static-content__wrapper -->
</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $uid = $this->data['uid'];
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
		<div class="kl-slideshow static-content__slideshow <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>

			<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

				<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
				<div class="static-content__source <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

					<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
					<div class="th-sparkles"></div>

				</div><!-- /.static-content__source -->
				<?php 
        }
        ?>

				<div class="static-content__inner container">

					<div class="kl-slideshow-safepadding sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

						<div class="static-content boxes-style">
							<?php 
        // TITLE
        if (isset($options['ww_slide_title']) && !empty($options['ww_slide_title'])) {
            echo '<h3 class="static-content__subtitle sc-subtitle--centered">' . do_shortcode($options['ww_slide_title']) . '</h3>';
        }
        echo '<div class="sc__boxes row">';
        if (!empty($options['ww_box1_title']) || !empty($options['ww_box1_image']) || !empty($options['ww_box1_desc'])) {
            echo '<div class="col-sm-4">';
            echo '<div class="static-content__infopop">';
            if (!empty($options['ww_box1_image'])) {
                echo '<img src="' . $options['ww_box1_image'] . '" alt="' . $options['ww_box1_title'] . '" class="sc__img"/>';
            }
            if (!empty($options['ww_box1_title'])) {
                echo '<h4 class="sc__box-title">' . $options['ww_box1_title'] . '</h4>';
            }
            if (!empty($options['ww_box1_desc'])) {
                echo '<p>' . $options['ww_box1_desc'] . '</p>';
            }
            echo '<div class="clearfix"></div>';
            echo '</div>';
            echo '</div>';
        }
        if (!empty($options['ww_box2_title']) || !empty($options['ww_box2_image']) || !empty($options['ww_box2_desc'])) {
            echo '<div class="col-sm-4">';
            echo '<div class="static-content__infopop">';
            if (!empty($options['ww_box2_image'])) {
                echo '<img src="' . $options['ww_box2_image'] . '" alt="' . $options['ww_box2_title'] . '" class="sc__img"/>';
            }
            if (!empty($options['ww_box2_title'])) {
                echo '<h4 class="title">' . $options['ww_box2_title'] . '</h4>';
            }
            if (!empty($options['ww_box2_desc'])) {
                echo '<p>' . $options['ww_box2_desc'] . '</p>';
            }
            echo '<div class="clearfix"></div>';
            echo '</div>';
            echo '</div>';
        }
        if (!empty($options['ww_box3_title']) || !empty($options['ww_box3_image']) || !empty($options['ww_box3_desc'])) {
            echo '<div class="col-sm-4">';
            echo '<div class="static-content__infopop">';
            if (!empty($options['ww_box3_image'])) {
                echo '<img src="' . $options['ww_box3_image'] . '" alt="' . $options['ww_box3_title'] . '" class="sc__img"/>';
            }
            if (!empty($options['ww_box3_title'])) {
                echo '<h4 class="title">' . $options['ww_box3_title'] . '</h4>';
            }
            if (!empty($options['ww_box3_desc'])) {
                echo '<p>' . $options['ww_box3_desc'] . '</p>';
            }
            echo '<div class="clearfix"></div>';
            echo '</div>';
            echo '</div>';
        }
        echo '</div>';
        ?>
						</div><!-- /.boxes-style -->
					</div><!-- /.container -->

				</div><!-- /.static-content__inner -->
			</div><!-- /.static-content__wrapper -->

			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
			<!-- header bottom style -->
		</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $uid = $this->data['uid'];
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
		<div class="kl-slideshow static-content__slideshow sc--showroom-carousel <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>

			<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

				<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
				<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

					<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>

					<div class="sc-huge-arrow"></div>
					<div class="th-sparkles"></div>
				</div><!-- /.static-content__source -->
				<?php 
        }
        ?>

				<div class="static-content__inner container">
					<div class="kl-slideshow-safepadding  sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

						<div class="static-content sc--showroomcrs-style">
							<?php 
        // TITLE
        if (isset($options['sc_shcar_textcontent']) && !empty($options['sc_shcar_textcontent'])) {
            echo '<div class="sc__textcontent">' . do_shortcode($options['sc_shcar_textcontent']) . '</div>';
        }
        // BUTTON
        $prim_btn = zn_extract_link($this->opt('sc_shcar_prim_btn', ''), 'btn btn-fullcolor');
        $sec_btn = zn_extract_link($this->opt('sc_shcar_sec_btn', ''), 'btn sc__secbtn btn-lined');
        if ($prim_btn['start'] || $sec_btn['start']) {
            echo '<div class="sc__actionarea clearfix">';
            if (!empty($prim_btn['start'])) {
                echo $prim_btn['start'] . zn_extract_link_title($this->opt('sc_shcar_prim_btn', '')) . $prim_btn['end'];
            }
            if (!empty($sec_btn['start'])) {
                echo $sec_btn['start'] . zn_extract_link_title($this->opt('sc_shcar_sec_btn', '')) . $sec_btn['end'];
            }
            echo '</div>';
        }
        ?>

<?php 
        // var_dump($options);
        if (isset($options['single_shcar']) && is_array($options['single_shcar'])) {
            echo '<div class="sc__shcar-wrapper">';
            echo '<div class="sc__showroom-carousel cfs--default" data-speed="' . $this->opt('sc_shcar_speed', 5000) . '" ' . ($this->opt('sc_shcar_pagi', 1) ? 'data-pag="1"' : '') . '>';
            foreach ($options['single_shcar'] as $item) {
                echo '<div class="sc__shcar-item cfs--item">';
                if (isset($item['sc_shcar_image']) && !empty($item['sc_shcar_image'])) {
                    $linkurl = $item['sc_shcar_image'];
                    $datalightbox = 'image';
                    if (isset($item['sc_shcar_video']) && !empty($item['sc_shcar_video'])) {
                        $linkurl = $item['sc_shcar_video'];
                        $datalightbox = 'iframe';
                    }
                    echo '<a href="' . $linkurl . '" class="shc__item-link" data-lightbox="' . $datalightbox . '">';
                    $image = vt_resize('', $item['sc_shcar_image'], '280', '190', true);
                    echo '<img src="' . $image['url'] . '" alt="" class="img-responsive">';
                    echo '</a>';
                }
                if (isset($item['sc_shcar_title']) && !empty($item['sc_shcar_title'])) {
                    echo '<h4 class="shc__item-title">' . $item['sc_shcar_title'] . '</h4>';
                }
                echo '</div>';
            }
            echo '</div>';
            echo '</div>';
        }
        ?>

						</div>
					</div>
				</div><!-- /.kl-slideshow-inner__inner -->

				<?php 
        if ($this->opt('sc_fullscreen', '0')) {
            ?>
				<a class="tonext-btn js-tonext-btn" href="#" data-endof=".kl-slideshow-inner">
					<span class="mouse-anim-icon"></span>
				</a>
				<?php 
        }
        ?>

			</div>
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
			<!-- header bottom style -->
		</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>

<div class="kl-slideshow static-content__slideshow <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>

	<div class="kl-slideshow-inner static-content__wrapper sc--videobg <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height', 600) ? 'static-content--height' : '';
        ?>
">

		<div class="static-content__source  <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs;
        ?>
 >

			<?php 
        $sourcetype = $this->opt('sc_vb_video_type');
        if ($sourcetype == 'self') {
            $sourcetype = 'video_self';
        } else {
            if ($sourcetype == 'iframe') {
                $sourcetype = 'embed_iframe';
            }
        }
        WpkPageHelper::zn_background_source(array('source_type' => $sourcetype, 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('sc_vb_sh_video1'), 'source_vd_self_ogg' => $this->opt('sc_vb_sh_video2'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_embed_iframe' => $this->opt('sc_vb_embed'), 'source_vd_vp' => $this->opt('sc_vb_sh_video_cover'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay', 'yes'), 'source_vd_loop' => $this->opt('source_vd_loop', 'yes'), 'source_vd_muted' => $this->opt('source_vd_muted', 'yes'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>
			<div class="th-sparkles"></div>

		</div><!-- /.static-content__source -->

		<div class="static-content__inner container sc--captpos-<?php 
        echo $this->opt('sc_caption_pos', 'middle');
        ?>
">

			<div class="kl-slideshow-safepadding  sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

					<?php 
        echo '<div class="sc__video-captions">';
        if (!empty($options['sc_vb_line1'])) {
            echo '<span class="sc__video-line kl-font-alt">' . do_shortcode($options['sc_vb_line1']) . '</span>';
        }
        if (!empty($options['sc_vb_line2'])) {
            echo '<span class="sc__video-line kl-font-alt">' . do_shortcode($options['sc_vb_line2']) . '</span>';
        }
        echo '</div>';
        ?>

			</div><!-- /.container -->
		</div><!-- /.static-content__inner -->
	</div><!-- /.static-content__wrapper -->
</div><!-- end kl-slideshow -->
	<?php 
    }
示例#7
0
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options['single_icarousel'])) {
            return;
        }
        $style = $this->opt('ic_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Slider Options
        $data_attrs = array();
        $data_attrs[] = 'data-autoplay="' . $this->opt('ic_autoplay', 'true') . '"';
        $data_attrs[] = 'data-timeout="' . $this->opt('ic_timeout', '5000') . '"';
        $data_attrs[] = 'data-perspective="' . $this->opt('ic_perspective', '75') . '"';
        $data_attrs[] = 'data-slidespaces="' . $this->opt('ic_slidesspaces', '300') . '"';
        $data_attrs[] = 'data-slides="' . $this->opt('ic_slides', '7') . '"';
        $data_attrs[] = 'data-direction="' . $this->opt('ic_direction', 'ltr') . '"';
        $data_attrs[] = 'data-keyboard="' . $this->opt('ic_keyboard', 'true') . '"';
        $data_attrs[] = 'data-mousewheel="' . $this->opt('ic_mousewheel', 'true') . '"';
        $data_attrs[] = 'data-timer="' . $this->opt('ic_timer', 'Bar') . '"';
        $data_attrs[] = 'data-timeropc="' . $this->opt('ic_timer_opacity', '40') . '"';
        $data_attrs[] = 'data-timerdim="' . $this->opt('ic_timer_diameter', '220') . '"';
        $data_attrs[] = 'data-timercolor="' . $this->opt('ic_timercolor', '#fff') . '"';
        $data_attrs[] = 'data-timerpos="' . $this->opt('ic_timerposition', 'bottom-center') . '"';
        $data_attrs[] = 'data-timeroffx="' . $this->opt('ic_timer_offset_x', '15') . '"';
        $data_attrs[] = 'data-timeroffy="' . $this->opt('ic_timer_offset_y', '-5') . '"';
        ?>
		<div class="kl-slideshow kl-icarousel <?php 
        echo $style;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
" >

			<div class="fake-loading loading-1s"></div>

			<div class="bgback"></div>
			<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>

			<div class="kl-icarousel-container kl-slideshow-safepadding">

					<?php 
        if (isset($options['single_icarousel']) && is_array($options['single_icarousel'])) {
            echo '<div class="th-icarousel kl-icarousel__wrapper" data-count="' . count($options['single_icarousel']) . '" ' . implode(' ', $data_attrs) . '>';
            foreach ($options['single_icarousel'] as $slide) {
                echo '<div class="kl-icarousel__slide">';
                $ic_slide_link = zn_extract_link($slide['ic_slide_link'], 'slide kl-icarousel__link');
                echo $ic_slide_link['start'];
                if (isset($slide['ic_slide_image']) && !empty($slide['ic_slide_image'])) {
                    $image = vt_resize('', $slide['ic_slide_image'], '480', '360', true);
                    echo '<div style="background-image:url(' . $image['url'] . ')" class="kl-icarousel__img"></div>';
                }
                if (isset($slide['ic_slide_title']) && !empty($slide['ic_slide_title'])) {
                    echo '<h5 class="kl-icarousel__title ff-alternative"><span>' . $slide['ic_slide_title'] . '</span></h5>';
                }
                echo $ic_slide_link['end'];
                echo '</div>';
            }
            echo '</div>';
        }
        ?>
			</div>
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
		</div><!-- end kl-slideshow -->
		<?php 
    }
示例#8
0
echo $style;
?>
 <?php 
echo $bm_class;
?>
 <?php 
echo $this->data['uid'];
?>
 <?php 
echo $this->opt('css_class', '');
?>
">

     <div class="bgback"></div>
    <?php 
WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
?>
    <div class="th-sparkles"></div>

    <div class="kl-slideshow-inner container kl-slideshow-safepadding">
        <div class="row">
            <div class="ca-container" data-count="<?php 
echo $countitm;
?>
">
                <div class="ca-nav">
                    <span class="ca-nav-prev"><span class="glyphicon glyphicon-chevron-left kl-icon-white"></span></span>
                    <span class="ca-nav-next"><span class="glyphicon glyphicon-chevron-right kl-icon-white"></span></span>
                </div>
                    <div class="ca-wrapper ca-alt" data-autoplay="<?php 
echo $this->opt('ww_slider_autoplay') == 1 ? 1 : 0;
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $uid = $this->data['uid'];
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
		<div class="kl-slideshow static-content__slideshow sc--weatherbox <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>

			<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

				<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
				<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

					<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
					<div class="th-sparkles"></div>

				</div><!-- /.static-content__source -->
				<?php 
        }
        ?>

				<div class="static-content__inner container">
					<div class="kl-slideshow-safepadding  sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

						<div class="static-content sc--wb-style">
							<?php 
        // TITLE
        if (isset($options['ww_slide_title']) && !empty($options['ww_slide_title'])) {
            echo '<h2 class="static-content__title text-center">' . do_shortcode($options['ww_slide_title']) . '</h2>';
        }
        // SUBTITLE
        if (isset($options['ww_slide_subtitle']) && !empty($options['ww_slide_subtitle'])) {
            echo '<h3 class="static-content__subtitle text-center">' . do_shortcode($options['ww_slide_subtitle']) . '</h3>';
        }
        // BUTTON
        $ww_slide_m_button = $this->opt('ww_slide_m_button', '');
        $ww_slide_l_text = $this->opt('ww_slide_l_text', '');
        $ww_slide_link = zn_extract_link($this->opt('ww_slide_link', ''), 'btn btn-fullcolor btn-lg btn-third');
        if ($ww_slide_m_button || $ww_slide_l_text) {
            echo '<div class="sc__actionarea">';
            if ($ww_slide_l_text && !empty($ww_slide_link['start'])) {
                echo $ww_slide_link['start'] . $ww_slide_l_text . $ww_slide_link['end'];
            }
            // BUTTON LEFT TEXT
            if ($ww_slide_m_button) {
                echo '<h5 class="sc-infopop__text kl-font-alt">' . $ww_slide_m_button . '</h5>';
            }
            echo '<div class="clear"></div>';
            echo '</div>';
        }
        ?>

<?php 
        if ($this->opt('scw_enable', '1') && $this->opt('scw_woeid') != '') {
            ?>

	<div class="sc__weather" id="sc__weather_<?php 
            echo $uid;
            ?>
" data-woeid="<?php 
            echo $this->opt('scw_woeid', '');
            ?>
" data-location="<?php 
            echo $this->opt('scw_location', '');
            ?>
" data-unit="<?php 
            echo $this->opt('scw_unit', 'f');
            ?>
">
		<div class="fake-loading loading4s fl--nobg"></div>
	</div><!-- /.sc__weather -->

<?php 
        }
        ?>
						</div>
					</div>
				</div><!-- /.kl-slideshow-inner__inner -->

				<?php 
        if ($this->opt('sc_fullscreen', '0')) {
            ?>
				<a class="tonext-btn js-tonext-btn" href="#" data-endof=".kl-slideshow-inner">
					<span class="mouse-anim-icon"></span>
				</a>
				<?php 
        }
        ?>

			</div>
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
			<!-- header bottom style -->
		</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $uid = $this->data['uid'];
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
<div class="kl-slideshow static-content__slideshow nobg <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>

	<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

		<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
		<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

			<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
			<div class="th-sparkles"></div>

		</div><!-- /.static-content__source -->
		<?php 
        }
        ?>

		<div class="static-content__inner container">

			<div class="kl-slideshow-safepadding  sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

				<div class="static-content default-style static-content--with-login">

					<?php 
        // Check if this is a request coming from an authenticated user and if it is,
        // then do not display the form - there's no point in that.
        // This form will only work for unauthenticated users
        $section_1_class = 'col-sm-12';
        $showForm = !is_user_logged_in() && (int) get_option('users_can_register') == 1;
        if ($showForm) {
            $section_1_class = 'col-sm-10 col-sm-offset-1 col-md-7 col-md-offset-0';
        }
        ?>

					<div class="row">
						<div class="<?php 
        echo $section_1_class;
        ?>
">
							<?php 
        if (!empty($options['ww_slide_title'])) {
            echo '<h2 class="static-content__title">' . do_shortcode($options['ww_slide_title']) . '</h2>';
        }
        if (!empty($options['ww_slide_subtitle'])) {
            echo '<h3 class="static-content__subtitle">' . do_shortcode($options['ww_slide_subtitle']) . '</h3>';
        }
        $ww_slide_l_text = $this->opt('ww_slide_l_text', '');
        $ww_slide_link = zn_extract_link($this->opt('ww_slide_link', ''), 'sc-infopop__btn text-custom');
        if (!empty($options['ww_slide_m_button']) && !empty($ww_slide_l_text) && !empty($ww_slide_link['start'])) {
            echo '<div class="static-content__infopop fadeBoxIn sc-infopop--left" data-arrow="top">';
            echo $ww_slide_link['start'] . $ww_slide_l_text . $ww_slide_link['end'];
            echo '<h5 class="sc-infopop__text kl-font-alt">' . $options['ww_slide_m_button'] . '</h5>';
            echo '<div class="clear"></div>';
            echo '</div>';
        }
        ?>
						</div>
						<?php 
        if ($showForm) {
            ?>
						<div class="col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-0">
							<div class="fancy_register_form">
								<h4 style="text-align:center"><?php 
            _e("Create <strong>your account</strong> now", 'zn_framework');
            ?>
</h4>
								<form name="login_form"
									  method="post"
									  class="th-register-form register_form_static form-horizontal zn_form_login"
									  action="<?php 
            echo site_url('wp-login.php?action=register', 'login_post');
            ?>
">
									<div class="form-group">
										<label class="col-sm-4 control-label" for="user_login"><?php 
            _e("Username", 'zn_framework');
            ?>
</label>
										<div class="col-sm-8">
											<input type="text" name="user_login" id="user_login" class="form-control inputbox" required
											   placeholder="<?php 
            _e("Username", 'zn_framework');
            ?>
"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-4 control-label" for="user_email"><?php 
            _e("Email", 'zn_framework');
            ?>
</label>
										<div class="col-sm-8">
											<input type="email" name="user_email" id="user_email" class="form-control inputbox required"
												   placeholder="<?php 
            _e("Your email", 'zn_framework');
            ?>
"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-4 control-label" for="user_password"><?php 
            _e("Your password", 'zn_framework');
            ?>
</label>
										<div class="col-sm-8">
											<input type="password" name="user_password" id="user_password" class="form-control inputbox" required
												   placeholder="<?php 
            _e("Your password", 'zn_framework');
            ?>
"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-4 control-label" for="user_password2"><?php 
            _e("Verify password", 'zn_framework');
            ?>
</label>
										<div class="col-sm-8">
											<input type="password" name="user_password2" id="user_password2" class="form-control inputbox" required
												   placeholder="<?php 
            _e("Verify password", 'zn_framework');
            ?>
"/>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-8 col-sm-offset-4" style="margin-bottom:0;">
											<input type="submit"
												   name="submit"
												   class="zn_sub_button btn btn-fullcolor th-button-register"
												   value="<?php 
            _e("REGISTER", 'zn_framework');
            ?>
"/>
										</div>
									</div>
									<div class="th-response" style="display: none;"></div>
									<input type="hidden" value="register" name="zn_form_action"/>
									<input type="hidden" value="zn_do_login" name="action"/>
									<input type="hidden" value="<?php 
            echo $_SERVER['REQUEST_URI'];
            ?>
"
										   class="zn_login_redirect" name="submit"/>
									<div class="links"></div>
								</form>
							</div>
						</div><!-- end section right -->
						<?php 
        }
        /* End if (! logged in)*/
        ?>
					</div><!-- end row -->
				</div><!-- end static content -->

			</div><!-- /.container -->
		</div><!-- /.static-content__inner -->
	</div><!-- /.static-content__wrapper -->

	<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $uid = $this->data['uid'];
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
		<div class="kl-slideshow static-content__slideshow <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>

			<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

				<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
				<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

					<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
					<div class="th-sparkles"></div>

				</div><!-- /.static-content__source -->
				<?php 
        }
        ?>

				<div class="static-content__inner container">

					<div class="kl-slideshow-safepadding  sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

						<div class="static-content textpop-style">
							<div class="textpop__texts">
							<?php 
        // Line 1
        if (!empty($options['sc_pop_line1'])) {
            echo '<span class="textpop__line1 kl-font-alt">' . $options['sc_pop_line1'] . '</span>';
        }
        // Line 2
        if (!empty($options['sc_pop_line2'])) {
            echo '<span class="textpop__line2 kl-font-alt">' . $options['sc_pop_line2'] . '</span>';
        }
        // Line 3
        if (!empty($options['sc_pop_line3'])) {
            echo '<span class="textpop__line3 kl-font-alt">' . $options['sc_pop_line3'] . '</span>';
        }
        // Line 4
        if (!empty($options['sc_pop_line4'])) {
            echo '<span class="textpop__line4 kl-font-alt">' . $options['sc_pop_line4'] . '</span>';
        }
        ?>
							</div>

							<?php 
        // BUTTON
        $ww_slide_m_button = $this->opt('ww_slide_m_button', '');
        $ww_slide_l_text = $this->opt('ww_slide_l_text', '');
        $ww_slide_link = zn_extract_link($this->opt('ww_slide_link', ''), 'sc-infopop__btn text-custom');
        if ($ww_slide_m_button || $ww_slide_l_text) {
            echo '<div class="static-content__infopop fadeBoxIn" data-arrow="top">';
            if ($ww_slide_l_text && !empty($ww_slide_link['start'])) {
                echo $ww_slide_link['start'] . $ww_slide_l_text . $ww_slide_link['end'];
            }
            // BUTTON LEFT TEXT
            if ($ww_slide_m_button) {
                echo '<h5 class="sc-infopop__text kl-font-alt">' . $ww_slide_m_button . '</h5>';
            }
            echo '<div class="clear"></div>';
            echo '</div>';
        }
        ?>
						</div><!-- /.video-style -->

					</div><!-- /.container -->

				</div><!-- /.static-content__inner -->
			</div><!-- /.static-content__wrapper -->
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
		</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options)) {
            return;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $countitm = 0;
        $singleItem = $this->opt('single_item');
        $hasItems = isset($singleItem) && is_array($singleItem);
        if ($hasItems) {
            $countitm = count($singleItem);
        }
        ?>

<div class="kl-slideshow circularcatalogue circularcarousel__slideshow <?php 
        echo $style;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>
	<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>
	<div class="th-sparkles"></div>

	<div class="kl-slideshow-inner container kl-slideshow-safepadding">
		<div class="row">
			<div class="ca-container" data-count="<?php 
        echo $countitm;
        ?>
">
				<div class="ca-nav">
					<span class="ca-nav-prev"><span class="glyphicon glyphicon-chevron-left kl-icon-white"></span></span>
					<span class="ca-nav-next"><span class="glyphicon glyphicon-chevron-right kl-icon-white"></span></span>
				</div>
				<div class="ca-wrapper ca-catalogue" data-autoplay="<?php 
        echo $this->opt('ww_slider_autoplay') == 1 ? 1 : 0;
        ?>
" data-timout="<?php 
        echo $this->opt('ww_slider_timeout', 9000);
        ?>
">
				<?php 
        if ($hasItems) {
            $i = 1;
            foreach ($singleItem as $slide) {
                echo '<div class="ca-item ca-item-' . $i . '">';
                echo '<div class="ca-item-main">';
                $bg = '';
                if (isset($slide['ww_slide_image']) && !empty($slide['ww_slide_image'])) {
                    $bg = 'style="background-image:url(' . $slide['ww_slide_image'] . ');"';
                }
                echo '<div class="ca-background" ' . $bg . '></div><!-- background color -->';
                // More button
                if (isset($slide['cc_enablepanel']) && !empty($slide['cc_enablepanel'])) {
                    $smore = isset($slide['cc_slide_read_text']) && !empty($slide['cc_slide_read_text']) ? $slide['cc_slide_read_text'] : '';
                    $smore_theme = isset($slide['cc_slide_more_theme']) && !empty($slide['cc_slide_more_theme']) ? $slide['cc_slide_more_theme'] : 'light';
                    echo '<a href="#" class="circularcatalogue__more js-ca-more js-ca-more-close circularcatalogue__more--' . $smore_theme . '" data-text="' . $smore . '"><span></span></a>';
                }
                echo '<div class="circularcatalogue__details">';
                // Top label
                if (isset($slide['ww_top_label']) && !empty($slide['ww_top_label'])) {
                    echo '<h4 class="circularcatalogue__tlabel">' . $slide['ww_top_label'] . '</h4>';
                }
                // Title
                if (isset($slide['ww_slide_title']) && !empty($slide['ww_slide_title'])) {
                    echo '<h3 class="circularcatalogue__title">';
                    echo '<span>' . $slide['ww_slide_title'] . '</span>';
                    echo '</h3>';
                }
                // Bottom label
                if (isset($slide['ww_bottom_label']) && !empty($slide['ww_bottom_label'])) {
                    echo '<h4 class="circularcatalogue__blabel">' . $slide['ww_bottom_label'] . '</h4>';
                }
                echo '</div>';
                echo '</div>';
                if ($this->opt('cc_enablepanel', 1)) {
                    echo '<div class="ca-content-wrapper">';
                    //echo '<a href="#" class="ca-close"><span class="glyphicon glyphicon-remove"></span></a>';
                    echo '<div class="ca-content">';
                    // Content Title
                    if (isset($slide['ww_slide_content_title']) && !empty($slide['ww_slide_content_title'])) {
                        echo '<h6 class="ca-panel-title">' . $slide['ww_slide_content_title'] . '</h6>';
                    }
                    // Image gallery in panel
                    $gal_img1 = isset($slide['cc_sidegal1']) && !empty($slide['cc_sidegal1']);
                    $gal_img2 = isset($slide['cc_sidegal2']) && !empty($slide['cc_sidegal2']);
                    $gal_img3 = isset($slide['cc_sidegal3']) && !empty($slide['cc_sidegal3']);
                    if ($gal_img1 || $gal_img2 || $gal_img3) {
                        $img_width = isset($slide['cc_sidegal_w']) && !empty($slide['cc_sidegal_w']) ? $slide['cc_sidegal_w'] : 200;
                        // 4/3 ratio for height
                        $img_height = $img_width * 0.75;
                        echo '<ul class="ca-gallery mfp-gallery mfp-gallery--images">';
                        if ($gal_img1) {
                            $gal_img1_resize = vt_resize('', $slide['cc_sidegal1'], $img_width, $img_height, true);
                            echo '<li><a href="' . $slide['cc_sidegal1'] . '"><img src="' . $gal_img1_resize['url'] . '" alt="" class="img-responsive"></a></li>';
                        }
                        if ($gal_img2) {
                            $gal_img2_resize = vt_resize('', $slide['cc_sidegal2'], $img_width, $img_height, true);
                            echo '<li><a href="' . $slide['cc_sidegal2'] . '"><img src="' . $gal_img2_resize['url'] . '" alt="" class="img-responsive"></a></li>';
                        }
                        if ($gal_img3) {
                            $gal_img3_resize = vt_resize('', $slide['cc_sidegal3'], $img_width, $img_height, true);
                            echo '<li><a href="' . $slide['cc_sidegal3'] . '"><img src="' . $gal_img3_resize['url'] . '" alt="" class="img-responsive"></a></li>';
                        }
                        echo '</ul>';
                    }
                    // Content description
                    if (isset($slide['ww_slide_desc_full']) && !empty($slide['ww_slide_desc_full'])) {
                        $content = wpautop($slide['ww_slide_desc_full']);
                        echo '<div class="ca-content-text">';
                        if (preg_match('%(<[^>]*>.*?</)%i', $content, $regs)) {
                            echo do_shortcode($content);
                        } else {
                            echo '<p>' . do_shortcode($content) . '</p>';
                        }
                        echo '</div>';
                    }
                    // Link
                    if (isset($slide['ww_slide_read_text_content']) && !empty($slide['ww_slide_read_text_content'])) {
                        $ww_slide_link = zn_extract_link($slide['ww_slide_link'], 'btn btn-lined lined-gray');
                        echo $ww_slide_link['start'] . $slide['ww_slide_read_text_content'] . $ww_slide_link['end'];
                    }
                    echo '</div>';
                    echo '</div>';
                }
                echo '</div><!-- end ca-item -->';
                $i++;
            }
        }
        ?>
				</div>
				<!-- end ca-wrapper -->
			</div>
			<!-- end circular content carousel -->
		</div>
	</div>
	<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
	<!-- header bottom style -->
</div><!-- end kl-slideshow -->


<?php 
    }
示例#13
0
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options['single_flex'])) {
            return;
        }
        $style = $this->opt('fs_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $thumbs = '';
        if ($options['fs_show_thumbs']) {
            $thumbs = 'zn_has_thumbs';
        }
        $full_image = '';
        // Shadow style
        $fs_shadow = '';
        if (isset($options['fs_shadow']) && $options['fs_shadow'] != '') {
            $fs_shadow = 'zn-shadow-lifted';
        }
        $fs_height = '470';
        if (isset($options['fs_height']) && !empty($options['fs_height'])) {
            $fs_height = (int) $options['fs_height'];
        }
        // Flex slider style
        $sliderStyle = 'classic';
        if (isset($options['fs_style']) && $options['fs_style'] == 'modern') {
            $sliderStyle = 'modern';
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        ?>
		<div class="kl-slideshow simpleslider__slideshow <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $style;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="fake-loading loading-2s"></div>

			<div class="bgback"></div>
			<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>
			<div class="th-sparkles"></div>

			<div class="kl-slideshow-inner container kl-slideshow-safepadding">
				<div class="row">
					<div class="col-sm-12">
						<div class="zn_simple_slider_container showOnMouseover <?php 
        echo $thumbs;
        ?>
 <?php 
        echo $fs_shadow;
        ?>
 kl-flex--<?php 
        echo $sliderStyle;
        ?>
">

							<ul class="zn_general_carousel cfs--default " data-fancy="false" data-transition="<?php 
        echo $this->opt('fs_transition', 'fade');
        ?>
" data-direction="left" data-autoplay="<?php 
        echo $this->opt('ww_slider_autoplay') == 1 ? 1 : 0;
        ?>
" data-timout="<?php 
        echo $this->opt('fs_speed', 9000);
        ?>
" data-easing="easeOutExpo" data-thumbs="<?php 
        echo $thumbs;
        ?>
">

								<?php 
        if (isset($options['single_flex']) && is_array($options['single_flex'])) {
            foreach ($options['single_flex'] as $slide) {
                $fs_slide_link = zn_extract_link($slide['fs_slide_link'], 'slide__link');
                $link_title = zn_extract_link_title($slide['fs_slide_link']);
                $thumb = '';
                if (isset($slide['fs_slide_image']) && !empty($slide['fs_slide_image'])) {
                    $image = vt_resize('', $slide['fs_slide_image'], '1170', $fs_height, true);
                    $full_image = '<div class="zn_simple_slider-itemimg" style="background-image:url(' . $image['url'] . ');"></div>';
                    if ($options['fs_show_thumbs']) {
                        $small_thumb = vt_resize('', $slide['fs_slide_image'], '150', '60', true);
                        $thumb = 'data-thumb="' . $small_thumb['url'] . '"';
                    }
                }
                echo '<li class="cfs--item" ' . $thumb . '>';
                if ($sliderStyle == 'classic') {
                    echo $fs_slide_link['start'];
                    echo $full_image;
                    echo $fs_slide_link['end'];
                } else {
                    echo $full_image;
                    echo '<div class="flex-gradient-overlay"></div>';
                }
                echo '<div class="flex-caption-wrapper">';
                // Label
                if (isset($slide['fs_slide_label']) && !empty($slide['fs_slide_label']) && $sliderStyle == 'modern') {
                    echo '<h5 class="flex-label" style="' . (!empty($slide['fs_slide_label_color']) ? 'background-color:' . $slide['fs_slide_label_color'] : '') . '">' . $slide['fs_slide_label'] . '</h5>';
                }
                if (isset($slide['fs_slide_title']) && !empty($slide['fs_slide_title'])) {
                    echo '<h2 class="flex-caption kl-font-alt">' . $slide['fs_slide_title'];
                }
                if ($sliderStyle == 'modern') {
                    echo $fs_slide_link['start'];
                    echo $link_title;
                    echo '<span class="flex-arrow"></span>';
                    echo $fs_slide_link['end'];
                }
                if (isset($slide['fs_slide_title']) && !empty($slide['fs_slide_title'])) {
                    echo '</h2>';
                }
                echo '</div>';
                if ($sliderStyle == 'modern') {
                    echo '<div class="flex-underbar"></div>';
                }
                echo '</li>';
            }
        }
        ?>
							</ul>

							<?php 
        if ($this->opt('fs_bullets', 'true') || $this->opt('fs_show_thumbs', '0') == 1) {
            ?>
							<div class="zn_simple_carousel-pagi cfs--pagination <?php 
            echo $thumbs;
            ?>
"></div>
							<?php 
        }
        ?>

							<?php 
        if ($this->opt('fs_nav', 'true')) {
            ?>
							<div class="zn_simple_carousel-nav">
								<span class="zn_simple_carousel-arr zn_general_carousel-prev cfs--prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</span>
								<span class="zn_simple_carousel-arr zn_general_carousel-next cfs--next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</span>
							</div>
							<?php 
        }
        ?>

						</div><!-- /.zn_simple_slider_container -->
					</div>
				</div>
			</div>
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
			<!-- header bottom style -->
		</div><!-- end kl-slideshow -->
		<?php 
    }
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        $uid = $this->data['uid'];
        if (empty($options)) {
            return;
        }
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>

<div class="kl-slideshow static-content__slideshow <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>

	<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

		<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
		<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

			<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
			<div class="th-sparkles"></div>
		</div><!-- /.static-content__source -->
		<?php 
        }
        ?>

		<div class="static-content__inner container">

			<div class="kl-slideshow-safepadding sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

				<div class="static-content productzoom-style">
					<div class="row">
						<div class="col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-0">
							<?php 
        // TITLE
        if (!empty($options['sc_title'])) {
            echo '<h3 class="static-content__subtitle">' . do_shortcode($options['sc_title']) . '</h3>';
        }
        // FEATURES LIST
        if (!empty($options['sc_lp_features'])) {
            echo '<ul class="sc__features">';
            $textAr = explode("\n", $options['sc_lp_features']);
            foreach ($textAr as $index => $line) {
                echo '<li><span class="glyphicon glyphicon-ok kl-icon-white"></span> ' . $line . '</li>';
            }
            echo '</ul>';
        }
        // First Button
        $sc_lp_button1 = $this->opt('sc_lp_button1', '');
        $sc_lp_button1_link = zn_extract_link($this->opt('sc_lp_button1_link', ''), $this->opt('sc_lp_button1_style', ''));
        if (!empty($sc_lp_button1)) {
            $iconHolder = $this->opt('sc_lp_button1_icon', '');
            $bicon = !empty($iconHolder['family']) ? '<span class="button-icon kl-' . $this->opt('sc_lp_button1_icon_style', '') . '" ' . zn_generate_icon($this->opt('sc_lp_button1_icon', '')) . '></span>' : '';
            echo $sc_lp_button1_link['start'] . $bicon . '<span>' . $sc_lp_button1 . '</span>' . $sc_lp_button1_link['end'];
        }
        // Second Button
        $sc_2p_button1 = $this->opt('sc_2p_button1', '');
        $sc_lp_button2_link = zn_extract_link($this->opt('sc_lp_button2_link', ''), $this->opt('sc_lp_button2_style', ''));
        $btText = $this->opt('sc_bt_text', '');
        if (!empty($sc_lp_button1) && !empty($sc_2p_button1) && !empty($btText)) {
            echo '<span class="or">' . $this->opt('sc_bt_text', '') . '</span> ';
        }
        // Second Button
        if (!empty($sc_2p_button1)) {
            $iconHolder = $this->opt('sc_lp_button2_icon', '');
            $bicon2 = !empty($iconHolder['family']) ? '<span class="button-icon kl-' . $this->opt('sc_lp_button2_icon_style', '') . '" ' . zn_generate_icon($this->opt('sc_lp_button2_icon', '')) . '></span>' : '';
            echo $sc_lp_button2_link['start'] . $bicon2 . '<span>' . $sc_2p_button1 . '</span>' . $sc_lp_button2_link['end'];
        }
        ?>
						</div>

						<?php 
        // IMAGE
        if (isset($options['sc_lp_image']) && !empty($options['sc_lp_image'])) {
            echo '<div class="col-sm-10 col-sm-offset-1 col-md-7 col-md-offset-0">';
            echo '<div id="screenshot" class="sc__screenshot">';
            $image = vt_resize('', $options['sc_lp_image'], '620', '390', true);
            $image_big = vt_resize('', $options['sc_lp_image'], '1000', '630', true);
            echo '<div class="image">';
            echo '<a class="kjq-loupe" data-lightbox="image" href="' . $image_big['url'] . '">';
            // echo '<img src="' . $image['url'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />';
            echo '<img src="' . $image['url'] . '" alt="" class="img-responsive" />';
            echo '</a>';
            echo '<div class="sc__loupe"></div>';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
        ?>

					</div><!-- end row -->
				</div><!-- /.productzoom-style -->

			</div><!-- /.sc__container -->

		</div><!-- /.static-content__inner -->

	</div><!-- /.static-content__wrapper -->

	<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
	<!-- header bottom style -->
	<script type="text/javascript">
		(function(){
			jQuery('.kjq-loupe').loupe({
				'default_zoom': 150,
				'default_size' : 160,
				'apply_overlay' : false,
				'drop_shadow' : false
			});
		})();
	</script>

</div>
		<!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $uid = $this->data['uid'];
        $options = $this->data['options'];
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>
		<div class="kl-slideshow static-content__slideshow sc--reservation-form <?php 
        echo $style;
        ?>
 <?php 
        echo $uid;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>

			<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

				<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
				<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

					<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
					<div class="th-sparkles"></div>

				</div><!-- /.static-content__source -->
				<?php 
        }
        ?>

				<div class="static-content__inner container">
					<div class="kl-slideshow-safepadding sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
>

						<div class="static-content sc--resform-style">
							<?php 
        // TITLE
        if (isset($options['ww_slide_title']) && !empty($options['ww_slide_title'])) {
            echo '<h2 class="static-content__title sc-title--centered text-center">' . do_shortcode($options['ww_slide_title']) . '</h2>';
        }
        // SUBTITLE
        if (isset($options['ww_slide_subtitle']) && !empty($options['ww_slide_subtitle'])) {
            echo '<h3 class="static-content__subtitle sc-subtitle--centered text-center">' . do_shortcode($options['ww_slide_subtitle']) . '</h3>';
        }
        // BUTTON
        if (isset($options['ww_slide_m_button']) || !empty($options['ww_slide_l_text'])) {
            echo '<div class="sc__actionarea">';
            $ww_slide_link = zn_extract_link($this->opt('ww_slide_link', ''), 'btn btn-lined btn-lg btn-third');
            echo $ww_slide_link['start'] . $this->opt('ww_slide_l_text', '') . $ww_slide_link['end'];
            // BUTTON LEFT TEXT
            if (isset($options['ww_slide_m_button']) && !empty($options['ww_slide_m_button'])) {
                echo '<h5 class="sc-infopop__text kl-font-alt">' . $options['ww_slide_m_button'] . '</h5>';
            }
            echo '<div class="clear"></div>';
            echo '</div>';
        }
        // Check if current year is leap year
        $crtYear = date('Y');
        $isLeapYear = date('L', strtotime("{$crtYear}-01-01"));
        $months = array(__('JAN', 'zn_framework'), __('FEB', 'zn_framework'), __('MAR', 'zn_framework'), __('APR', 'zn_framework'), __('MAY', 'zn_framework'), __('JUN', 'zn_framework'), __('JUL', 'zn_framework'), __('AUG', 'zn_framework'), __('SEP', 'zn_framework'), __('OCT', 'zn_framework'), __('NOV', 'zn_framework'), __('DEC', 'zn_framework'));
        $days = array(0 => 31, 1 => $isLeapYear ? 29 : 28, 2 => 31, 3 => 30, 4 => 31, 5 => 30, 6 => 31, 7 => 31, 8 => 30, 9 => 31, 10 => 30, 11 => 31);
        ?>
							<div class="sc__res-form clearfix">
								<form name="sc__form-reservation " action="#" class="sc__form-reservation">

									<div class="rf__block rfblock--fields clearfix">
										<div class="rf__field rffield--bigger clearfix">
											<label class="rf__label"><?php 
        _e('CHECK IN', 'zn_framework');
        ?>
</label>
											<select name="checkin_month" class="rf__select  rf__checkinmonth">
												<?php 
        foreach ($months as $i => $month) {
            echo '<option value="' . $i . '">' . $month . '</option>';
        }
        ?>
											</select>
											<select name="checkin_day" class="rf__select rf__checkinday"></select>
										</div><!-- /.rf__field -->
<script type="text/javascript">
	jQuery(function($){
		"use strict";
		// Holds the days of each month
		var months = {
			'm_0': [<?php 
        echo implode(',', range(1, $days[0]));
        ?>
],
			'm_1': [<?php 
        echo implode(',', range(1, $days[1]));
        ?>
],
			'm_2': [<?php 
        echo implode(',', range(1, $days[2]));
        ?>
],
			'm_3': [<?php 
        echo implode(',', range(1, $days[3]));
        ?>
],
			'm_4': [<?php 
        echo implode(',', range(1, $days[4]));
        ?>
],
			'm_5': [<?php 
        echo implode(',', range(1, $days[5]));
        ?>
],
			'm_6': [<?php 
        echo implode(',', range(1, $days[6]));
        ?>
],
			'm_7': [<?php 
        echo implode(',', range(1, $days[7]));
        ?>
],
			'm_8': [<?php 
        echo implode(',', range(1, $days[8]));
        ?>
],
			'm_9': [<?php 
        echo implode(',', range(1, $days[9]));
        ?>
],
			'm_10': [<?php 
        echo implode(',', range(1, $days[10]));
        ?>
],
			'm_11': [<?php 
        echo implode(',', range(1, $days[11]));
        ?>
]
		};
		// Helper method - set days accordingly to the month provided
		var setDays = function(months, selectedMonth){
			var days = months[selectedMonth];
			if(days){
				$('.rf__checkinday').empty();
				$.each(days, function(i,v){
					$('.rf__checkinday').append('<option value="'+v+'">'+v+'</option>');
				});
			}
		};
		// On change month
		$('.rf__checkinmonth').each(function(){
			$(this).on('change', function(){
				var selectedMonth = $(this).val();
				if(selectedMonth >= 0 && selectedMonth <= 11){
					selectedMonth = 'm_'+selectedMonth;
					setDays(months, selectedMonth);
				}
			});
		});
		// On Load
		setDays(months, 'm_'+0);

		/*
		 * Build search query for endpoint
		 */
		var endpointUrl = "<?php 
        echo $options['ww_endpoint_url']['url'];
        ?>
",
			monthUrlField = "<?php 
        echo isset($options['ww_month_field']) && !empty($options['ww_month_field']) ? esc_attr($options['ww_month_field']) : 'm';
        ?>
",
			dayUrlField = "<?php 
        echo isset($options['ww_day_field']) && !empty($options['ww_day_field']) ? esc_attr($options['ww_day_field']) : 'd';
        ?>
",
			nightsUrlField = "<?php 
        echo isset($options['ww_nights_field']) && !empty($options['ww_nights_field']) ? esc_attr($options['ww_nights_field']) : 'n';
        ?>
",
			guestsUrlField = "<?php 
        echo isset($options['ww_guests_field']) && !empty($options['ww_guests_field']) ? esc_attr($options['ww_guests_field']) : 'g';
        ?>
",
			sepFirst = '<?php 
        echo false === ($pos = strpos($options['ww_endpoint_url']['url'], '?')) ? '?' : '&';
        ?>
',
			sepNext = '&';

			$('.rf__submit').on('click', function(ev){
				ev.preventDefault();
				ev.stopPropagation();
				var _mv = $('.rf__checkinmonth').val(),
					_dv = $('.rf__checkinday').val(),
					_nv = $('.rf__checkin_nights').val(),
					_gv = $('.rf__checkinguests').val(),

					_month = monthUrlField + '=' + _mv + sepNext,
					_day = dayUrlField + '=' + _dv + sepNext,
					_nights = nightsUrlField + '=' + _nv + sepNext,
					_guests = guestsUrlField + '=' + _gv + sepNext;

				endpointUrl += sepFirst + _month + _day + _nights + _guests;

				<?php 
        if ($options['ww_endpoint_url']['target'] == '_self') {
            ?>
					window.location.href = endpointUrl;
				<?php 
        } else {
            ?>
					$('<form target="_blank" action="'+endpointUrl+'" style="display:none;">')
						.appendTo('body')
						.append('<input type="text" name="'+monthUrlField+'" value="'+_mv+'"/>')
						.append('<input type="text" name="'+dayUrlField+'" value="'+_dv+'"/>')
						.append('<input type="text" name="'+nightsUrlField+'" value="'+_nv+'"/>')
						.append('<input type="text" name="'+guestsUrlField+'" value="'+_gv+'"/>')
						.submit();
				<?php 
        }
        ?>
			});
	});
</script>
										<div class="rf__field">
											<label class="rf__label"><?php 
        _e('NIGHTS', 'zn_framework');
        ?>
</label>
											<select name="checkin_nights" class="rf__select rf__checkin_nights">
												<?php 
        for ($i = 1; $i < 31; $i++) {
            echo '<option value="' . $i . '">' . $i . '</option>';
        }
        ?>
											</select>
										</div><!-- /.rf__field -->
										<div class="rf__field">
											<label class="rf__label"><?php 
        _e('GUESTS', 'zn_framework');
        ?>
</label>
											<select name="checkin_guests" class="rf__select rf__checkinguests">
												<?php 
        for ($i = 1; $i < 11; $i++) {
            echo '<option value="' . $i . '">' . $i . '</option>';
        }
        ?>
											</select>
										</div><!-- /.rf__field -->
									</div><!-- /.rf__block -->

									<div class="rf__block rfblock--submit">
										<button class="rf__submit">
											<span><?php 
        _e('CHECK <br/> AVAILABILITY', 'zn_framework');
        ?>
</span>
										</button>
									</div><!-- /.rf__block -->

								</form>
							</div><!-- /.sc__res-form -->

						</div>
					</div>
				</div><!-- /.kl-slideshow-inner__inner -->

				<?php 
        if ($this->opt('sc_fullscreen', '0')) {
            ?>
				<a class="tonext-btn js-tonext-btn" href="#" data-endof=".kl-slideshow-inner">
					<span class="mouse-anim-icon"></span>
				</a>
				<?php 
        }
        ?>

			</div>
			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
			<!-- header bottom style -->
		</div><!-- end kl-slideshow -->
	<?php 
    }
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        // Scrolling Effect
        $is_screffect = $this->opt('sc_scrolling', 0) == 1;
        $scrolling_type = $this->opt('sc_scrolling_type', 'translate_op_scale');
        $scr_main_class = '';
        $scr_effect_class = '';
        $scr_effect_attribs = '';
        $scr_effect_attribs_fade = '';
        if ($is_screffect) {
            $scr_main_class = 'scrollme';
            $scr_effect_class = 'animateme';
            $scr_effect_attribs_split = '';
            if ($scrolling_type == 'translate_op_scale') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1" data-scale="1.5"';
            } elseif ($scrolling_type == 'translate_op') {
                $scr_effect_attribs_split = 'data-translatey="300" data-opacity="0.1"';
            } elseif ($scrolling_type == 'translate') {
                $scr_effect_attribs_split = 'data-translatey="300"';
            }
            $scr_effect_attribs = ' data-when="span" data-from="0" data-to="0.75" data-easing="linear" ' . $scr_effect_attribs_split;
            $scr_effect_attribs_fade = ' data-when="span" data-from="0" data-to="0.75" data-translatey="200" data-opacity="0.1" data-easing="linear"';
        }
        ?>

<div class="kl-slideshow static-content__slideshow <?php 
        echo $style;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $scr_main_class;
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="bgback"></div>

	<div class="kl-slideshow-inner static-content__wrapper <?php 
        echo $this->opt('sc_fullscreen', '0') ? 'static-content--fullscreen' : '';
        ?>
 <?php 
        echo (int) $this->opt('ww_height') ? 'static-content--height' : '';
        ?>
">

		<?php 
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '') != 0) {
            ?>
		<div class="static-content__source  <?php 
            echo $scr_effect_class;
            ?>
" <?php 
            echo $scr_effect_attribs;
            ?>
 >

			<?php 
            WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
            ?>
			<div class="th-sparkles"></div>

		</div><!-- /.static-content__source -->
		<?php 
        }
        ?>

		<div class="static-content__inner container">

			<div class="kl-slideshow-safepadding sc__container <?php 
        echo $scr_effect_class;
        ?>
" <?php 
        echo $scr_effect_attribs_fade;
        ?>
 >

				<div class="static-content event-style">
					<div class="row">
						<div class="col-sm-10 col-sm-offset-1 col-md-7 col-md-offset-0">
							<?php 
        // TITLE
        if (isset($options['sc_ec_title']) && !empty($options['sc_ec_title'])) {
            echo '<h3 class="static-content__subtitle">' . do_shortcode($options['sc_ec_title']) . '</h3>';
        }
        ?>
							<div class="ud_counter kl-counter kl-font-alt">
								<ul class="sc_counter kl-counter-list">
									<li class="kl-counter-li"><?php 
        _e('0', 'zn_framework');
        ?>
<span class="kl-counter-unit"><?php 
        _e('day', 'zn_framework');
        ?>
</span></li>
									<li class="kl-counter-li"><?php 
        _e('00', 'zn_framework');
        ?>
<span class="kl-counter-unit"><?php 
        _e('hours', 'zn_framework');
        ?>
</span></li>
									<li class="kl-counter-li"><?php 
        _e('00', 'zn_framework');
        ?>
<span class="kl-counter-unit"><?php 
        _e('min', 'zn_framework');
        ?>
</span></li>
									<li class="kl-counter-li"><?php 
        _e('00', 'zn_framework');
        ?>
<span class="kl-counter-unit"><?php 
        _e('sec', 'zn_framework');
        ?>
</span></li>
								</ul>
								<?php 
        echo '<span class="till_lauch kl-counter-launch"><img class="kl-counter-launch-img" src="' . THEME_BASE_URI . '/images/rocket.png" alt="' . __('Launch Date', 'zn_framework') . '"></span>';
        ?>
							</div><!-- end counter -->

							<?php 
        if (!empty($options['sc_ec_mlid'])) {
            echo '<div class="mail_when_ready kl-newsletter-wrapper">';
            echo '		<form method="post" class="newsletter_subscribe newsletter-signup kl-newsletter clearfix" data-url="' . trailingslashit(home_url()) . '" name="newsletter_form">';
            echo '			<input type="text" name="zn_mc_email" class="nl-email form-control kl-newsletter-field" value="" placeholder="' . __("*****@*****.**", 'zn_framework') . '" />';
            echo '			<input type="hidden" name="zn_list_class" class="nl-lid" value="' . $options['sc_ec_mlid'] . '" />';
            echo '			<input type="submit" name="submit" class="nl-submit kl-newsletter-submit kl-font-alt btn btn-fullcolor" value="' . __("JOIN US", 'zn_framework') . '" />';
            echo '		</form>';
            echo '<span class="zn_mailchimp_result kl-newsletter-result"></span>';
            echo '</div>';
        }
        if (!empty($options['sc_ec_mlid']) && isset($options['single_ec_social']) && is_array($options['single_ec_social'])) {
            echo '<span class="or">' . __("-or stay connected: ", 'zn_framework') . '</span>';
        }
        if (isset($options['single_ec_social']) && is_array($options['single_ec_social'])) {
            $icon_class = $this->opt('sc_ec_social_color', 'normal');
            echo '<ul class="social-icons sc--' . $icon_class . ' clearfix">';
            foreach ($options['single_ec_social'] as $key => $icon) {
                $iconHolder = $icon['sc_ec_social_icon'];
                $social_icon = !empty($iconHolder['family']) ? zn_generate_icon($icon['sc_ec_social_icon']) : '';
                $icon_color = '';
                if ($icon_class != 'normal' && $icon_class != 'clean') {
                    $icon_color = isset($icon['sc_ec_social_iconcolor']) && !empty($icon['sc_ec_social_iconcolor']) ? $icon['sc_ec_social_icon']['unicode'] : 'nocolor';
                }
                if (isset($icon['sc_ec_social_title']) && !empty($icon['sc_ec_social_title'])) {
                    if (isset($icon['sc_ec_social_link']) && !empty($icon['sc_ec_social_link'])) {
                        $icon['sc_ec_social_link']['title'] = $icon['sc_ec_social_title'];
                    }
                }
                $sc_ec_social_link = zn_extract_link($icon['sc_ec_social_link'], 'social-icons-item scev-icon-' . $icon_color, $social_icon);
                echo '<li class="social-icons-li">' . $sc_ec_social_link['start'] . $sc_ec_social_link['end'] . '</li>';
            }
            echo '</ul>';
        }
        ?>
							<div class="clear"></div>
						</div>
						<?php 
        echo '<div class="col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-0">';
        // Text
        if (isset($options['sc_ec_vid_desc']) && !empty($options['sc_ec_vid_desc'])) {
            echo '<h5 style="text-align:right;">' . $options['sc_ec_vid_desc'] . '</h5>';
        }
        // VIDEO
        if (isset($options['sc_ec_vime']) && !empty($options['sc_ec_vime'])) {
            echo '<div class="embed-responsive embed-responsive-16by9 black_border">';
            echo get_video_from_link($options['sc_ec_vime'], 'embed-responsive-item no-adjust', '520', '270');
            echo '</div>';
        }
        echo '</div>';
        ?>
					</div><!-- /.row -->
				</div><!-- /. static content / event style -->

			</div><!-- /.container -->
		</div><!-- /.static-content__inner -->
	</div><!-- /.static-content__wrapper -->

			<?php 
        if (isset($options['sc_ec_date']) && !empty($options['sc_ec_date']['date']) && !empty($options['sc_ec_date']['time'])) {
            ?>
				<script type="text/javascript">
					jQuery(function ($) {
						"use strict";

						//#! Start countdown
						var years  = "<?php 
            _e('years', 'zn_framework');
            ?>
",
							months = "<?php 
            _e('months', 'zn_framework');
            ?>
",
							weeks  = "<?php 
            _e('weeks', 'zn_framework');
            ?>
",
							days   = "<?php 
            _e('days', 'zn_framework');
            ?>
",
							hours  = "<?php 
            _e('hours', 'zn_framework');
            ?>
",
							min    = "<?php 
            _e('min', 'zn_framework');
            ?>
",
							sec    = "<?php 
            _e('sec', 'zn_framework');
            ?>
";

						var counterOptions = {
							layout: function ()
							{
								return '<li class="kl-counter-li">{dn}<span class="kl-counter-unit">{dl}</span></li>' +
									'<li class="kl-counter-li">{hn}<span class="kl-counter-unit">{hl}</span></li>' +
									'<li class="kl-counter-li">{mn}<span class="kl-counter-unit">{ml}</span></li>' +
									'<li class="kl-counter-li">{sn}<span class="kl-counter-unit">{sl}</span></li>';
							}
						};
						<?php 
            // General Options
            $str_date = strtotime(trim($options['sc_ec_date']['date']));
            $y = date('Y', $str_date);
            $mo = date('m', $str_date);
            $d = date('d', $str_date);
            $time = explode(':', $options['sc_ec_date']['time']);
            $h = $time[0];
            $mi = $time[1];
            ?>
						var y = <?php 
            echo intval($y);
            ?>
,
							mo = <?php 
            echo intval($mo) - 1;
            ?>
,
							d = <?php 
            echo intval($d);
            ?>
,
							h = <?php 
            echo intval($h);
            ?>
,
							mi = <?php 
            echo intval($mi);
            ?>
,
							t = new Date(y, mo, d, h, mi, 0);
						jQuery('.ud_counter .sc_counter').countdown({
							until: t,
							layout: counterOptions.layout(),
							labels: [years, months, weeks, days, hours, min, sec],
							labels1: [years, months, weeks, days, hours, min, sec],
							format: 'DHMS'
						});
						//#!-- End countdown
					});
				</script>
			<?php 
        }
        ?>

			<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>

		</div><!-- end kl-slideshow -->
		<?php 
    }
示例#17
0
    /**
     * This method is used to display the output of the element.
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        if (empty($options['single_wow'])) {
            return;
        }
        $style = $this->opt('ww_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        // Shadow style
        $ww_shadow = '';
        if (isset($options['ww_shadow']) && $options['ww_shadow'] != '') {
            $ww_shadow = 'zn-shadow-lifted';
        }
        $captstyle = '';
        if (isset($options['ww_caption_style']) && $options['ww_caption_style'] != '') {
            $captstyle = 'ws-alternative-title';
        }
        $sl_height = $this->opt('ww_sl_height', '470');
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        $bm_class = $bottom_mask != 'none' ? 'maskcontainer--' . $bottom_mask : '';
        ?>
<div class="kl-slideshow kl-wowslider <?php 
        echo $style;
        ?>
 <?php 
        echo $bm_class;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

	<div class="fake-loading loading-2s"></div>

	<div class="bgback"></div>
	<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        ?>
	<div class="th-sparkles"></div>

	<div class="container kl-slideshow-inner kl-slideshow-safepadding">
		<div class="th-wowslider <?php 
        echo $ww_shadow;
        ?>
 <?php 
        echo $captstyle;
        ?>
" data-transition="<?php 
        echo $this->opt('ww_transition', 'blast');
        ?>
" data-autoplay="<?php 
        echo $this->opt('ww_autoplay', 'true');
        ?>
" data-timeout="<?php 
        echo $this->opt('ww_timeout', '3000');
        ?>
">
			<div class="ws_images">
				<ul>
				<?php 
        if (isset($options['single_wow']) && is_array($options['single_wow'])) {
            $i = 0;
            $thumbs = '';
            foreach ($options['single_wow'] as $slide) {
                $title = '';
                $ww_slide_link = zn_extract_link($slide['ww_slide_link'], 'link');
                if (isset($slide['ww_slide_title']) && !empty($slide['ww_slide_title'])) {
                    $title = $slide['ww_slide_title'];
                }
                echo '<li>';
                echo $ww_slide_link['start'];
                if (isset($slide['ww_slide_image']) && !empty($slide['ww_slide_image'])) {
                    $image = vt_resize('', $slide['ww_slide_image'], '1170', $sl_height, true);
                    echo '<img id="wows1_' . $i . '" title="' . $title . '" alt="' . $title . '" src="' . $image['url'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />';
                    $image_thumb = vt_resize('', $slide['ww_slide_image'], '150', '60', true);
                    $thumbs .= '<a href="#" title="slide' . $i . '"><img src="' . $image_thumb['url'] . '" alt="" />' . $i . '</a>';
                }
                echo $ww_slide_link['end'];
                echo '</li>';
                $i++;
            }
        }
        ?>
				</ul>
			</div><!-- end ws_images -->

			<div class="ws_bullets">
				<div>
					<?php 
        echo $thumbs;
        ?>
				</div>
			</div><!-- end ws-bullets -->

		</div><!-- end #wow slider -->
	</div>
	<?php 
        WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
</div><!-- end kl-slideshow -->
<?php 
    }
示例#18
0
        /**
         * Display the proper sub-header based on the provided arguments
         *
         * @param array $args The list of arguments
         */
        public static function zn_get_subheader($args = array())
        {
            $id = zn_get_the_id();
            $defaults = array('headerClass' => 'zn_def_header_style', 'title' => get_the_title($id), 'layout' => zget_option('zn_disable_subheader', 'general_options'), 'def_header_bread' => zget_option('def_header_bread', 'general_options', false, 1), 'def_header_date' => zget_option('def_header_date', 'general_options', false, 1), 'def_header_title' => zget_option('def_header_title', 'general_options', false, 1), 'show_subtitle' => zget_option('def_header_subtitle', 'general_options', false, true), 'extra_css_class' => '', 'bottommask' => zget_option('def_bottom_style', 'general_options', false, 'none'), 'bg_source' => '', 'is_element' => false, 'inherit_head_pad' => true, 'title_heading' => 'h2');
            $saved_headers = zget_option('header_generator', 'unlimited_header_options', false, array());
            // Combine defaults with the options saved in post meta
            if (is_singular()) {
                // if ( is_singular() || is_home() || is_shop() ) {
                $post_defaults = array();
                $title_bar_layout = get_post_meta($id, 'zn_zn_disable_subheader', true);
                if (!empty($title_bar_layout)) {
                    $post_defaults = array('layout' => $title_bar_layout, 'subtitle' => get_post_meta($id, 'zn_page_subtitle', true));
                    $saved_title = get_post_meta($id, 'zn_page_title', true);
                    if (!empty($saved_title)) {
                        $post_defaults['title'] = $saved_title;
                    }
                }
                // Sub-header style
                $zn_subheader_style = get_post_meta($id, 'zn_subheader_style', true);
                if (!empty($zn_subheader_style)) {
                    $post_defaults['headerClass'] = 'uh_' . $zn_subheader_style;
                }
                // Get Subheader settings from Unlimited Subheader style
                foreach ($saved_headers as $header) {
                    if (isset($header['uh_style_name']) && !empty($header['uh_style_name'])) {
                        $header_name = strtolower(str_replace(' ', '_', $header['uh_style_name']));
                        if ($zn_subheader_style == $header_name) {
                            $defaults['bottommask'] = $header['uh_bottom_style'];
                        }
                    }
                }
                $defaults = wp_parse_args($post_defaults, $defaults);
            } elseif (is_tax() || is_category()) {
                global $wp_query;
                $cat = $wp_query->get_queried_object();
                if ($cat && isset($cat->term_id)) {
                    $id = $cat->term_id;
                    $ch = get_option('wpk_zn_select_custom_header_' . $id, false);
                    if (!empty($ch)) {
                        if ('zn_def_header_style' != $ch) {
                            $defaults['headerClass'] = 'uh_' . $ch;
                        }
                        // Get Subheader settings from Unlimited Subheader style
                        foreach ($saved_headers as $header) {
                            if (isset($header['uh_style_name']) && !empty($header['uh_style_name'])) {
                                $header_name = strtolower(str_replace(' ', '_', $header['uh_style_name']));
                                if ($ch == $header_name) {
                                    $defaults['bottommask'] = $header['uh_bottom_style'];
                                }
                            }
                        }
                    }
                }
            }
            $args = wp_parse_args($args, $defaults);
            $args = apply_filters('zn_sub_header', $args);
            // If the subheader shouldn't be shown
            if ($args['layout'] == 'yes') {
                return;
            }
            $extra_classes = array();
            $bottom_mask = $args['bottommask'];
            if ($bottom_mask != 'none') {
                $extra_classes[] = 'maskcontainer--' . $bottom_mask;
            }
            $is_element = $args['is_element'];
            if ($is_element) {
                $extra_classes[] = 'page-subheader--custom';
            } else {
                $extra_classes[] = 'page-subheader--auto';
            }
            // Inherit heading & padding from Unlimited Subheader styles
            // Enabled by default for autogenerated pages and via option in Custom Subheader Element
            $inherit_head_pad = $args['inherit_head_pad'];
            if ($inherit_head_pad) {
                $extra_classes[] = 'page-subheader--inherit-hp';
            }
            $extra_classes[] = $args['headerClass'];
            $extra_classes[] = $args['extra_css_class'];
            // Get Site Header's Position (relative | absolute)
            $header_pos = 'psubhead-stheader--absolute';
            $headerLayoutStyle = zget_option('zn_header_layout', 'general_options', false, 'style2');
            if (zget_option('head_position', 'general_options', false, '1') != 1) {
                if ($headerLayoutStyle != 'style7') {
                    $header_pos = 'psubhead-stheader--relative';
                }
            }
            $extra_classes[] = $header_pos;
            ?>
            <div id="page_header" class="page-subheader <?php 
            echo implode(' ', $extra_classes);
            ?>
">

                <div class="bgback"></div>

                <?php 
            $bg_source = $args['bg_source'];
            if (!empty($bg_source) && is_array($bg_source)) {
                WpkPageHelper::zn_background_source($bg_source);
            }
            ?>

                <div class="th-sparkles"></div>

                <!-- DEFAULT HEADER STYLE -->
                <div class="ph-content-wrap">
                    <div class="ph-content-v-center">
                        <div>
                            <div class="container">
                                <div class="row">
                                    <?php 
            $br_date = (int) $args['def_header_bread'] || (int) $args['def_header_date'];
            $def_cols = $br_date ? 6 : 12;
            if ($br_date) {
                ?>
                                    <div class="col-sm-6">
                                        <?php 
                if ((int) $args['def_header_bread']) {
                    zn_breadcrumbs();
                } else {
                    echo '&nbsp;';
                }
                if ((int) $args['def_header_date']) {
                    echo '<span id="current-date" class="subheader-currentdate hidden-xs">' . date_i18n(get_option('date_format'), strtotime(date("l M d, Y") . get_option('gmt_offset')), false) . '</span>';
                } else {
                    echo '&nbsp;';
                }
                ?>
                                        <div class="clearfix"></div>
                                    </div>
                                    <?php 
            }
            ?>
                                    <div class="col-sm-<?php 
            echo $def_cols;
            ?>
">
                                        <div class="subheader-titles">

                                            <?php 
            if (!empty($args['def_header_title'])) {
                ?>
                                                <<?php 
                echo $args['title_heading'];
                ?>
 class="subheader-maintitle">
                                                    <?php 
                echo $args['title'];
                ?>
                                                </<?php 
                echo $args['title_heading'];
                ?>
>
                                            <?php 
            }
            ?>

                                            <?php 
            if (isset($args['show_subtitle']) && $args['show_subtitle'] && !empty($args['subtitle'])) {
                ?>
                                                <h4 class="subheader-subtitle">
                                                    <?php 
                echo do_shortcode($args['subtitle']);
                ?>
                                                </h4>
                                            <?php 
            }
            ?>

                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->
                            </div>
                        </div>
                    </div>
                </div>
                <?php 
            WpkPageHelper::zn_bottommask_markup($bottom_mask);
            ?>
            </div>
            <?php 
        }
示例#19
0
    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $options = $this->data['options'];
        $style = $this->opt('ls_header_style', '');
        if (!empty($style)) {
            $style = 'uh_' . $style;
        }
        $slider_desc = '';
        if (isset($options['ls_slider_desc']) && !empty($options['ls_slider_desc'])) {
            $slider_desc = '<h3 class="ls__main-title">' . do_shortcode($options['ls_slider_desc']) . '</h3>';
        }
        $uid = $this->data['uid'];
        $ls_slider_display = $this->opt('ls_slider_display', 'laptop');
        $slides_exists = isset($options['single_lslides']) && is_array($options['single_lslides']);
        $fullscreen = $this->opt('ls_fullscreen', 0) == 1 ? 'ls--fullscreen' : '';
        $enable_autoplay = $this->opt('enable_autoplay', 'yes') == 'yes';
        // Mask
        // -- not needed as the slider has it's own mask
        // $bottom_mask = $this->opt('hm_header_bmasks','none');
        // $bm_class = $bottom_mask != 'none' ? 'maskcontainer--'.$bottom_mask : '';
        ?>
		<div class="kl-slideshow laptop-slider__slideshow ls--<?php 
        echo $ls_slider_display;
        ?>
 <?php 
        echo $style;
        ?>
 <?php 
        echo $fullscreen;
        ?>
 <?php 
        echo $this->data['uid'];
        ?>
 <?php 
        echo $this->opt('css_class', '');
        ?>
">

			<div class="bgback"></div>
			<?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac')));
        if ($this->opt('source_mask', 1)) {
            echo '<div class="ls-source__mask ls-source__mask-back"></div>';
            echo '<div class="ls-source__mask ls-source__mask-front"></div>';
        }
        ?>
			<div class="th-sparkles"></div>

			<div class="laptop-slider__inner container ls--theme-<?php 
        echo $this->opt('ls_theme_color', 'light');
        ?>
">
				<div class=" ls__container kl-slideshow-safepadding">

					<?php 
        echo $slider_desc;
        ?>

					<div class="ls__laptop-mask">

						<div class="ls__screen">
							<div class="zn_laptop_slider_wrapper">

								<div class="fake-loading loading-1s fl--nobg"></div>

								<div class="zn_laptop_slider" data-details="#ls__left-desc-<?php 
        echo $uid;
        ?>
" data-autoplay="<?php 
        echo $enable_autoplay;
        ?>
" data-trans="<?php 
        echo $this->opt('ls_trans', 5000);
        ?>
">
									<div class="zn_laptop_slider_container">
<?php 
        if ($slides_exists) {
            $bullets = '';
            foreach ($options['single_lslides'] as $slide) {
                $ls_slide_link = zn_extract_link($slide['ls_slide_link'], 'ls__item-link');
                $bullets .= '<a href="#" class="ls__nav-item"></a>';
                $caption = isset($slide['ls_slide_title']) && !empty($slide['ls_slide_title']) ? $slide['ls_slide_title'] : '';
                // Display image
                echo '<div class="ls__slider-item">';
                if (isset($slide['ls_slide_image']) && !empty($slide['ls_slide_image'])) {
                    $image = vt_resize('', $slide['ls_slide_image'], '800', '600', true);
                    echo '<div class="ls-slider-item__img" style="background-image:url(' . $image['url'] . ')"></div>';
                }
                // If JUST slider
                if ($ls_slider_display == 'laptop' && !empty($caption)) {
                    echo '<h3 class="ls__item-caption ff-alternative">' . $ls_slide_link['start'] . $caption . $ls_slide_link['end'] . '</h3>';
                }
                echo '</div>';
            }
        }
        ?>
										</div><!-- /.zn_laptop_slider_container -->
									</div>
								</div><!-- /.zn_laptop_slider_wrapper -->
							</div>
							<!-- end /.ls screen -->

							<?php 
        if ($this->opt('ls_slide_bullets', 1)) {
            ?>
							<div class="ls__nav">
								<?php 
            if ($slides_exists) {
                echo $bullets;
            }
            ?>
							</div>
							<?php 
        }
        ?>

							<?php 
        if ($this->opt('ls_slide_arrows', 1)) {
            ?>
							<div class="ls__arrows">
								<span class="ls__arrow ls__arrow-left"></span>
								<span class="ls__arrow ls__arrow-right"></span>
							</div>
							<?php 
        }
        ?>

						</div>
						<!-- laptop mask -->

						<?php 
        // If it's using the SLIDER description
        if ($ls_slider_display == 'lapt_slider_desc' || $ls_slider_display == 'lapt_desc') {
            ?>

						<div class="ls__left-desc" id="ls__left-desc-<?php 
            echo $uid;
            ?>
">

							<?php 
            if ($ls_slider_display == 'lapt_slider_desc') {
                ?>

								<?php 
                if ($this->opt('ls_slide_title')) {
                    ?>
									<div class="ls__sl-main-title"><?php 
                    echo $this->opt('ls_slide_title');
                    ?>
</div>
								<?php 
                }
                ?>

								<?php 
                if ($this->opt('ls_slide_desc')) {
                    ?>
									<div class="ls__sl-main-desc"><?php 
                    echo $this->opt('ls_slide_desc');
                    ?>
</div>
								<?php 
                }
                ?>

								<?php 
                // BUTTON
                $slide_link = zn_extract_link($options['ls_slide_link'], 'btn btn-fullcolor');
                $slide_link_sec = zn_extract_link($options['ls_slide_link_sec'], 'btn ls__secbtn btn-lined ' . ($this->opt('ls_theme_color', 'light') == 'dark' ? 'lined-dark' : ''));
                if (!empty($slide_link['start']) || !empty($slide_link_sec['start'])) {
                    echo '<div class="ls__actionarea clearfix">';
                    if (!empty($slide_link['start'])) {
                        echo $slide_link['start'] . $options['ls_slide_link']['title'] . $slide_link['end'];
                    }
                    if (!empty($slide_link_sec['start'])) {
                        echo $slide_link_sec['start'] . $options['ls_slide_link_sec']['title'] . $slide_link_sec['end'];
                    }
                    echo '</div>';
                }
                ?>

							<?php 
                // If It's using the ITEMS description
            } elseif ($ls_slider_display == 'lapt_desc') {
                ?>

								<?php 
                if ($slides_exists) {
                    ?>
								<?php 
                    foreach ($options['single_lslides'] as $slide) {
                        ?>

									<div class="ls_slide_item-details">

										<?php 
                        if ($slide['ls_slide_title']) {
                            ?>
											<div class="ls__sl-main-title"><?php 
                            echo $slide['ls_slide_title'];
                            ?>
</div>
										<?php 
                        }
                        ?>

										<?php 
                        if ($slide['ls_slide_desc']) {
                            ?>
											<div class="ls__sl-main-desc"><?php 
                            echo $slide['ls_slide_desc'];
                            ?>
</div>
										<?php 
                        }
                        ?>

										<?php 
                        // BUTTON
                        $slide_link = zn_extract_link($slide['ls_slide_link'], 'btn btn-fullcolor');
                        $slide_link_sec = zn_extract_link($slide['ls_slide_link_sec'], 'btn ls__secbtn btn-lined ' . ($this->opt('ls_theme_color', 'light') == 'dark' ? 'lined-dark' : ''));
                        if (!empty($slide_link['start']) || !empty($slide_link_sec['start'])) {
                            echo '<div class="ls__actionarea clearfix">';
                            if (!empty($slide_link['start'])) {
                                echo $slide_link['start'] . $slide['ls_slide_link']['title'] . $slide_link['end'];
                            }
                            if (!empty($slide_link_sec['start'])) {
                                echo $slide_link_sec['start'] . $slide['ls_slide_link_sec']['title'] . $slide_link_sec['end'];
                            }
                            echo '</div>';
                        }
                        ?>

									</div>

								<?php 
                    }
                    ?>
								<?php 
                }
                ?>

							<?php 
            }
            ?>

						</div><!-- /.ls__left-desc -->

						<?php 
        }
        ?>
						<div class="clearfix"></div>

					</div><!-- /.laptop-slider__inner -->
				</div>
			</div>
			<?php 
        // not needed as the slider has it's own mask
        // WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
		</div><!-- end kl-slideshow -->
		<?php 
    }
示例#20
0
    /**
     * Output the element
     * IMPORTANT : The UID needs to be set on the top parent container
     */
    function element()
    {
        $uid = $this->data['uid'];
        $section_classes = array();
        $section_classes[] = $uid;
        $section_classes[] = $this->opt('ustyle') ? $this->opt('ustyle') : '';
        $section_classes[] = $this->opt('css_class') ? $this->opt('css_class', '') : '';
        $size = $this->opt('size') ? $this->opt('size') : 'container';
        $section_classes[] = $this->opt('enable_parallax') === 'yes' ? 'zn_parallax' : '';
        $section_classes[] = $this->opt('enable_ov_hidden') === 'yes' ? 'zn_ovhidden' : '';
        if (empty($this->data['content'])) {
            $this->data['content'] = array(ZN()->pagebuilder->add_module_to_layout('ZnColumn', array(), array(), 'col-sm-12'));
        }
        $bottom_mask = $this->opt('hm_header_bmasks', 'none');
        if ($bottom_mask != 'none') {
            $section_classes[] = 'zn_section--masked';
        }
        if ($this->opt('source_type', '') != '' || $this->opt('source_overlay', '0') != 0 || $this->opt('hm_header_bmasks', 'none') != 'none' || $this->opt('source_overlay_gloss', '') == 1) {
            $section_classes[] = 'zn_section--relative';
        }
        $autopopup_attr = '';
        if ($this->opt('enable_inlinemodal', '') == 'yes') {
            $section_classes[] = 'zn_section--inlinemodal mfp-hide';
            $section_classes[] = $this->opt('window_size', '1200') < 1200 ? 'zn_section--stretch-container' : '';
            $section_classes[] = $this->opt('window_autopopup', '') != '' ? 'zn_section--auto-' . $this->opt('window_autopopup', '') : '';
            // Add delay
            if ($this->opt('window_autopopup', '') == 'delay') {
                $autopopup_attr = 'data-auto-delay="' . $this->opt('autopopup_delay', '5') . '"';
            }
        }
        $section_classes[] = 'section--' . $this->opt('skewed_bg', 'no');
        $section_classes[] = $this->opt('section_scheme', '') != '' ? 'element-scheme--' . $this->opt('section_scheme', '') : '';
        ?>
		<section class="zn_section <?php 
        echo implode(' ', $section_classes);
        ?>
" id="<?php 
        echo $uid;
        ?>
" <?php 
        echo $autopopup_attr;
        ?>
>

            <?php 
        WpkPageHelper::zn_background_source(array('source_type' => $this->opt('source_type'), 'source_background_image' => $this->opt('background_image'), 'source_vd_yt' => $this->opt('source_vd_yt'), 'source_vd_embed_iframe' => $this->opt('source_vd_embed_iframe'), 'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'), 'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'), 'source_vd_self_webm' => $this->opt('source_vd_self_webm'), 'source_vd_vp' => $this->opt('source_vd_vp'), 'source_vd_autoplay' => $this->opt('source_vd_autoplay'), 'source_vd_loop' => $this->opt('source_vd_loop'), 'source_vd_muted' => $this->opt('source_vd_muted'), 'source_vd_controls' => $this->opt('source_vd_controls'), 'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'), 'source_overlay' => $this->opt('source_overlay'), 'source_overlay_color' => $this->opt('source_overlay_color'), 'source_overlay_opacity' => $this->opt('source_overlay_opacity'), 'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'), 'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac'), 'source_overlay_gloss' => $this->opt('source_overlay_gloss', ''), 'enable_parallax' => $this->opt('enable_parallax')));
        ?>

			<div class="zn_section_size <?php 
        echo $size;
        ?>
">
				<div class="row zn_columns_container zn_content <?php 
        echo $this->opt('gutter_size', '');
        ?>
" data-droplevel="1">

					<?php 
        ZN()->pagebuilder->zn_render_content($this->data['content']);
        ?>

				</div>
			</div>

            <?php 
        if ($bottom_mask != 'none') {
            WpkPageHelper::zn_bottommask_markup($bottom_mask, $this->opt('hm_header_bmasks_bg', ''));
        }
        ?>
		</section>
	<?php 
    }