jQuery: change fancybox width

2019-07-09 08:57发布

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;
}

2条回答
相关推荐>>
2楼-- · 2019-07-09 09:37

You Need to set autoSize to false

$(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});
查看更多
3楼-- · 2019-07-09 09:53

You can use:

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

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

查看更多
登录 后发表回答