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

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;

Answer 2

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 3

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