JSSOR toggle fullscreen

Question

Hi the only thing I would like to have in JSSOR is to toggle fullscreen gallery. I am using Image gallery version of JSSOR. I would like to have fullscreen button on the right upper corner which toggles fullscreen (not full but maximized) view and I can move with images there.

I did not see any tutorial on official jssor page or any other thread. I would like to have something like this in the upper right corner. Any help with this ?

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>