jQuery: change fancybox width

问题

I'm showing different types of images on a site. Attached to every image I want to add some text. I have written this text in the title-element in the html document. This text is a few sentences long.

What happens now is that the fancybox becomes really narrow (since the picture is quite small) and the text looks really stupid. I've tried to change the width and height values within the fancybox code, but it still doesn't seem to work. I tried to fix it in css too, and I got the title text to become wider, but the fancybox was still too narrow, so the text was partly within AND outside to box.

How can I change the fancybox size to a fixed size so that the title text won't look so visually stupid?

So far I have done this:

jQuery:

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'top',
        }
    },
            openSpeed: 'slow',
            closeSpeed: 'slow',
});

CSS

.fancybox {
    width: 600px;
    height: 600px;
}

.fancybox-title {
  width: auto;
  height: auto;
}

.fancybox-title .child {
  min-width: auto; 
  height: auto;
}

回答1:

You can use:

$(".fancybox").fancybox({
    autoDimensions: true
});

Read the doc: http://fancybox.net/api

回答2:

You Need to set autoSize to false

$(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});

来源：https://stackoverflow.com/questions/21755991/jquery-change-fancybox-width