JSSOR 切换全屏

Question

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

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

Answer 1

<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>

JSSOR 切换全屏

JSSOR toggle fullscreen

fullscreen

jssor