jQuery Fancybox & Image Frame Size Control

Question

I know that I can use the frameWidth and frameHeight options to control the frame size for inline and iframe content, but what can I do for manually controlling the frame size when displaying images?

My problem is that I have images that I want to display in a fancybox that are extremely horizontal and not much vertically; fancybox scales it, so that the lightbox is really wide and not very tall, which means you can't really see the image at all.

What I'd like is to have the image scroll horizontally in the lightbox. (And no, I can't change the images).

Any thoughts?

FancyBox Website

Answer 1

I ended up just hacking FancyBox and adding another option to do what I wanted. Here's the gist:

if (opts.imgManSize) { 
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20);
} else {
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height);
}

...

if (opts.imgManSize) { 
  $("#fancy_content").css('overflow','auto');
}

...

if (opts.imgManSize) { 
  $('#fancy_img').css('width','auto');
}

...

$.fn.fancybox.defaults = {
   ...
   imgManSize:false,
   imgWidth:425,
   imgHeight:355,
   ...
}

Works like a charm.

Answer 2

You can just make the frame size adjust in relation to the size of the image, by modifying the CSS.

To overwrite width and height declarations the plugin creates, add:

#fancybox-inner {
    width: auto!important;
    height: auto!important;
}

#fancybox-wrap{
    width: auto!important;
    height: auto!important;
}

and remove position:absolute on #fancybox-inner

Answer 3

I had this issue myself, and wrote some code to solve this for embedding the new Vimeo IFRAME'd videos based on an existing snippet I found. This will allow you to add URL parameters for WIDTH and HEIGHT on a fancybox by fancybox basis. If you don't add them the default will open an IFRAME with a height of 90% and 90%.

(function($){ 
    $(function(){
        // Fancybox: IFRAME
        var fancybox_iframe = $('.fancybox-iframe');
        if (fancybox_iframe.length > 0){
            fancybox_iframe.each(function(index){
                // Inline frame width param
                if( $(this).attr('href').match(/width=[0-9]+/i) ){
                    var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
                } else {
                    var fWidth = '90%';
                }
                // Inline frame height param
                if( $(this).attr('href').match(/height=[0-9]+/i) ){
                    var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
                } else {
                    var fHeight = '90%';
                }
                if(window.console&&window.console.log) { 
                    console.log('fWidth #'+index+': '+fWidth); 
                    console.log('fHeight #'+index+': '+fHeight); 
                }
                $(this).fancybox({
                    'titlePosition' : 'inside',
                    'type'              : 'iframe',
                    'autoScale'         : true,
                    'padding'           : '10',
                    'width'             : fWidth,
                    'height'                : fHeight,
                    'centerOnScroll'    : true
                });
            });
        }
    });
})(jQuery);

To use this you would use the following:

<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>

I hope this helps someone out!

Answer 4

Wrap the image in a div (if its inline) or in a page if you are using the ajax load. Then, set the style on the div to the width of your iframs and set the overflow css attribute to overflow:scroll;