在全屏模式下添加此图层

Question

我正在制作一个具有全屏功能的幻灯片 (FancyBox 3)，它在容器 div 上使用RequestFullScreen 方法，这意味着在在全屏模式下无法访问正文。 （如果我错了，请纠正我）

我想在幻灯片中包含一个 AddThis Expanding Share 按钮，但由于它是由 AddThis js 动态创建的，它会在结束之前附加 Smart Layers主体，而不是位于幻灯片容器 div 的末尾，因此它不包含在全屏幻灯片中。

我在 AddThis API 中找不到任何有关 Smart Layers DOM 放置的信息。

我尝试过的似乎是个坏主意，在 AddThis 创建 div 后手动将必要的 div 放入幻灯片容器中 appendTo，我设法“剪切并粘贴”'.at-expanding-share-button'到目前为止它正在工作，但我无法“捕捉”'#at-expanded-menu-host'（这是由 AddThis 创建的用于更多共享选项的图层，具有深色背景），我什至不确定这种方法是否会正常工作...

任何帮助将不胜感激。

Answer 1

我想通了！ :) 如果有人遇到类似的困难，我想我会分享我的经验/解决方案。

什么不起作用以及为什么：

• 首先，我尝试与 AddThis API 通信，告诉它将其图层放入预制容器中，这看起来是不可能的， AddThis 团队还告诉我，有没有手动放置层 DOM 的解决方案，它总是将它们附加到正文的末尾（至少现在，也许他们会在他们的 API 中实现这个选项）。

• 然后我尝试手动将这些图层附加到 Fancy-Box 容器，这是一个死胡同，因为 当幻灯片关闭时，它会从标记，所以 AddThis 层消失了，我无法重新初始化它（也许其他人对此有一些解决方案，但我就是想不通）。

• 顺便说一下，“更多分享选项”层是在点击分享+按钮时创建的。

我的解决方案：

• 我没有将图层附加到动态幻灯片容器，我在正文的末尾创建了一个静态 div，在创建图层时将它们附加到其中，并将 Fancy-Box 父 div 设置为我的容器 （请注意，Fancy-Box 全屏功能会将其自己的 div 变为全屏，因此我必须对带有图层和幻灯片的容器使用自己的全屏功能） .

我使用sindresorhus's screenfull 来实现更简单/跨浏览器的全屏功能。

    var FullScreenContainer = $('#container');

    // Check if AddThis Layers are ready
    var checkLayers = setInterval(function() { appendLayers(); }, 1000);
        // Append the layers to FullScreenContainer
        function appendLayers() {
            var layers = $('.at-expanding-share-button, #_atssh');
            if(layers.length > 0){
                addthis.layers.refresh();
                layers.appendTo(FullScreenContainer);
                clearInterval(checkLayers);
                console.log('layers added');
            }
            else {
                console.log('not found')
            }
        }
    // Check for more layers when the share icon clicked
    $(document).on('click', ".at-expanding-share-button-toggle", function() {
            var checkMoreLayers = setInterval(function() { catchLayers(); }, 1000);
            function catchLayers() {
                var morelayers = $('#at-expanded-menu-host');
                if(morelayers.length > 0){
                    morelayers.appendTo(FullScreenContainer);
                    clearInterval(checkMoreLayers);
                    console.log('more layers added');
                }
                else {
                    console.log('did not found more')
                }
            }
    });

    // Don't forget to disable the full screen function in Fancy-Box, 
    // then call them when necessary (onInit, clickSlide, clickOutside 
    // and the close button)
    function enterFullscreen() {
        screenfull.request($('#container')[0]);
    }
    function exitFullscreen() {
        if (screenfull.isFullscreen) {
            screenfull.exit();
            $.fancybox.getInstance().close();
        }
        if (!screenfull.isFullscreen) {
            $.fancybox.getInstance().close();
        }
    }

你可以走了。我希望这对其他人有帮助！ :)