fancybox - изменение размера изображения внутри iframe

Question

Я использую fancybox версии 2.1.5. Я пытаюсь отобразить большие изображения в iframe fancybox шириной около 900 и высотой 500. Конечно, сейчас изображения отображаются огромными и не вписываются в этот 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. Спасибо!

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 у меня возникла проблема с не загружаемым фреймом box iframe, так что это помогло:

Этот код опрашивает iframe для тега img каждые 100 мсек в течение до 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);
    }

};