fancybox - resizing image inside the iframe

Question

I am using fancybox version 2.1.5 What I am trying to do is display large images in the fancybox iframe of about width 900 and height 500. Of course right now images render huge and don't fit into that iframe. I am having a hard time capturing the right class or a way to navigate to the image to resize it. What I tried is using beforeShow function and do this:

                 $(".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");
                    }
                });

However, neither $(".fancybox-iframe img") nor $(".fancybox-inner img") are correct ways to trigger the img. How can I use beforeShow function to properly resize my images inside the fancybox iframe. Thanks!

Answer 1

I figured it out

                    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
                    }