...
), \r\nwhen option $ThumbnailNavigatorOptions.$AutoCenter set to 0, it should be specified in pixel (like
)");
// }
// }
//});
$Jssor$.$CssWidth(_SlidesContainer, slidesContainerWidth);
$Jssor$.$CssHeight(_SlidesContainer, slidesContainerHeight);
var slideItemElmts = [];
$Jssor$.$Each(items, function (item, index) {
var navigationItem = new NavigationItem(item, index);
var navigationItemWrapper = navigationItem.$Wrapper;
var columnIndex = Math.floor(index / _Lanes);
var laneIndex = index % _Lanes;
$Jssor$.$CssLeft(navigationItemWrapper, (_PrototypeWidth + _SpacingX) * laneIndex * (1 - horizontal));
$Jssor$.$CssTop(navigationItemWrapper, (_PrototypeHeight + _SpacingY) * laneIndex * horizontal);
if (!slideItemElmts[columnIndex]) {
slideItemElmts[columnIndex] = $Jssor$.$CreateDiv();
$Jssor$.$AppendChild(_SlidesContainer, slideItemElmts[columnIndex]);
}
$Jssor$.$AppendChild(slideItemElmts[columnIndex], navigationItemWrapper);
_NavigationItems.push(navigationItem);
});
var thumbnailSliderOptions = $Jssor$.$Extend({
$HWA: false,
$AutoPlay: false,
$NaviQuitDrag: false,
$SlideWidth: slideWidth,
$SlideHeight: slideHeight,
$SlideSpacing: _SpacingX * horizontal + _SpacingY * (1 - horizontal),
$MinDragOffsetToSlide: 12,
$SlideDuration: 200,
$PauseOnHover: 1,
$PlayOrientation: _Options.$Orientation,
$DragOrientation: _Options.$DisableDrag ? 0 : _Options.$Orientation
}, _Options);
_Slider = new $JssorSlider$(elmt, thumbnailSliderOptions);
_Initialized = true;
}
//_Self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
};
//JssorThumbnailNavigator Constructor
{
_Self.$Options = _Options = $Jssor$.$Extend({
$SpacingX: 3,
$SpacingY: 3,
$DisplayPieces: 1,
$Orientation: 1,
$AutoCenter: 3,
$ActionMode: 1
}, options);
//going to use $Rows instead of $Lanes
if (_Options.$Rows != undefined)
_Options.$Lanes = _Options.$Rows;
//Sodo statement for development time intellisence only
$JssorDebug$.$Execute(function () {
_Options = $Jssor$.$Extend({
$Lanes: undefined,
$Width: undefined,
$Height: undefined
}, _Options);
});
_Width = $Jssor$.$CssWidth(elmt);
_Height = $Jssor$.$CssHeight(elmt);
$JssorDebug$.$Execute(function () {
if (!_Width)
$JssorDebug$.$Fail("width of 'thumbnavigator' container not specified.");
if (!_Height)
$JssorDebug$.$Fail("height of 'thumbnavigator' container not specified.");
});
_SlidesContainer = $Jssor$.$FindChild(elmt, "slides", true);
_ThumbnailPrototype = $Jssor$.$FindChild(_SlidesContainer, "prototype");
$JssorDebug$.$Execute(function () {
if (!_ThumbnailPrototype)
$JssorDebug$.$Fail("prototype of 'thumbnavigator' not defined.");
});
_PrototypeWidth = $Jssor$.$CssWidth(_ThumbnailPrototype);
_PrototypeHeight = $Jssor$.$CssHeight(_ThumbnailPrototype);
$Jssor$.$RemoveElement(_ThumbnailPrototype, _SlidesContainer);
_Lanes = _Options.$Lanes || 1;
_SpacingX = _Options.$SpacingX;
_SpacingY = _Options.$SpacingY;
_DisplayPieces = _Options.$DisplayPieces;
if (_Options.$Scale == false) {
$Jssor$.$Attribute(elmt, "noscale", true);
}
}
};
//$JssorCaptionSliderBase$
function $JssorCaptionSliderBase$() {
$JssorAnimator$.call(this, 0, 0);
this.$Revert = $Jssor$.$EmptyFunction;
}
var $JssorCaptionSlider$ = window.$JssorCaptionSlider$ = function (container, captionSlideOptions, playIn) {
$JssorDebug$.$Execute(function () {
if (!captionSlideOptions.$CaptionTransitions) {
$JssorDebug$.$Error("'$CaptionSliderOptions' option error, '$CaptionSliderOptions.$CaptionTransitions' not specified.");
}
});
var _Self = this;
var _ImmediateOutCaptionHanger;
var _PlayMode = playIn ? captionSlideOptions.$PlayInMode : captionSlideOptions.$PlayOutMode;
var _CaptionTransitions = captionSlideOptions.$CaptionTransitions;
var _CaptionTuningFetcher = { $Transition: "t", $Delay: "d", $Duration: "du", x: "x", y: "y", $Rotate: "r", $Zoom: "z", $Opacity: "f", $BeginTime: "b" };
var _CaptionTuningTransfer = {
$Default: function (value, tuningValue) {
if (!isNaN(tuningValue.$Value))
value = tuningValue.$Value;
else
value *= tuningValue.$Percent;
return value;
},
$Opacity: function (value, tuningValue) {
return this.$Default(value - 1, tuningValue);
}
};
_CaptionTuningTransfer.$Zoom = _CaptionTuningTransfer.$Opacity;
$JssorAnimator$.call(_Self, 0, 0);
function GetCaptionItems(element, level) {
var itemsToPlay = [];
var lastTransitionName;
var namedTransitions = [];
var namedTransitionOrders = [];
function FetchRawTransition(captionElmt, index) {
var rawTransition = {};
$Jssor$.$Each(_CaptionTuningFetcher, function (fetchAttribute, fetchProperty) {
var attributeValue = $Jssor$.$AttributeEx(captionElmt, fetchAttribute + (index || ""));
if (attributeValue) {
var propertyValue = {};
if (fetchAttribute == "t") {
propertyValue.$Value = attributeValue;
}
else if (attributeValue.indexOf("%") + 1)
propertyValue.$Percent = $Jssor$.$ParseFloat(attributeValue) / 100;
else
propertyValue.$Value = $Jssor$.$ParseFloat(attributeValue);
rawTransition[fetchProperty] = propertyValue;
}
});
return rawTransition;
}
function GetRandomTransition() {
return _CaptionTransitions[Math.floor(Math.random() * _CaptionTransitions.length)];
}
function EvaluateCaptionTransition(transitionName) {
var transition;
if (transitionName == "*") {
transition = GetRandomTransition();
}
else if (transitionName) {
//indexed transition allowed, just the same as named transition
var tempTransition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
if ($Jssor$.$IsArray(tempTransition)) {
if (transitionName != lastTransitionName) {
lastTransitionName = transitionName;
namedTransitionOrders[transitionName] = 0;
namedTransitions[transitionName] = tempTransition[Math.floor(Math.random() * tempTransition.length)];
}
else {
namedTransitionOrders[transitionName]++;
}
tempTransition = namedTransitions[transitionName];
if ($Jssor$.$IsArray(tempTransition)) {
tempTransition = tempTransition.length && tempTransition[namedTransitionOrders[transitionName] % tempTransition.length];
if ($Jssor$.$IsArray(tempTransition)) {
//got transition from array level 3, random for all captions
tempTransition = tempTransition[Math.floor(Math.random() * tempTransition.length)];
}
//else {
// //got transition from array level 2, in sequence for all adjacent captions with same name specified
// transition = tempTransition;
//}
}
//else {
// //got transition from array level 1, random but same for all adjacent captions with same name specified
// transition = tempTransition;
//}
}
//else {
// //got transition directly from a simple transition object
// transition = tempTransition;
//}
transition = tempTransition;
if ($Jssor$.$IsString(transition))
transition = EvaluateCaptionTransition(transition);
}
return transition;
}
var captionElmts = $Jssor$.$Children(element);
$Jssor$.$Each(captionElmts, function (captionElmt, i) {
var transitionsWithTuning = [];
transitionsWithTuning.$Elmt = captionElmt;
var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
$Jssor$.$Each(playIn ? [0, 3] : [2], function (j, k) {
if (isCaption) {
var transition;
var rawTransition;
if (j != 2 || !$Jssor$.$AttributeEx(captionElmt, "t3")) {
rawTransition = FetchRawTransition(captionElmt, j);
if (j == 2 && !rawTransition.$Transition) {
rawTransition.$Delay = rawTransition.$Delay || { $Value: 0 };
rawTransition = $Jssor$.$Extend(FetchRawTransition(captionElmt, 0), rawTransition);
}
}
if (rawTransition && rawTransition.$Transition) {
transition = EvaluateCaptionTransition(rawTransition.$Transition.$Value);
if (transition) {
//var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0, $ScaleHorizontal: 1, $ScaleVertical: 1 }, transition);
var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0 }, transition);
$Jssor$.$Each(rawTransition, function (rawPropertyValue, propertyName) {
var tuningPropertyValue = (_CaptionTuningTransfer[propertyName] || _CaptionTuningTransfer.$Default).apply(_CaptionTuningTransfer, [transitionWithTuning[propertyName], rawTransition[propertyName]]);
if (!isNaN(tuningPropertyValue))
transitionWithTuning[propertyName] = tuningPropertyValue;
});
if (!k) {
if (rawTransition.$BeginTime)
transitionWithTuning.$BeginTime = rawTransition.$BeginTime.$Value || 0;
else if ((_PlayMode) & 2)
transitionWithTuning.$BeginTime = 0;
}
}
}
transitionsWithTuning.push(transitionWithTuning);
}
if ((level % 2) && !k) {
transitionsWithTuning.$Children = GetCaptionItems(captionElmt, level + 1);
}
});
itemsToPlay.push(transitionsWithTuning);
});
return itemsToPlay;
}
function CreateAnimator(item, transition, immediateOut) {
var animatorOptions = {
$Easing: transition.$Easing,
$Round: transition.$Round,
$During: transition.$During,
$Reverse: playIn && !immediateOut
};
$JssorDebug$.$Execute(function () {
animatorOptions.$CaptionAnimator = true;
});
var captionItem = item;
var captionParent = $Jssor$.$ParentNode(item);
var captionItemWidth = $Jssor$.$CssWidth(captionItem);
var captionItemHeight = $Jssor$.$CssHeight(captionItem);
var captionParentWidth = $Jssor$.$CssWidth(captionParent);
var captionParentHeight = $Jssor$.$CssHeight(captionParent);
var fromStyles = {};
var difStyles = {};
var scaleClip = transition.$ScaleClip || 1;
//Opacity
if (transition.$Opacity) {
difStyles.$Opacity = 1 - transition.$Opacity;
}
animatorOptions.$OriginalWidth = captionItemWidth;
animatorOptions.$OriginalHeight = captionItemHeight;
//Transform
if (transition.$Zoom || transition.$Rotate) {
difStyles.$Zoom = (transition.$Zoom || 2) - 2;
if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera()) {
difStyles.$Zoom = Math.min(difStyles.$Zoom, 1);
}
fromStyles.$Zoom = 1;
var rotate = transition.$Rotate || 0;
difStyles.$Rotate = rotate * 360;
fromStyles.$Rotate = 0;
}
//Clip
else if (transition.$Clip) {
var fromStyleClip = { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 };
var toStyleClip = $Jssor$.$Extend({}, fromStyleClip);
var blockOffset = toStyleClip.$Offset = {};
var topBenchmark = transition.$Clip & 4;
var bottomBenchmark = transition.$Clip & 8;
var leftBenchmark = transition.$Clip & 1;
var rightBenchmark = transition.$Clip & 2;
if (topBenchmark && bottomBenchmark) {
blockOffset.$Top = captionItemHeight / 2 * scaleClip;
blockOffset.$Bottom = -blockOffset.$Top;
}
else if (topBenchmark)
blockOffset.$Bottom = -captionItemHeight * scaleClip;
else if (bottomBenchmark)
blockOffset.$Top = captionItemHeight * scaleClip;
if (leftBenchmark && rightBenchmark) {
blockOffset.$Left = captionItemWidth / 2 * scaleClip;
blockOffset.$Right = -blockOffset.$Left;
}
else if (leftBenchmark)
blockOffset.$Right = -captionItemWidth * scaleClip;
else if (rightBenchmark)
blockOffset.$Left = captionItemWidth * scaleClip;
animatorOptions.$Move = transition.$Move;
difStyles.$Clip = toStyleClip;
fromStyles.$Clip = fromStyleClip;
}
//Fly
{
var toLeft = 0;
var toTop = 0;
if (transition.x)
toLeft -= captionParentWidth * transition.x;
if (transition.y)
toTop -= captionParentHeight * transition.y;
if (toLeft || toTop || animatorOptions.$Move) {
difStyles.$Left = toLeft;
difStyles.$Top = toTop;
}
}
//duration
var duration = transition.$Duration;
fromStyles = $Jssor$.$Extend(fromStyles, $Jssor$.$GetStyles(captionItem, difStyles));
animatorOptions.$Setter = $Jssor$.$StyleSetterEx();
return new $JssorAnimator$(transition.$Delay, duration, animatorOptions, captionItem, fromStyles, difStyles);
}
function CreateAnimators(streamLineLength, captionItems) {
$Jssor$.$Each(captionItems, function (captionItem, i) {
$JssorDebug$.$Execute(function () {
if (captionItem.length) {
var top = $Jssor$.$CssTop(captionItem.$Elmt);
var left = $Jssor$.$CssLeft(captionItem.$Elmt);
var width = $Jssor$.$CssWidth(captionItem.$Elmt);
var height = $Jssor$.$CssHeight(captionItem.$Elmt);
var error = null;
if (isNaN(top))
error = "Style 'top' for caption not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
else if (isNaN(left))
error = "Style 'left' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
else if (isNaN(width))
error = "Style 'width' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
else if (isNaN(height))
error = "Style 'height' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
if (error)
$JssorDebug$.$Error("Caption " + (i + 1) + " definition error, \r\n" + error + "\r\n" + captionItem.$Elmt.outerHTML);
}
});
var animator;
var captionElmt = captionItem.$Elmt;
var transition = captionItem[0];
var transition3 = captionItem[1];
if (transition) {
animator = CreateAnimator(captionElmt, transition);
streamLineLength = animator.$Locate(transition.$BeginTime == undefined ? streamLineLength : transition.$BeginTime, 1);
}
streamLineLength = CreateAnimators(streamLineLength, captionItem.$Children);
if (transition3) {
var animator3 = CreateAnimator(captionElmt, transition3, 1);
animator3.$Locate(streamLineLength, 1);
_Self.$Combine(animator3);
_ImmediateOutCaptionHanger.$Combine(animator3);
}
if (animator)
_Self.$Combine(animator);
});
return streamLineLength;
}
_Self.$Revert = function () {
_Self.$GoToPosition(_Self.$GetPosition_OuterEnd() * (playIn || 0));
_ImmediateOutCaptionHanger.$GoToPosition(0);
};
//Constructor
{
_ImmediateOutCaptionHanger = new $JssorAnimator$(0, 0);
CreateAnimators(0, _PlayMode ? GetCaptionItems(container, 1) : []);
}
};
var $JssorCaptionSlideo$ = function (container, captionSlideoOptions, playIn) {
$JssorDebug$.$Execute(function () {
if (!captionSlideoOptions.$CaptionTransitions) {
$JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' not specified.");
}
else if (!$Jssor$.$IsArray(captionSlideoOptions.$CaptionTransitions)) {
$JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' is not an array.");
}
});
var _This = this;
var _Easings;
var _TransitionConverter = {};
var _CaptionTransitions = captionSlideoOptions.$CaptionTransitions;
$JssorAnimator$.call(_This, 0, 0);
function ConvertTransition(transition, isEasing) {
$Jssor$.$Each(transition, function (property, name) {
var performName = _TransitionConverter[name];
if (performName) {
if (isEasing || name == "e") {
if ($Jssor$.$IsNumeric(property)) {
property = _Easings[property];
}
else if ($Jssor$.$IsPlainObject(property)) {
ConvertTransition(property, true);
}
}
transition[performName] = property;
delete transition[name];
}
});
}
function GetCaptionItems(element, level) {
var itemsToPlay = [];
var captionElmts = $Jssor$.$Children(element);
$Jssor$.$Each(captionElmts, function (captionElmt, i) {
var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
if (isCaption) {
var transitionName = $Jssor$.$AttributeEx(captionElmt, "t");
var transition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
var transitionName2 = $Jssor$.$AttributeEx(captionElmt, "t2");
var transition2 = _CaptionTransitions[$Jssor$.$ParseInt(transitionName2)] || _CaptionTransitions[transitionName2];
var itemToPlay = { $Elmt: captionElmt, $Transition: transition, $Transition2: transition2 };
if (level < 3) {
itemsToPlay.concat(GetCaptionItems(captionElmt, level + 1));
}
itemsToPlay.push(itemToPlay);
}
});
return itemsToPlay;
}
function CreateAnimator(captionElmt, transitions, lastStyles, forIn) {
$Jssor$.$Each(transitions, function (transition) {
ConvertTransition(transition);
var animatorOptions = {
$Easing: transition.$Easing,
$Round: transition.$Round,
$During: transition.$During,
$Setter: $Jssor$.$StyleSetterEx()
};
var fromStyles = $Jssor$.$Extend($Jssor$.$GetStyles(captionItem, transition), lastStyles);
var animator = new $JssorAnimator$(transition.b || 0, transition.d, animatorOptions, captionElmt, fromStyles, transition);
!forIn == !playIn && _This.$Combine(animator);
var castOptions;
lastStyles = $Jssor$.$Extend(lastStyles, $Jssor$.$Cast(fromStyles, transition, 1, animatorOptions.$Easing, animatorOptions.$During, animatorOptions.$Round, animatorOptions, castOptions));
});
return lastStyles;
}
function CreateAnimators(captionItems) {
$Jssor$.$Each(captionItems, function (captionItem, i) {
$JssorDebug$.$Execute(function () {
if (captionItem.length) {
var top = $Jssor$.$CssTop(captionItem.$Elmt);
var left = $Jssor$.$CssLeft(captionItem.$Elmt);
var width = $Jssor$.$CssWidth(captionItem.$Elmt);
var height = $Jssor$.$CssHeight(captionItem.$Elmt);
var error = null;
if (isNaN(top))
error = "style 'top' not specified";
else if (isNaN(left))
error = "style 'left' not specified";
else if (isNaN(width))
error = "style 'width' not specified";
else if (isNaN(height))
error = "style 'height' not specified";
if (error)
throw new Error("Caption " + (i + 1) + " definition error, " + error + ".\r\n" + captionItem.$Elmt.outerHTML);
}
});
var captionElmt = captionItem.$Elmt;
var captionItemWidth = $Jssor$.$CssWidth(captionItem);
var captionItemHeight = $Jssor$.$CssHeight(captionItem);
var captionParentWidth = $Jssor$.$CssWidth(captionParent);
var captionParentHeight = $Jssor$.$CssHeight(captionParent);
var lastStyles = { $Zoom: 1, $Rotate: 0, $Clip: { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 } };
lastStyles = CreateAnimator(captionElmt, captionItem.$Transition, lastStyles, true);
CreateAnimator(captionElmt, captionItem.$Transition2, lastStyles, false);
});
}
_This.$Revert = function () {
_This.$GoToPosition(-1, true);
}
//Constructor
{
_Easings = [
$JssorEasing$.$EaseSwing,
$JssorEasing$.$EaseLinear,
$JssorEasing$.$EaseInQuad,
$JssorEasing$.$EaseOutQuad,
$JssorEasing$.$EaseInOutQuad,
$JssorEasing$.$EaseInCubic,
$JssorEasing$.$EaseOutCubic,
$JssorEasing$.$EaseInOutCubic,
$JssorEasing$.$EaseInQuart,
$JssorEasing$.$EaseOutQuart,
$JssorEasing$.$EaseInOutQuart,
$JssorEasing$.$EaseInQuint,
$JssorEasing$.$EaseOutQuint,
$JssorEasing$.$EaseInOutQuint,
$JssorEasing$.$EaseInSine,
$JssorEasing$.$EaseOutSine,
$JssorEasing$.$EaseInOutSine,
$JssorEasing$.$EaseInExpo,
$JssorEasing$.$EaseOutExpo,
$JssorEasing$.$EaseInOutExpo,
$JssorEasing$.$EaseInCirc,
$JssorEasing$.$EaseOutCirc,
$JssorEasing$.$EaseInOutCirc,
$JssorEasing$.$EaseInElastic,
$JssorEasing$.$EaseOutElastic,
$JssorEasing$.$EaseInOutElastic,
$JssorEasing$.$EaseInBack,
$JssorEasing$.$EaseOutBack,
$JssorEasing$.$EaseInOutBack,
$JssorEasing$.$EaseInBounce,
$JssorEasing$.$EaseOutBounce,
$JssorEasing$.$EaseInOutBounce//,
//$JssorEasing$.$EaseGoBack,
//$JssorEasing$.$EaseInWave,
//$JssorEasing$.$EaseOutWave,
//$JssorEasing$.$EaseOutJump,
//$JssorEasing$.$EaseInJump
];
var translater = {
$Top: "y", //top
$Left: "x", //left
$Bottom: "m", //bottom
$Right: "t", //right
$Zoom: "s", //zoom/scale
$Rotate: "r", //rotate
$Opacity: "o", //opacity
$Easing: "e", //easing
$ZIndex: "i", //zindex
$Round: "rd", //round
$During: "du", //during
$Duration: "d"//, //duration
//$Begin: "b"
};
$Jssor$.$Each(translater, function (prop, newProp) {
_TransitionConverter[prop] = newProp;
});
CreateAnimators(GetCaptionItems(container, 1));
}
};
//Event Table
//$EVT_CLICK = 21; function(slideIndex[, event])
//$EVT_DRAG_START = 22; function(position[, virtualPosition, event])
//$EVT_DRAG_END = 23; function(position, startPosition[, virtualPosition, virtualStartPosition, event])
//$EVT_SWIPE_START = 24; function(position[, virtualPosition])
//$EVT_SWIPE_END = 25; function(position[, virtualPosition])
//$EVT_LOAD_START = 26; function(slideIndex)
//$EVT_LOAD_END = 27; function(slideIndex)
//$EVT_POSITION_CHANGE = 202; function(position, fromPosition[, virtualPosition, virtualFromPosition])
//$EVT_PARK = 203; function(slideIndex, fromIndex)
//$EVT_PROGRESS_CHANGE = 208; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_STATE_CHANGE = 209; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_ROLLBACK_START = 210; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_ROLLBACK_END = 211; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_SLIDESHOW_START = 206; function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
//$EVT_SLIDESHOW_END = 207; function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
//http://www.jssor.com/development/reference-api.html
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade in R
{$Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade out L
, { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
];
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 500, //[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: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
$DisplayPieces: 1, //[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, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 3, //[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)
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
},
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 10 //[Optional] Vertical space between each item in pixel, default value is 0
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[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
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 0, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$DisableDrag: true //[Optional] Disable drag or not, default value is false
}
};
var jssor_sliderb = new $JssorSlider$("sliderb_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_sliderb.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_sliderb.$ScaleWidth(Math.min(parentWidth, 940));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});