JSSOR toggle fullscreen - 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>