JSSOR is just wonderful! So the folks who developed this magic tool deserve to be thanked for this very, very much!
My issue: I have a slider where the pictures slide from left to right as default.
Taking this as a basis, I want to create that slider with a different transition. So I used that great JSSOR Transition Builder and created some custom transition.
I copied the code and now I have the question:
Exactly where do I paste that code into?
My guess is, that it must be added to the lines right after the line
var options = {
and before the beginning of the next nested bracket, which for me would be
$CaptionSliderOptions: {
Is that correct or has the new transition code to be pasted to another place?
Any help is greatly apprechiated!
Cheers, Johannes
There are 2 kind of transitions.
'slideshow transition' is slide level transition, it plays from 1 slide to another slide. 'caption transition' caption level transition, it plays caption within a slide.
'slideshow transitions' are specified as an array, e.g. var slideshow_transitions = [ { code1 }, { code2 }, { code3 } ]; See 'examples-jquery\slider-with-slideshow.source.html' example,
<script>
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$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)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$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
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
'caption transitions' are specified as an array, and each transition is specified with name. e.g. var caption_transitions = []; caption_transitions["transition1"] = { code1 }; See 'examples-jquery\slider-with-caption.source.html' example,
<script>
//Reference http://www.jssor.com/development/slider-with-caption-jquery.html
//Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
//Reference http://www.jssor.com/development/tool-caption-transition-viewer.html
jQuery(document).ready(function ($) {
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $Jease$.$InCubic };
_CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $Jease$.$InCubic };
_CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $Jease$.$InCubic };
_CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $Jease$.$InCubic };
_CaptionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $Jease$.$InCubic };
_CaptionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $Jease$.$InCubic };
_CaptionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $Jease$.$InCubic };
_CaptionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $Jease$.$InCubic };
_CaptionTransitions["WAVE|L"] = { $Duration: 1500, $FlyDirection: 5, $Easing: { $Left: $Jease$.$Linear, $Top: $Jease$.$OutWave }, $ScaleVertical: 0.4, $Round: { $Top: 2.5} };
_CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $Jease$.$OutExpo };
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$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)
$CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
$Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
$CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
$PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>