Question

我的页面中有以下Fancybox声明：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

我需要减小模态框使用的图像的大小，我相信我可以通过设置Fancybox提供的“autoDimensions”，“width”和“height”选项来做到这一点，我只是不知道如何将其与悬停功能集成，因为Fancybox中没有为hover事件指定功能的选项。（我希望这是有道理的。）

无论如何，有谁知道如何修改上面的javascript来控制宽度和高度？

谢谢！

Answer 1

您始终可以向document.ready添加代码以便每次都触发。所以只需检查事件并调整大小。

或者首先隐藏元素，您可以使用show event

获取事件触发器

Answer 2

检查事件启动。在尝试加载内容之前，将立即调用onstart，并且可以在那里添加调整大小操作。

Answer 3

抱歉，fancybox中的images不使用“autoDimensions”，“width”和“height”API选项。这些选项仅适用于ajax，iframe或inline内容。

显示fancybox中的图片，重新调整大小以适合视口（autoScale设置为true时）或原始大小（autoScale设置为{时） {1}}）。如果原始大小大于视口的高度，则必须向下滚动父页面以查看整个图像。

你可以在fancybox中重新调整图像大小的唯一方法是使用false API（我不建议......它会产生奇怪的行为）。您可以使用fancybox的回调选项jQuery css()来调用它，例如：

onComplete

注意上面提到的选项适用于fancybox v1.3.x。

使用它需要您自担风险。

Fancybox - 修改javascript以添加选项

3 个答案: