1

我在让 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");
                }*/
            });
4

1 回答 1

1

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

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

如果滑块大小是静态的：通过 Chrome Web Inspector 或 Firebug 更改根滑块元素的大小并调整浏览器窗口的大小。或者只是运行 jQuery('.royalSlider').royalSlider('updateSliderSize', true); 在控制台中，看看它是否解决了您的问题。

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

您可以尝试调用updateSliderSize方法：

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

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

于 2013-09-03T11:12:28.817 回答