236 lines
13 KiB
Smarty
236 lines
13 KiB
Smarty
{*
|
||
* @Module Name: Leo Slideshow
|
||
* @Website: leotheme.com.com - prestashop template provider
|
||
* @author Leotheme <leotheme@gmail.com>
|
||
* @copyright Leotheme
|
||
*}
|
||
|
||
{assign var="class_group" value="iview-group-`$rand_num`-`$sliderParams.id_leoslideshow_groups`"}
|
||
{if $sliderParams.slider_class == "boxed"}
|
||
<div
|
||
class="layerslider-wrapper{if $sliderParams.group_class} {$sliderParams.group_class|escape:'html':'UTF-8'}{/if}{if $sliderParams.md_width|intval} col-md-{$sliderParams.md_width|intval}{/if}{if $sliderParams.sm_width} col-sm-{$sliderParams.sm_width|intval}{/if}{if $sliderParams.sm_width} col-xs-{$sliderParams.xs_width|intval}{/if}">
|
||
{/if}
|
||
<div
|
||
class="bannercontainer banner-{$sliderParams.slider_class}{if $sliderParams.group_class} {$sliderParams.group_class|escape:'html':'UTF-8'}{/if}"
|
||
style="padding: {$sliderParams.padding|escape:'html':'UTF-8'};margin: {$sliderParams.margin|escape:'html':'UTF-8'};">
|
||
<div class="iview {$class_group}">
|
||
{if $sliders}
|
||
{foreach from=$sliders item=slider}
|
||
{if $slider.video.active}
|
||
<!-- SLIDE VIDEO BEGIN -->
|
||
<div data-leo_image="{$slider.thumbnail|escape:'html':'UTF-8'}" data-leo_type="video"
|
||
data-leo_transition="strip-right-fade,strip-left-fade"
|
||
data-leo_background="{$slider.background_type|escape:'html':'UTF-8'}" data-autoplay="{$slider.video.videoauto}"
|
||
data-videoid="{$slider.video.videoid|escape:'html':'UTF-8'}">
|
||
|
||
{if $slider.title == 'SliderVideo'}
|
||
<video autoplay muted loop id="heroMyVideo">
|
||
<source src="/videos/Kalsport_Video_home_UPDATE.mp4" type="video/mp4">
|
||
</video>
|
||
{else}
|
||
<iframe src="{$slider.video.videoURL|escape:'html':'UTF-8'}?title=0&byline=0&portrait=0;api=1"
|
||
width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
|
||
{/if}
|
||
</div>
|
||
<!-- SLIDE VIDEO END -->
|
||
{else}
|
||
<!-- SLIDE IMAGE BEGIN -->
|
||
<div id="slide{$slider.id_slide}"
|
||
class="slide_config {if isset($slider.data_link)&& $slider.data_link}data-link{/if}"
|
||
{if $slider.main_image != ''} data-leo_image="{$slider.main_image|escape:'html':'UTF-8'}" {/if}
|
||
{if $slider.background_color != ''} data-leo_background_color="{$slider.background_color|escape:'html':'UTF-8'}"
|
||
{/if} {if $slider.data_link != ''} data-link="{$slider.data_link|escape:'html':'UTF-8'}" {/if}
|
||
{if $slider.data_target != ''} data-target="{$slider.data_target|escape:'html':'UTF-8'}" {/if}
|
||
data-leo_pausetime="{$slider.data_delay|escape:'html':'UTF-8'}"
|
||
data-leo_thumbnail="{$slider.thumbnail|escape:'html':'UTF-8'}"
|
||
data-leo_background="{$slider.background_type|escape:'html':'UTF-8'}" {if $slider.enable_custom_html_bullet}
|
||
data-leo_bullet_description="{$slider.bullet_description}" {* HTML form , no escape necessary *}
|
||
data-leo_bullet_class="{$slider.bullet_class|escape:'html':'UTF-8'}" {/if}>
|
||
|
||
|
||
|
||
{if isset($slider.layersparams)}
|
||
{foreach from=$slider.layersparams item=layer}
|
||
|
||
<div
|
||
class="tp-caption {if $layer.layer_link}data-link{/if}{if $layer.layer_class} {$layer.layer_class|escape:'html':'UTF-8'}{/if}"
|
||
data-x="{$layer.layer_left|escape:'html':'UTF-8'}" data-y="{$layer.layer_top|escape:'html':'UTF-8'}"
|
||
data-transition="{$layer.layer_transition|escape:'html':'UTF-8'}"
|
||
{if $layer.layer_link}onclick="event.stopPropagation();window.open('{$layer.layer_link|escape:'html':'UTF-8'}','{$layer.layer_target|escape:'html':'UTF-8'}');"
|
||
{/if} {if $layer.css}style="{$layer.css|escape:'html':'UTF-8'};" {/if}>
|
||
|
||
{if $layer.layer_type == "text"}
|
||
<!-- LAYER TEXT BEGIN -->
|
||
{$layer.layer_caption|replace:"_ASM_":"&"|replace:"_LEO_BACKSLASH_":"\\"|replace:"_LEO_DOUBLE_QUOTE_":""" nofilter}
|
||
{/if}
|
||
<!-- LAYER TEXT END -->
|
||
|
||
|
||
{if $layer.layer_type == "image"}
|
||
<!-- LAYER IMAGE BEGIN -->
|
||
<img src="{$layer.layer_content|escape:'html':'UTF-8'}" alt="" class="img_disable_drag" />
|
||
{/if}
|
||
<!-- LAYER IMAGE END -->
|
||
|
||
|
||
{if $layer.layer_type == "video"}
|
||
<!-- LAYER VIDEO BEGIN -->
|
||
{if $layer.layer_video_type == "vimeo"}
|
||
<iframe
|
||
src="http://player.vimeo.com/video/{$layer.layer_video_id|escape:'html':'UTF-8'}?wmode=transparent&title=0&byline=0&portrait=0;api=1"
|
||
width="{$layer.layer_video_width|escape:'html':'UTF-8'}"
|
||
height="{$layer.layer_video_height|escape:'html':'UTF-8'}"></iframe>
|
||
{else}
|
||
<iframe src="http://www.youtube.com/embed/{$layer.layer_video_id|escape:'html':'UTF-8'}?wmode=transparent"
|
||
width="{$layer.layer_video_width|escape:'html':'UTF-8'}"
|
||
height="{$layer.layer_video_height|escape:'html':'UTF-8'}"></iframe>
|
||
{/if}
|
||
{/if}
|
||
<!-- LAYER VIDEO END -->
|
||
|
||
|
||
</div>
|
||
{/foreach}
|
||
{/if}
|
||
|
||
</div><!-- SLIDE IMAGE END -->
|
||
{/if}
|
||
|
||
{/foreach}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{if $sliderParams.slider_class == "boxed"}
|
||
</div>
|
||
{/if}
|
||
<script type="text/javascript">
|
||
{if isset($load_from_appagebuilder) AND $load_from_appagebuilder == 1}
|
||
{* Appagebuilder load widget *}
|
||
ap_list_functions.push(function() {
|
||
{else}
|
||
var leoslideshow_list_functions = [];
|
||
leoslideshow_list_functions.push(function() {
|
||
{/if}
|
||
|
||
jQuery(".{$class_group}").iView({
|
||
// COMMON
|
||
pauseTime:{$sliderParams.delay|default:'5000'|intval}, // delay
|
||
startSlide:{$sliderParams.start_with_slide|default:'0'|intval},
|
||
autoAdvance: {$sliderParams.autoAdvance|default:'true'|escape:'html':'UTF-8'}, // enable timer thá»<EFBFBD>i gian auto next slide
|
||
pauseOnHover: {$sliderParams.stop_on_hover|default:'false'|escape:'html':'UTF-8'},
|
||
randomStart: {$sliderParams.shuffle_mode|default:'false'|escape:'html':'UTF-8'}, // Ramdom slide when start
|
||
|
||
// TIMER
|
||
timer: "{$sliderParams.timer|default:'Pie'|escape:'html':'UTF-8'}",
|
||
timerPosition: "{$sliderParams.timerPosition|default:'top-right'|escape:'html':'UTF-8'}", // Top-right, top left ....
|
||
timerX: {$sliderParams.timerX|default:'10'|intval},
|
||
timerY: {$sliderParams.timerY|default:'10'|intval},
|
||
timerOpacity: {$sliderParams.timerOpacity|default:'0.5'|escape:'html':'UTF-8'},
|
||
timerBg: "{$sliderParams.timerBg|default:'#000'|escape:'html':'UTF-8'}",
|
||
timerColor: "{$sliderParams.timerColor|default:'#EEE'|escape:'html':'UTF-8'}",
|
||
timerDiameter: {$sliderParams.timerDiameter|default:'30'|intval},
|
||
timerPadding: {$sliderParams.timerPadding|default:'4'|intval},
|
||
timerStroke: {$sliderParams.timerStroke|default:'3'|intval},
|
||
timerBarStroke: {$sliderParams.timerBarStroke|default:'1'|intval},
|
||
timerBarStrokeColor: "{$sliderParams.timerBarStrokeColor|default:'#EEE'|escape:'html':'UTF-8'}",
|
||
timerBarStrokeStyle: "{$sliderParams.timerBarStrokeStyle|default:'solid'|escape:'html':'UTF-8'}",
|
||
playLabel: "{l s='Play' mod='leoslideshow'}",
|
||
pauseLabel: "{l s='Pause' mod='leoslideshow'}",
|
||
closeLabel: "{l s='Close' mod='leoslideshow'}", // Muli language
|
||
|
||
// NAVIGATOR controlNav
|
||
controlNav: {$sliderParams.controlNav|default:'false'|escape:'html':'UTF-8'}, // true : enable navigate - default:'false'
|
||
keyboardNav: {$sliderParams.keyboardNav|default:'true'|escape:'html':'UTF-8'}, // true : enable keybroad
|
||
controlNavThumbs: {$sliderParams.controlNavThumbs|default:'false'|escape:'html':'UTF-8'}, // true show thumbnail, false show number ( bullet )
|
||
controlNavTooltip: {$sliderParams.controlNavTooltip|default:'true'|escape:'html':'UTF-8'}, // true : hover to bullet show thumnail
|
||
tooltipX: {$sliderParams.tooltipX|default:'5'|escape:'html':'UTF-8'},
|
||
tooltipY: {$sliderParams.tooltipY|default:'-5'|escape:'html':'UTF-8'},
|
||
controlNavHoverOpacity: {$sliderParams.controlNavHoverOpacity|default:'0.6'|escape:'html':'UTF-8'}, // opacity navigator
|
||
|
||
// DIRECTION
|
||
controlNavNextPrev: false, // false dont show direction at navigator
|
||
directionNav: {$sliderParams.directionNav|default:'true'|escape:'html':'UTF-8'}, // true show direction at image ( in this case : enable direction )
|
||
directionNavHoverOpacity: {$sliderParams.directionNavHoverOpacity|default:'0.6'|escape:'html':'UTF-8'}, // direction opacity at image
|
||
nextLabel: "{l s='Next' mod='leoslideshow'}", // Muli language
|
||
previousLabel: "{l s='Previous' mod='leoslideshow'}", // Muli language
|
||
|
||
// ANIMATION
|
||
fx: '{$sliderParams.fx|default:'random'|escape:'html':'UTF-8'}', // Animation
|
||
animationSpeed: {$sliderParams.animationSpeed|default:'500'|escape:'html':'UTF-8'}, // time to change slide
|
||
// strips: {$sliderParams.strips|default:'20'|intval},
|
||
strips: 1, // set value is 1 -> fix animation full background
|
||
blockCols: {$sliderParams.blockCols|default:'10'|intval}, // number of columns
|
||
blockRows: {$sliderParams.blockRows|default:'5'|intval}, // number of rows
|
||
|
||
captionSpeed: {$sliderParams.captionSpeed|default:'500'|intval}, // speed to show caption
|
||
captionOpacity: {$sliderParams.captionOpacity|default:'1'|intval}, // caption opacity
|
||
captionEasing: 'easeInOutSine', // caption transition easing effect, use JQuery Easings effect
|
||
customWidth: {$sliderParams.width|intval},
|
||
customHtmlBullet: {if $slider.enable_custom_html_bullet}true{else}false{/if},
|
||
rtl: {if $sliderParams.rtl}true{else}false{/if},
|
||
height:{if $sliderParams.height}{$sliderParams.height|intval}{else}780{/if},
|
||
timer_show : {$sliderParams.timer_show|intval},
|
||
|
||
//onBeforeChange: function(){}, // Triggers before a slide transition
|
||
// onAfterChange: function(){}, // Triggers after a slide transition
|
||
//onSlideshowEnd: function(){}, // Triggers after all slides have been shown
|
||
//onLastSlide: function(){}, // Triggers when last slide is shown
|
||
//onPause: function(){}, // Triggers when slider has paused
|
||
//onPlay: function(){} // Triggers when slider has played
|
||
|
||
onAfterLoad: function() {
|
||
// THUMBNAIL
|
||
{if $sliderParams.nav_thumbnail_height}
|
||
$('.{$class_group} .iview-controlNav a img').height({$sliderParams.nav_thumbnail_height|intval});
|
||
//$('.{$class_group} .iview-tooltip').height({$sliderParams.nav_thumbnail_height|intval});
|
||
{/if}
|
||
{if $sliderParams.nav_thumbnail_width}
|
||
$('.{$class_group} .iview-controlNav a img').width({$sliderParams.nav_thumbnail_width|intval});
|
||
//$('.{$class_group} .iview-tooltip').width({$sliderParams.nav_thumbnail_width|intval});
|
||
{/if}
|
||
|
||
// BULLET
|
||
{if $sliderParams.nav_thumbnail_height}
|
||
$('.{$class_group} .iview-tooltip div.holder div.container div img').width({$sliderParams.nav_thumbnail_width|intval});
|
||
{/if}
|
||
{if $sliderParams.nav_thumbnail_width}
|
||
$('.{$class_group} .iview-tooltip div.holder div.container div img').height({$sliderParams.nav_thumbnail_height|intval});
|
||
{/if}
|
||
|
||
// Display timer
|
||
{if $sliderParams.timer_show eq 1 or $sliderParams.timer_show eq 2}
|
||
$('.{$class_group} .iview-timer').hide();
|
||
{/if}
|
||
},
|
||
|
||
});
|
||
|
||
$(".img_disable_drag").bind('dragstart', function() {
|
||
return false;
|
||
});
|
||
|
||
|
||
// Fix : Slide link, image cant swipe
|
||
// step 1
|
||
var link_event = 'click';
|
||
|
||
// step 3
|
||
$(".{$class_group} .slide_config").on("click",function(){
|
||
|
||
if (link_event !== 'click') {
|
||
link_event = 'click';
|
||
return;
|
||
}
|
||
|
||
if ($(this).data('link') != undefined && $(this).data('link') != '') {
|
||
window.open($(this).data('link'), $(this).data('target'));
|
||
}
|
||
|
||
});
|
||
|
||
// step 2
|
||
$(".{$class_group} .slide_config").on('swipe',function(){
|
||
link_event = 'swiped'; // do not click event
|
||
});
|
||
});
|
||
</script> |