Question

我使用的是fancybox 2.1.5版我想要做的是在宽度900和高度500的fancybox iframe中显示大图像。当然，现在图像渲染巨大，不适合那个iframe。我很难捕获正确的类或导航到图像以调整其大小的方法。我尝试使用beforeShow函数并执行此操作：

                 $(".fancybox").fancybox({
                    type: 'iframe',
                    href: source,
                    title: title,
                    width: 900,
                    height: 500,
                    closeBtn: false,
                    nextSpeed: 0, //important
                    prevSpeed: 0, //important
                    beforeShow: function() {
                        alert('its working!');
                        $(".fancybox-iframe img").css("width","900px");
                        $(".fancybox-iframe img").css("height","auto");
                        $(".fancybox-iframe img").addClass("imageResize");
                    }
                });

但是，$(".fancybox-iframe img")和$(".fancybox-inner img")都不是触发img的正确方法。如何使用beforeShow函数在fancybox iframe中正确调整图像大小。谢谢！

Answer 1

我想通了

                    beforeShow: function () {
                        var newWidth = 900; // set new image display width
                        $('.fancybox-iframe').contents().find('img').css({
                            width  : newWidth,
                            height : "auto"
                        }); // apply new size to img
                    }

Answer 2

对于我使用fancybox 3我遇到了没有加载fancybox iframe的问题，所以这有帮助：

此代码每隔100毫秒轮询一次img标记的iframe，最多2秒，以查看是否已加载图像。如果有，那么它将图像的属性设置为最大高度。

如果找不到iframe，则应立即清除间隔。

var fancyboxOptions = {
    onComplete: function( instance, slide ) {
        var timeCompleted = new Date();
        function afterLoading () {
            clearInterval(pollLoaded);
            $('iframe',slide.$content[0]).contents().find('img').attr('height','100%');
        }
        var pollLoaded = setInterval(function(){
            var iframe = document.getElementById($('iframe',slide.$content[0]).attr('id'));
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            if (iframeDoc) {
                if (( iframeDoc.readyState  === 'complete' )
                    && ($('iframe',slide.$content[0]).contents().find('img').length > 0)) {
                    afterLoading();
                }
                // try for 2 seconds then stop.
                if (new Date() - timeCompleted > 2000) {
                    clearInterval(pollLoaded);
                }
            }
            else {
                clearInterval(pollLoaded);
            }
        },100);
    }

};

fancybox - 调整iframe内部的图像大小

2 个答案: