Fullscreen JSSOR切换全屏

嗨，在JSSOR中我唯一想做的就是切换全屏画廊。我正在使用JSSOR的图像库版本。我想在右上角有一个全屏按钮，它可以切换全屏（不是全屏，而是最大化）视图，我可以在那里移动图像

我没有在官方jssor页面或任何其他线程上看到任何教程。 我想在右上角有这样的东西。有什么帮助吗

var选项={$AutoPlay:1}；
var jssor_1_slider_element=document.getElementById（“jssor_1”）；
var jssor_1_slider_parent_element=jssor_1_slider_element.parentNode；
var jssor_1_slider=新的$JssorSlider$（jssor_1_slider_元素，选项）；
var isFullscreenMode=false；
var全屏幕元素；
var全屏切换按钮元素=document.getElementById（“全屏切换按钮”）；
函数切换全屏（）{
isFullscreenMode=！isFullscreenMode；
如果（IsFullScreen模式）{
//创建全屏div，将jssor滑块移动到div中
fullscreenElement=document.createElement（“div”）；
fullscreenElement.style.position=“固定”；
fullscreenElement.style.top=0；
fullscreenElement.style.left=0；
fullscreenElement.style.width=“100%”；
fullscreenElement.style.height=“100%”；
fullscreenElement.style.zIndex=1000000；
document.body.appendChild（fullscreenElement）；
var fullscreenRect=fullscreenElement.getBoundingClientRect（）；
变量宽度=fullscreenRect.right-fullscreenRect.left；
变量高度=fullscreenRect.bottom-fullscreenRect.top；
appendChild（jssor_1_滑块_元素）；
jssor_滑块。$ScaleSize（宽度、高度）；
}
else if（fullscreenElement）{
//将jssor滑块移动到其原始容器中，移除全屏div
jssor_1_slider_parent_element.appendChild（jssor_1_slider_element）；
var width=jssor_1_slider_parent_element.clientWidth；
jssor_滑块。$ScaleWidth（宽度）；
document.body.removeChild（fullscreenElement）；
fullscreenElement=null；
}
}
全屏切换按钮元素。添加EventListener（“单击”，切换全屏）；

很棒，看起来很有希望，今天将尝试一下，并让您知道：）好的，尝试过，移到全屏效果很好，但从全屏移回原始大小并不是我所期望的，因为当它回来时，滑块和缩略图导航器的宽度和高度仍然相同。我玩了一点删除CSS样式，但它是一个大混乱。有没有更好的解决办法？在我点击全屏之前，我的JSSOR的宽度是980px，高度是480px，缩略图的高度是100px。向后移动后仍为100%屏幕宽度。OK！我让它工作了。。。我更改了var width=jssor\u 1\u slider\u parent\u element.clientWidth；根据初始DIV的宽度，jsssor按比例缩放：）

<script src="jssor.slider.min.js"></script>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
    <div data-u="slides" style="position:absolute;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
        <div><img data-u="image" src="image1.jpg" /></div>
        <div><img data-u="image" src="image2.jpg" /></div>                                
    </div>
    <!-- https://www.jssor.com/development/slider-with-fixed-static-element.html -->
    <img id="fullscreen_toggle_button" src="toggle-fullscreen.png" style="position:absolute;top:5px;right:5px;" />
</div>

<script>
    var options = { $AutoPlay: 1 };
    var jssor_1_slider_element = document.getElementById("jssor_1");
    var jssor_1_slider_parent_element = jssor_1_slider_element.parentNode;
    var jssor_1_slider = new $JssorSlider$(jssor_1_slider_element, options);

    var isFullscreenMode = false;
    var fullscreenElement;
    var fullscreen_toggle_button_element = document.getElementById("fullscreen_toggle_button");

    function ToggleFullscreen() {
        isFullscreenMode = !isFullscreenMode;
        if(isFullscreenMode) {
            //create fullscreen div, move jssor slider into the div
            fullscreenElement = document.createElement("div");
            fullscreenElement.style.position = "fixed";
            fullscreenElement.style.top = 0;
            fullscreenElement.style.left = 0;
            fullscreenElement.style.width = "100%";
            fullscreenElement.style.height = "100%";
            fullscreenElement.style.zIndex = 1000000;

            document.body.appendChild(fullscreenElement);
            var fullscreenRect = fullscreenElement.getBoundingClientRect();
            var width = fullscreenRect.right - fullscreenRect.left;
            var height = fullscreenRect.bottom - fullscreenRect.top;

            fullscreenElement.appendChild(jssor_1_slider_element);
            jssor_slider.$ScaleSize(width, height);
        }
        else if(fullscreenElement) {
            //move jssor slider into its original container, remove the fullscreen div
            jssor_1_slider_parent_element.appendChild(jssor_1_slider_element);
            var width = jssor_1_slider_parent_element.clientWidth;
            jssor_slider.$ScaleWidth(width);

            document.body.removeChild(fullscreenElement);
            fullscreenElement = null;
        }
    }

    fullscreen_toggle_button_element.addEventListener("click", ToggleFullscreen);
</script>