1

背景:

我正在创建一个页面,允许用户单击链接以查看 FancyBox v2 中餐厅的菜单。我最初将菜单的每一页作为单独的图像,但通过用户测试,我们决定消除每个菜单页的缩略图并将它们连接成一个高图像(每一页低于最后一页)。用户现在可以在 FancyBox iframe 内一次滚动浏览整个菜单。这在大多数浏览器中都可以正常工作,甚至在我测试过的移动设备上也是如此。

问题:

Firefox 会自动缩小图像以适应 iframe。用户被迫用小放大光标单击图像以查看全尺寸图像,然后继续阅读菜单。

JSFIDDLE:http: //jsfiddle.net/2ZW9K/6/

调查结果:

我在浏览器的代码检查器中发现 FancyBox 在 iF​​rame 内部创建了#document<html><head><body>和 但是,我完全不知道如何将这种附加样式插入到创建的 iFrame 的 html 中。我查看了整个 FancyBox 源代码,并尝试使用 FancyBox 的选项插入 HTML/CSS,但我不知道如何访问创建的 iFrame 的内部以放置任何内容。<img><style type="text/css">img{height: auto !important; width: auto !important}</style>afterLoad

问题:

任何人都可以帮助我找到我可以在 FancyBox 源代码中插入这些样式的位置,或者是否有人知道一行 jQuery 可以将我放入创建的<head>标签中?

4

4 回答 4

2

在提供的 jsfiddle 上,由于同源策略,您无法访问 iframe 内容。实际上,fancybox 将 image 的 src 属性设置为 iframe。所以,也许在同一个域(与图像相同)上测试它并尝试访问这样的 iframe 内容:

afterLoad: function () {
               $('.fancybox-iframe').contents().find('head');
       },

但我认为这不是正确的方法,因为内容已经显示出来了。

我建议将图像嵌入到它自己的 html 页面中,这样你就可以应用你想要的任何样式,例如,测试它并在那里查看它的预期结果:

http://jsfiddle.net/5QSnK/show/

这是嵌入图像页面的链接,用于示例:

http://jsfiddle.net/Stb6A

于 2013-06-13T15:57:45.347 回答
1

实际上,如果您要显示image,则根本不需要 an iframe(并且省去了访问iframe内容和所有相同来源策略的东西、样式、等等等等的麻烦)

这个 html

<a class="fancybox" href="http://muellerpages.com/menu.jpg">
    Click For FancyBox
</a>

只需要此代码:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        fitToView : false, // so the image will be full sized
        maxWidth : 612, // optional if the image is bigger than this size
        maxHeight: 1004,
        padding: 5,
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(0,0,0,.85)'
                }
            }
        }
    });
});

JSFIDDLE

于 2013-06-13T18:15:46.413 回答
0

如果将来有人感兴趣,我使用的最后一行代码是:

加载后:函数(){

$('.fancybox-iframe').contents().find('head').append(' <style type="text/css">img{height: auto !important; width: auto !important; cursor: default !important} </style>');

},

于 2013-06-13T16:46:16.010 回答
0

谢谢@ A. Wolff,您的回答真的很有帮助。

我尝试了以下方法并且它有效:

afterLoad: function () {
    $('.fancybox-iframe').contents().find('html').find('body').find('img').css({ "maxWidth": "100%" });
},
于 2018-08-09T08:26:59.467 回答