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;
}
有帮助吗?

解决方案

You can use:

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

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

其他提示

You Need to set autoSize to false

$(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top