背景:
我正在创建一个页面,允许用户单击链接以查看 FancyBox v2 中餐厅的菜单。我最初将菜单的每一页作为单独的图像,但通过用户测试,我们决定消除每个菜单页的缩略图并将它们连接成一个高图像(每一页低于最后一页)。用户现在可以在 FancyBox iframe 内一次滚动浏览整个菜单。这在大多数浏览器中都可以正常工作,甚至在我测试过的移动设备上也是如此。
问题:
Firefox 会自动缩小图像以适应 iframe。用户被迫用小放大光标单击图像以查看全尺寸图像,然后继续阅读菜单。
JSFIDDLE:http: //jsfiddle.net/2ZW9K/6/
调查结果:
我在浏览器的代码检查器中发现 FancyBox 在 iFrame 内部创建了#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>
标签中?