JSSOR переключить в полноэкранный режим - PullRequest
Новая
       32

JSSOR переключить в полноэкранный режим

0 голосов
/ 23 января 2019

Привет, единственное, что я хотел бы иметь в JSSOR - это переключить полноэкранную галерею.Я использую версию галереи изображений JSSOR.Я хотел бы иметь полноэкранную кнопку в правом верхнем углу, которая переключает полноэкранный (не полный, но развернутый) вид, и я могу перемещаться с изображениями там.

Я не видел ни одного учебника на официальной странице jssor или в любой другой теме,Я хотел бы иметь что-то подобное в правом верхнем углу.Любая помощь с этим?

enter image description here

1 Ответ

0 голосов
/ 23 января 2019 
<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>
...