Как известно 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");}});
По закрытию окна "сбрасываем" ряд изменений так как одно и то же окно на странице может использоваться для разного содержимого.