JSSOR is a powerful package for dynamic Slideshows from MIT. Although it can be used to great effect with a minimum of coding, its huge number of features and examples makes it difficult to understand. Furthermore, the site organisation has changed from when I learned to use it in 2015. Before, you could easily download individual examples and learn from them; now, the code is "hidden". However, in our Tutorial folder, you will find the source code for all examples. [Note: these copies are from 2015 but seem to work OK ].
The old site also provided a large number of already coded fun TRANSITIONS and Caption animations. The new site relies on an online Website Builder and Editor system [See the Demos - Skins - Tutorial - ... options on the Home page ]. In my view, this adds to the learning curve.
This is a simple slideshow looping over 3 images - no special effects, captions or navigation. It takes less than 50 lines of code. However, it handles images of various sizes: large ones are scaled to fit the "slide area" and smaller ones are centered.
Part of the code is shown below. It looks very much like the first "standard Format Example" on JSSOR's development page; but our example has added a "trigger" to start the animation and uses a different FillMode (=5) to handle images of various sizes.
In this version, there are clearly two parts to the code. The first half is JavaScript; the second HTML.
In the first part, we start by loading the JSSOR package. Then comes an important function [ jssor_slider1_starter ] that animates the slideshow with a JssorSlider object based on the Options. This function is always called at the end of the page to start the show. We use color to indicate links between important variables: GREEN in this case.
<body> <script type="text/javascript" src="js/jssor.slider.min.js"></script> <script> jssor_slider1_starter = function (containerId) { var options = { $AutoPlay: true, $FillMode: 5, $ArrowKeyNavigation: true, $DragOrientation: 0 }; var jssor_slider1 = new $JssorSlider$(containerId, options); }; </script> <!-- ================================================================ --> <div id="slider1_container" style="position: relative; width: ...; height: ...;"> <!-- Slides Container --> <div u="slides" style="position: absolute; top: 0px; left: 0px; width: ...; height: ...; overflow: hidden; "> <div><img u="image" src="img/1.jpg" /></div> ... more images ... </div> </div> <!-- Trigger --> <script> jssor_slider1_starter('slider1_container'); </script> </body>
In the second half we have a large DIV (id="slider1_container") which contains a second container for the Slides
( <div u="slides" ... ). Each slide is represented by another <div> containing an as well as any captions - if any. In this cas, we just show one slide coded as
All JSSOR demos and examples have the same organization as this simple example:
Jssor has many options, but the 4 used in this example are the only ones we needed for all animations in our TRAM and Vitrine projects. The possible values for these options and their effect is documented by comments in the examples.
In all our examples, the Slider only contains ONE element: the slide viewer; There are no control elements ( such as L and R arrows around it ) outside it. In theses cases, SlideR container is always the same size as the Slide container.
A last thing to note is that JSSOR does not rely on the usual fixed ID or Class identifiers to discover and manage the various elements. Rather it uses a "u" notation, like:
Try demo1.html which is the same as our first example with 3 transitions added. As shown below, this was accomplished by copying:
jssor_slider1_starter = function (containerId) { var _SlideshowTransitions = [ //Rotate in- out+ { $Duration: 1500, $Zoom: 11, $Rotate: 0.5, .... }, //Rotate Axis up overlap { $Duration: 1200, x: 0.25, y: 0.5, $Rotate: -0.1, $Easing: ... }, //Chess Replace TB { $Duration: 1600, x: 1, $Rows: 2, $ChessMode: { $Row: 3 }, ... } ]; var options = { $AutoPlay: true, ... $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: _SlideshowTransitions, $TransitionsOrder: 1, $ShowLink: true }, };
<div><img u="image" src="img/3.jpg"/> <div class="captionTram" style="left:30px;"> Juan Aquino </div> </div>
Movement into the designated spot is done by adding "u=caption" and using a predefined transition "T=...". For example:
<div><img u="image" src="img/3.jpg"/> <div u="caption" t="Z" class="photoID" style="left: 400px; "> <img src="photo/ja.png" /> </div> </div>
In addition, one must add the predefined caption transitions to the options
jssor_slider1_starter = function (containerId) { var _CaptionTransitions = []; _CaptionTransitions["B"] = { $Duration: 900, y: -0.6, ... $Opacity: 2 }; _CaptionTransitions["Z"] = {$Duration:900,$Zoom:1.8,$Easing: ...}; var options = { $AutoPlay: true, ... $CaptionSliderOptions: { $Class: $JssorCaptionSlider$, $CaptionTransitions: _CaptionTransitions, $PlayInMode: 1, $PlayOutMode: 3 } };
demo2.html : shows our usual example with the same dynamic captions as used in our Galleries
Gallery pages with slideshows just concentrate on the SLIDER_CONTAINER part with the list of images and captions.
Ref: http://www.jssor.com