在全屏模式下添加此图层

Question

我正在制作具有全屏功能的幻灯片 (FancyBox 3)，它使用 RequestFullScreen 方法容器 div，这意味着正文中的任何其他元素都无法在全屏模式下访问。 （如有错误请指正）

我想在幻灯片放映中包含一个 AddThis Expanding Share 按钮，但因为它是由 AddThis js 动态创建的，所以它附加了 Smart Layers 在正文结尾之前，而不是 在幻灯片容器的结尾 div 因此它不包含在全屏幻灯片中。

我在 AddThis API 中找不到有关智能图层 DOM 位置的任何信息。

我试过的似乎是个坏主意，在 div 之后手动 appendTo 必要的 div 到幻灯片容器由 AddThis 创建，我设法 "cut and paste" '.at-expanding-share-button' 并且它到目前为止工作，但我不能 "catch" '#at-expanded-menu-host' （这是由 AddThis 创建的层更多共享选项，深色背景），我什至不确定这种方法是否能正常工作...

如有任何帮助，我们将不胜感激。

Answer 1

我想通了！ :) 我想我分享我的 experience/solution，如果有人有类似的困难。

什么不起作用，为什么：

首先，我尝试与 AddThis API 通信，告诉它把它的层放到一个预制容器中，这看起来不可能，the AddThis 团队还告诉我，没有手动层 DOM 放置 的解决方案，它总是将那些附加到主体的末尾 （至少现在，也许他们将在 API).
然后我尝试手动将这些层附加到 Fancy-Box 容器，这是一个死胡同，因为 当幻灯片关闭，它从标记中删除了它的容器，所以 AddThis 层消失了，我无法重新初始化它 （也许其他人对此有一些解决方案，但我就是想不通out).
顺便说一句，"More Sharing Options"图层是在点击分享+按钮时创建的

我的解决方案：

我没有将图层附加到动态幻灯片容器，我在正文的末尾创建了一个静态 div，在创建图层时将图层附加到它，并且将 Fancy-Box 父级 div 设置为我的容器 （请注意，Fancy-Box 全屏功能使它自己的 div 进入全屏，所以我不得不使用我自己的带有图层和幻灯片的容器的全屏功能）。

我已将 sindresorhus's screenfull 用于 easier/cross-browser 全屏功能。

    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();
        }
    }

你很高兴去。我希望这对其他人有帮助！ :)

在全屏模式下添加此图层

AddThis Layers in Full Screen mode

javascript

jquery

fullscreen

addthis