Question

我修改了一个已经安装并运行Fancybox的模板;我的画廊窗口在较小的屏幕上太大了，我遇到了问题。目前我有一个大图像，然后下面是一个体面的文本块。修改'main.js'文件中的代码后，我可以让窗口适合非Retina Macbook Pro和更大屏幕上的浏览器窗口，但在Macbook Air 11上，窗口会在底部被切断（我知道这是关于像素而不是屏幕尺寸，我手边没有数字）。这不是手机上的问题，因为我可以用手指向上滚动窗口。

一种解决方案是在窗口内滚动，但如果可行，那么我就无法使其工作。也许他们应该是iframe而不是画廊窗口？如果是这样，我需要有关如何实现该建议的建议（除了视频链接之外，模板没有附带任何iframe示例）。

以下是网站：Weirdsmobile

单击“项目”部分中的任何图块以查看Fancybox窗口。

这是所有的javascript代码;我建议添加 fitToView：false 和 maxWidth：“95％”因为窗口最初不适合手机屏幕。然后我补充道 maxHeight：“60％”尝试缩小它以适应，否则整个窗口太大;但在较小的屏幕上，％仍然太高。

BRUSHED.fancyBox = function(){
if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){

    $(".fancybox").fancybox({               
            fitToView: false, // so we can get all the length of the title
         maxWidth: "95%", // will make it responsive; adjust to your needs
           maxHeight: "60%",
           padding : 0,
            beforeShow: function () {
                this.title = $(this.element).attr('title');
                this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
            },
            helpers : {
                title : { type: 'inside' },
            }
        });

    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
}

}

Fancybox：窗口在较小的屏幕尺寸下被切断

0 个答案: