当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Make fancybox scale the image down rather than cropping it

问题描述:

I have a basic Wordpress website, where the posts are displayed on the front page. When you click a post it brings up a fancybox modal, this displays the post using the single.php template. This will just display the post thumbnail in its full size and maybe a description.

It all works apart from the fancybox which is only stretching to 600px wide. I can't find where this 600 number is coming from and as far as I can tell from the options I've given it, it should be scaling the image down to fit within the screen.

some of the options include:

 width : 1000,

height : 600,

minWidth : 100,

minHeight : 100,

maxWidth : 1000,

maxHeight : 9999,

pixelRatio: 1, // Set to 2 for retina display support

autoSize : true,

autoHeight : true,

autoWidth : true,

autoResize : true,

autoCenter : !isTouch,

fitToView : true,

aspectRatio : false,

topRatio : 0.5,

leftRatio : 0.5,

scrolling : 'no', // 'auto', 'yes' or 'no'

wrapCSS : '',

arrows : true,

closeBtn : true,

...but I've tried seemingly every combination of these with little or no effect.

Does anyone know where this 600 is coming from or why its reverting to that size?

This is the site... http://www.marcoshype.com/

This is an example of a single post which will be in the modal http://www.marcoshype.com/photography/no-faking/

Thanks for any help in advance

网友答案:

Lines 113-129 of your webpages source:

$(document).ready(function() {

    $("a.fancybox").fancybox({
        'width'              :  600, 
        'height'             :  800,
        'overlayOpacity'     :  '0.4',
        'overlayColor'       :  '#000',
        'hideOnContentClick' :   false,
        'autoScale'          :   false,
        'transitionIn'       :   'elastic',
        'transitionOut'  :   'elastic',
        'type'           :   'iframe'
    });

    $(".grid_9").find("a").fancybox();

  });
分享给朋友:
您可能感兴趣的文章:
随机阅读: