Question

背景

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

问题：

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

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

调查结果：

我在浏览器的代码检查器中发现，FancyBox在里面创建了#document，<html>，<head>，<body>和<img>对于iFrame，如果我添加类似<style type="text/css">img{height: auto !important; width: auto !important}</style>的内容，它会删除Firefox对图像所做的任何缩小。但是，我完全不知道如何将这个额外的样式插入到创建的iFrame的html中。我查看了整个FancyBox源代码并试图使用FancyBox的afterLoad选项插入HTML / CSS，但我无法弄清楚如何访问创建iFrame的内部来放置任何东西。

问题：

任何人都可以帮助我找到FancyBox源代码中我可以插入这些样式的位置，或者是否有人知道一行jQuery会将我置于创建的<head>标记内？

Answer 1

在提供的jsfiddle上，由于相同的原始政策，您无法访问iframe内容。实际上，fancybox将图像的src属性设置为iframe。所以，也许在相同的域上测试它（与图像相同）并尝试访问iframe内容：

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

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

我建议将图像嵌入到自己的html页面中，这样你可以应用你想要的任何样式，例如，测试它并看看它是否有预期的结果：

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

这是嵌入图像页面的链接，用于示例：

http://jsfiddle.net/Stb6A

Answer 2

实际上，如果您要显示image，则根本不需要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

Answer 3

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

afterLoad：function（）{


$（'。fancybox-iframe'）。contents（）。find（'head'）。append（'<style type="text/css"> img {height：auto！important; width：auto！important; cursor：default！重要} </style>“）;


}，

Answer 4

谢谢@ A. Wolff，您的回答确实很有帮助。

我尝试了以下方法，并且有效：

afterLoad: function () {
    $('.fancybox-iframe').contents().find('html').find('body').find('img').css({ "maxWidth": "100%" });
},

是否可以在动态创建的iFrame的头部插入样式标记？

4 个答案: