javascript - 皇家 slider 和灯箱，缩略图容器没有宽度

Question

我在让 Royal Slider 在灯箱中工作时遇到了一些麻烦 - 如果您看一下此页面: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

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

If slider size is dynamic: try to resize your browser, if after resizing layout looks correctly - this is the issue.

If slider size is static: change size of root slider element via Chrome Web Inspector or Firebug and resize browser window. Or just run jQuery('.royalSlider').royalSlider('updateSliderSize', true); in console and see if it fixes your problem.

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

您可以尝试调用updateSliderSize方法:

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

在 slider 定义之后，需要 setTimeout 来处理一些计时问题。