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

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

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

fullscreen jssor

23.01.2019 00:35

Добавление поддержки полноэкранного режима в Ng-Zorro

В эти дни я работаю над проектом и выбрал ng-zorro в качестве библиотеки компонентов для этой задачи.

251

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Замечательно, выглядит многообещающе, попробую сегодня и сообщу вам :)

— 23.01.2019 13:29

Хорошо, попробовал, переход в полноэкранный режим работает хорошо, но возврат из полноэкранного режима в исходный размер - это не то, чего я ожидаю, потому что когда он возвращается, ширина и высота как ползунка, так и навигатора эскизов остаются прежними. Я немного поигрался с удалением стиля CSS, но это большой беспорядок. Есть ли лучшее решение? Прежде чем я нажму на полноэкранный режим, мой JSSOR имеет ширину 980 пикселей и высоту 480 пикселей, а высота миниатюры составляет 100 пикселей. После перемещения назад остается 100% ширины экрана.

— 23.01.2019 21:26

В ПОРЯДКЕ ! У меня все заработало... Я изменил var width = jssor_1_slider_parent_element.clientWidth; к ширине исходного DIV, и это работает, jsssor масштабируется :)

— 23.01.2019 21:37

23.01.2019 02:29