I am playing with JSSOR slider, it works perfect in fullwidth modal until we used GoTo() method to go to the specifed slide. For example, when slideshow initialised at slide (0) (no GoTo()), ScaleSlider() works. But when we tryin to force show slide (22), slider is showing within default boundaries (960x640). Maybe this is due to the use of LazyLoad ()? But by default (without GoTo()) it works fine with LazyLoad.
I use almost everything by default, no changes in the main code, even in options, only added strings
var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);
after jssor container to force GoTo() method. BTW, The method works fine.
...
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jssor.slider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: 0,
$Idle: 2000,
$SlideEasing: $Jease$.$InOutSine,
$DragOrientation: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
jssor_1_slider.$Elmt.style.margin = "";
var MAX_WIDTH = 10000;
var MAX_HEIGHT = 10000;
var MAX_BLEEDING = 0.1;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var originalWidth = jssor_1_slider.$OriginalWidth();
var originalHeight = jssor_1_slider.$OriginalHeight();
var containerHeight = containerElement.clientHeight || originalHeight;
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
var expectedHeight = Math.min(MAX_HEIGHT || containerHeight, containerHeight);
jssor_1_slider.$ScaleSize(expectedWidth, expectedHeight, MAX_BLEEDING);
jssor_1_slider.$Elmt.style.top = ((containerHeight - expectedHeight) / 2) + "px";
jssor_1_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 2) + "px";
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
function OnOrientationChange() {
ScaleSlider();
window.setTimeout(ScaleSlider, 800);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", OnOrientationChange);
});
</script>
<style>
html, body {
position:absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.jssorb064 {position:absolute;}
.jssorb064 .i {position:absolute;cursor:pointer;}
.jssorb064 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
.jssorb064 .i:hover .b {fill-opacity:.8;}
.jssorb064 .iav .b {fill:#ffe200;fill-opacity:1;stroke:#ffaa00;stroke-opacity:.7;stroke-width:2000;}
.jssorb064 .iav:hover .b {fill-opacity:.6;}
.jssorb064 .i.idn {opacity:.3;}
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
</style>
<div style="position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;">
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:960px;height:640px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;margin:0 auto; width:960px; height:640px; overflow:hidden;">
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123946_20.jpg">
</div>
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123946_19.jpg">
</div>
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123945_18.jpg">
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
</div>
</div>
</div>
<script>
var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);
</script>
...
for some reason, the var jssor_slider_go = new $JssorSlider$("jssor_1");, initializes in delay mode. That's to say, `jssor_slider_go.$GoTo(22);' can't work before initialiation of jssor slider.
Use one of the following ways as workaround,
var jssor_1_options = { $StartIndex: 22 };
var jssor_slider_go = new $JssorSlider$("jssor_1", jssor_1_options);
use setTimeout to run jssor_slider_go.$GoTo(22);