Can Fancybox be responsive only horizontally for tall content?

Question

I have a site with some very tall images. I'd like for these images to respond in a responsive way horizontally, but not vertically. If they conform to the height of the browser, they become too small to see properly.

Is there a simple way to accomplish this that I'm missing?

See an example below. Click on the second thumbnail "bswift", then a small grey square to launch Fancybox. http://www.eaaronrossdesign.com/index2.php

Rigobertorigor

Answer 1

Try combining the fitToView and maxWidth API options like :

$('.thumbs_small').fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    prevEffect: 'fade',
    nextEffect: 'fade',
    fitToView: false, // images won't be scaled to fit to browser's height
    maxWidth: "90%" // images won't exceed the browser's width
});

Check JSFIDDLE

Publia

That seems to do the trick! Thanks! I kept only using one or the other. – Rigobertorigor

it doesn't work if i set maxWidth with pixels... any idea why? – Compendious

@MattiaNocerino : Once again you make comments out of context. First you down-vote an answer because the width is not "fluid" and then you wonder why it doesn't work if you set the width in pixels. Setting fixed widths (in pixels) won't ever give you a "fluid" width. You may want to read alistapart.com/article/responsive-web-design if you have any doubt ;) – Publia

@MattiaNocerino : just notice that if you set maxWidth in pixels, only be tangible if the viewport is wider than the value you set. – Publia

So, the only way to have a fluid width and a "content-based height" is to set a % maxWidth. To me, it doesn't make sense – Compendious

By the way these comments where not out of the context. In the other question i went mad, sorry – Compendious