fancybox - 在 iframe 中调整图像大小

Question

我使用的是fancybox 2.1.5版本我想要做的是在 fancybox iframe 中显示大约宽度 900 和高度 500 的大图像。当然现在图像呈现巨大并且不适合该 iframe。我很难捕捉到正确的 class 或导航到图像以调整其大小的方法。我尝试的是使用 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 中调整图像大小

fancybox - resizing image inside the iframe

jquery

fancybox-2