194 lines
8.8 KiB
HTML
194 lines
8.8 KiB
HTML
|
{if $slider !=''}
|
||
|
|
|
||
|
|
<div id="slide1">
|
||
|
|
{foreach from=$videos_06_da item=video_06_da}
|
||
|
|
<div class="col-md-2 text-center nopadding">
|
||
|
|
<div class="col-md-11 text-center nopadding">
|
||
|
|
<a href="{videoLink vdetails=$video_06_da}" title="{$video_06_da.title}">
|
||
|
|
<img class="cb_img_thum" src="{getThumb vdetails=$video_06_da}" width="135" height="75" {ANCHOR place="video_thumb" data=$video_06_da} />
|
||
|
|
<div class="cbHomeVidTitle cbHomeVidTitle_slid-title">{$video_06_da.title|truncate:10}</div>
|
||
|
|
</a>
|
||
|
|
<div class="cbHomeVidDuration cbHomeVidDuration_slide">
|
||
|
|
{$video_06_da.duration|number_format}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/foreach}
|
||
|
|
</div>
|
||
|
|
<div class="nxt-pre">
|
||
|
|
<a href="#" class="circle" id="slide_prev1">
|
||
|
|
<span class="glyphicon glyphicon-chevron-left"></span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="circle" id="slide_next1">
|
||
|
|
<span class="glyphicon glyphicon-chevron-right"></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
{if $slider2!=''}
|
||
|
|
<script>
|
||
|
|
jssor_slider1_starter = function (containerId) {
|
||
|
|
var options = {
|
||
|
|
$AutoPlay: true,
|
||
|
|
//[Optional] Whether to auto play, default value is false
|
||
|
|
|
||
|
|
$AutoPlaySteps: 3,
|
||
|
|
//[Optional] Steps for each navigation
|
||
|
|
|
||
|
|
$AutoPlayInterval: 4000,
|
||
|
|
//[Optional] Interval (in milliseconds)
|
||
|
|
|
||
|
|
$PauseOnHover: 0,
|
||
|
|
// [Optional] Whether to pause when mouse over,
|
||
|
|
// 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device
|
||
|
|
|
||
|
|
$ArrowKeyNavigation: true,
|
||
|
|
//[Optional] Allows keyboard (arrow key) navigationdefault value is false
|
||
|
|
|
||
|
|
$SlideDuration: 300,
|
||
|
|
//[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
|
||
|
|
|
||
|
|
$MinDragOffsetToSlide: 20,
|
||
|
|
//[Optional] Minimum drag offset to trigger slide , default value is 20
|
||
|
|
|
||
|
|
$SlideWidth: 235,
|
||
|
|
//[Optional] Width of every slide in pixels, default value is width of 'slides' container
|
||
|
|
//$SlideHeight: 150,
|
||
|
|
//[Optional] Height of every slide in pixels, default value is height of 'slides' container
|
||
|
|
|
||
|
|
$SlideSpacing: 8,
|
||
|
|
//[Optional] Space between each slide in pixels, default value is 0
|
||
|
|
|
||
|
|
$DisplayPieces: 4,
|
||
|
|
//[Optional] Number of pieces to display
|
||
|
|
//(the slideshow would be disabled if the value is set to greater than 1)
|
||
|
|
// the default value is 1
|
||
|
|
|
||
|
|
$ParkingPosition: 0,
|
||
|
|
//[Optional] The offset position to park slide
|
||
|
|
//(this options applys only when slideshow disabled), default value is 0.
|
||
|
|
|
||
|
|
$UISearchMode: 1,
|
||
|
|
// [Optional] The way (0 parellel, 1 recursive, default value is 1)
|
||
|
|
// to search UI components
|
||
|
|
// (slides container, loading screen, navigator container,
|
||
|
|
// direction navigator container, thumbnail navigator container etc).
|
||
|
|
|
||
|
|
$PlayOrientation: 1,
|
||
|
|
// [Optional] Orientation to play slide
|
||
|
|
// (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
|
||
|
|
|
||
|
|
$DragOrientation: 1,
|
||
|
|
// [Optional] Orientation to drag slide,
|
||
|
|
// 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1
|
||
|
|
// (Note that the $DragOrientation should be the same as $PlayOrientation
|
||
|
|
// when $DisplayPieces is greater than 1, or parking position is not 0)
|
||
|
|
|
||
|
|
$NavigatorOptions: {
|
||
|
|
//[Optional] Options to specify and enable navigator or not
|
||
|
|
$Class: $JssorNavigator$,
|
||
|
|
//[Required] Class to create navigator instance
|
||
|
|
$ChanceToShow: 2,
|
||
|
|
//[Required] 0 Never, 1 Mouse Over, 2 Always
|
||
|
|
$AutoCenter: 0,
|
||
|
|
// [Optional] Auto center navigator in parent container,
|
||
|
|
// 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
|
||
|
|
|
||
|
|
$Steps: 1,
|
||
|
|
//[Optional] Steps to go for each navigation request, default value is 1
|
||
|
|
|
||
|
|
$Lanes: 1,
|
||
|
|
//[Optional] Specify lanes to arrange items, default value is 1
|
||
|
|
|
||
|
|
$SpacingX: 0,
|
||
|
|
//[Optional] Horizontal space between each item in pixel, default value is 0
|
||
|
|
|
||
|
|
$SpacingY: 0,
|
||
|
|
//[Optional] Vertical space between each item in pixel, default value is 0
|
||
|
|
|
||
|
|
$Orientation: 1
|
||
|
|
//[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
|
||
|
|
},
|
||
|
|
|
||
|
|
$DirectionNavigatorOptions: {
|
||
|
|
$Class: $JssorDirectionNavigator$,
|
||
|
|
//[Requried] Class to create direction navigator instance
|
||
|
|
$ChanceToShow: 1,
|
||
|
|
//[Required] 0 Never, 1 Mouse Over, 2 Always
|
||
|
|
$AutoCenter: 2,
|
||
|
|
// [Optional] Auto center navigator in parent container,
|
||
|
|
// 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
|
||
|
|
$Steps: 3
|
||
|
|
//[Optional] Steps to go for each navigation request, default value is 1
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var jssor_slider1 = new $JssorSlider$(containerId, options);
|
||
|
|
|
||
|
|
//responsive code begin
|
||
|
|
//you can remove responsive code if you don't want the slider scales while window resizes
|
||
|
|
function ScaleSlider() {
|
||
|
|
var bodyWidth = document.body.clientWidth;
|
||
|
|
if (bodyWidth)
|
||
|
|
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 725));
|
||
|
|
else
|
||
|
|
window.setTimeout(ScaleSlider, 30);
|
||
|
|
}
|
||
|
|
|
||
|
|
ScaleSlider();
|
||
|
|
$JssorUtils$.$AddEvent(window, "load", ScaleSlider);
|
||
|
|
|
||
|
|
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
|
||
|
|
$JssorUtils$.$OnWindowResize(window, ScaleSlider);
|
||
|
|
}
|
||
|
|
//responsive code end
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<div id="slider1_container" >
|
||
|
|
|
||
|
|
<!-- Loading Screen -->
|
||
|
|
<div u="loading" >
|
||
|
|
<div style="filter: alpha(opacity=70); opacity:0.7; display: block; background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
|
||
|
|
</div>
|
||
|
|
<div style="display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%; height:100%;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slides Container -->
|
||
|
|
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 725px; height: 120px; overflow: hidden;">
|
||
|
|
{foreach from=$videos_06_da item=video_06_da}
|
||
|
|
<div class="col-md-12 text-center nopadding">
|
||
|
|
<a href="{videoLink vdetails=$video_06_da}" title="{$video_06_da.title}">
|
||
|
|
<img src="{getThumb vdetails=$video_06_da}" width="240" height="120" style="border:1px solid #CCC;" {ANCHOR place="video_thumb" data=$video_06_da} />
|
||
|
|
<div class="cbHomeVidTitle">{$video_06_da.title|truncate:10}</div>
|
||
|
|
</a>
|
||
|
|
<div class="cbHomeVidDuration">
|
||
|
|
{$video_06_da.duration|number_format}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/foreach}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- navigator container -->
|
||
|
|
<div u="navigator" class="jssorn03" style="position: absolute; bottom: -25px; left: 50%;">
|
||
|
|
<!-- navigator item prototype -->
|
||
|
|
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:#000; font-size:12px;">
|
||
|
|
<NumberTemplate></NumberTemplate>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Navigator Skin End -->
|
||
|
|
|
||
|
|
<!-- Arrow Left -->
|
||
|
|
<span u="arrowleft" class="jssord03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span>
|
||
|
|
<!-- Arrow Right -->
|
||
|
|
<span u="arrowright" class="jssord03r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span>
|
||
|
|
|
||
|
|
<!-- Direction Navigator Skin End -->
|
||
|
|
<a style="display: none" href="http://www.jssor.com">jQuery Image Slider</a>
|
||
|
|
<!-- Trigger -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
jssor_slider1_starter('slider1_container');
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
{/if}
|