[英]AddThis Layers in Full Screen mode
I'm making a slideshow with full screen functionality (FancyBox 3) , it's using the RequestFullScreen
method on the container div, which means any other element in the body is not accessible in full screen mode.我正在制作具有全屏功能的幻灯片(FancyBox 3) ,它在容器 div 上使用
RequestFullScreen
方法,这意味着在全屏模式下无法访问正文中的任何其他元素。 (correct me if i'm wrong) (如我错了请纠正我)
I would like to include an AddThis Expanding Share button in the slideshow, but because it's created dynamically by the AddThis js, it appends the Smart Layers before the end of the body, not at the end of the slideshow container div therefore it's not included in the full screen slideshow.我想在幻灯片中包含一个AddThis Expanding Share按钮,但是因为它是由 AddThis js 动态创建的,所以它将智能层附加在正文结束之前,而不是在幻灯片容器 div 的末尾,因此它不包含在全屏幻灯片。
I couldn't find any info on Smart Layers DOM placement in the AddThis API.我在 AddThis API 中找不到有关 Smart Layers DOM 放置的任何信息。
What I've tried is seems like a bad idea, to manually appendTo
the necessary divs to the slideshow container after the divs are created by AddThis, I managed to "cut and paste" the '.at-expanding-share-button'
and it's working so far, but I can't "catch" the '#at-expanded-menu-host'
(which is the layer created by AddThis for more sharing options, with the dark background), and I'm not even sure if this method will work properly...我尝试过的似乎是个坏主意,在 AddThis 创建 div 后手动将必要的 div 添加到幻灯片容器中,我设法“剪切并粘贴”了“
appendTo
'.at-expanding-share-button'
和到目前为止它正在工作,但我无法“捕捉” '#at-expanded-menu-host'
(这是由 AddThis 创建的用于更多共享选项的图层,具有深色背景),我什至不确定如果这个方法能正常工作......
Any help would be appreciated.任何帮助,将不胜感激。
I figured it out!我想到了! :) I thought I share my experience/solution, if anyone has similar difficulties.
:) 如果有人有类似的困难,我想我会分享我的经验/解决方案。
What won't work and why:什么不起作用以及为什么:
Then I've tried to manually append those layers to the Fancy-Box container , which was a dead end because when the slideshow closes, it removes its container from the markup , so the AddThis layers disappeared and I couldn't reinit it (maybe others have some solution for that, but I just couldn't figure it out) .然后我尝试手动将这些图层附加到 Fancy-Box 容器,这是一个死胡同,因为当幻灯片关闭时,它会从标记中删除其容器,所以 AddThis 图层消失了,我无法重新初始化它(也许其他人对此有一些解决方案,但我就是想不通) 。
By the way, the "More Sharing Options" layer is created when the share + button is clicked.顺便说一句,单击共享+按钮时会创建“更多共享选项”层。
My solution:我的解决方案:
I've used sindresorhus's screenfull for easier/cross-browser full screen functions.我使用sindresorhus 的 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();
}
}
And you are good to go.你很高兴。 I hope this helps for anybody else!
我希望这对其他人有帮助! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.