Как известно fancybox позволяет открывать картинки во «всплывающем» окне. Но при этом размер окна и его дизайн прописывается либо глобально, либо никак. И во многом зависит от размера картинки. Но бывают требования сделать окошко «как в дизайне». И тогда на помощь приходит Fancybox API
Использую например такую функцию:
function completeRealImage() {
$("#fancybox-title-inside").css("font-size", "10px");
$("#fancybox-title-inside").css("color", "#666");
var widthval=$("#fancybox-content").width();
if ( widthval < 200 ) {
$("#fancybox-content").width(200);
$("#fancybox-title").width(200);
$("#fancybox-wrap").width(220);
$("#fancybox-content img").width(widthval);
var offset=$("#fancybox-wrap").offset();
offset.left=Math.ceil(offset.left - (200-widthval)/2);
$("#fancybox-wrap").offset(offset);
$("#fancybox-content").css("text-align", "center");
}
var heightval=$("#fancybox-content").height();
if ( heightval < 300 ) {
$("#fancybox-content img").height(heightval);
var padding=Math.ceil((300-heightval)/2);
var offset=$("#fancybox-wrap").offset();
offset.top=Math.ceil(offset.top - (300-heightval)/2);
$("#fancybox-wrap").offset(offset);
$("#fancybox-content").css("padding-top", padding+"px");
$("#fancybox-content").height(300-padding);
} else {
$("#fancybox-content").css("padding-top", "0px");
}
}
А вызывается она после формирования окна fancybox таким вот образом
$(".realimage").fancybox({width:200, height:300, autoScale:false, modal:false,
autoDimensions:false, titlePosition:'inside',
onComplete:completeRealImage,
onClosed:function(){$("#fancybox-content").css("padding-top", "0px");}});
По закрытию окна "сбрасываем" ряд изменений так как одно и то же окно на странице может использоваться для разного содержимого.