Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
442 views
in Technique[技术] by (71.8m points)

jquery - Can Fancybox be responsive only horizontally for tall content?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

56.8k users

...