fancybox - 调整 iframe 内的图像大小答案

【问题标题】：fancybox - resizing image inside the iframefancybox - 调整 iframe 内的图像大小
【发布时间】：2017-06-06 19:51:46
【问题描述】：

我使用的是 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 中正确调整图像大小。谢谢！

【问题讨论】：

标签： jquery fancybox-2

【解决方案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
                    }

【讨论】：

【解决方案2】：

我在使用 fancybox 3 时遇到了未加载 fancybox iframe 的问题，所以这有帮助：

此代码每 100 毫秒轮询 iframe 以获取 img 标签，持续时间长达 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);
    }

};

【讨论】：