Извращения с fancybox

Как известно 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");}});

По закрытию окна "сбрасываем" ряд изменений так как одно и то же окно на странице может использоваться для разного содержимого.

Запись опубликована в рубрике Работа с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий