Question

让皇家滑块在灯箱中工作时遇到一些麻烦 - 如果你看一下这个页面：http://www.wearewebstars.dk/frontend/Test/boerneunivers2.html - 然后点击箭头，上面写着“Hvad er Myanmar” - 然后它会打开一个带有图库的灯箱 - 但是，缩略图的容器只能获得36px的宽度 - 但如果我调整窗口大小，那么它将获得所有缩略图的全宽，并正确放置缩略图 - 任何想法？我已尝试以编程方式调整窗口大小，但无法使其工作：我的脚本是：

$(".toggle-gallery-8").on("click", function(event){
                $('#gallery-8').royalSlider({
                    fullscreen: {
                      enabled: true,
                      nativeFS: true
                    },
                    controlNavigation: 'thumbnails',
                    autoScaleSlider: true, 
                    autoScaleSliderWidth: 960,     
                    autoScaleSliderHeight: 850,
                    loop: false,
                    imageScaleMode: 'fill',
                    navigateByClick: true,
                    numImagesToPreload:5,
                    arrowsNav:true,
                    arrowsNavAutoHide: true,
                    arrowsNavHideOnTouch: true,
                    keyboardNavEnabled: true,
                    usePreloader: true,
                    fadeinLoadedSlide: true,
                    globalCaption: true,
                    globalCaptionInside: false,
                    updateSliderSize: true,
                    thumbs: {
                      appendSpan: false,
                      firstMargin: true,
                    }
                });
                $('#gallery-8').royalSlider('updateSliderSize', true);
                /*if($(".window.fade.in").length() > 0){
                    $(".window").trigger("resize");
                }*/
            });

Answer 1

在开发者网站上，我发现这是一个有时会发生的已知问题。

如果滑块大小是动态的：尝试调整浏览器大小，如果之后   调整大小布局看起来正确 - 这就是问题所在。

如果滑块尺寸为静态：更改根滑块元素的大小   Chrome Web Inspector或Firebug并调整浏览器窗口大小。或者只是跑步   jQuery（'。royalSlider'）。royalSlider（'updateSliderSize'，true）;在   控制台，看看它是否解决了你的问题。

Doc：http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks

您可以尝试调用updateSliderSize方法：

setTimeout(function () {
    $('.royalSlider').royalSlider('updateSliderSize', true);
}, 500)

在滑块定义之后，需要setTimeout来处理一些时间问题。

皇家滑块和灯箱，缩略图容器没有宽度

1 个答案: