Кто-нибудь знает, как изменить размер jQuery Fancybox во время выполнения?
При инициализации fancybox я могу это сделать:
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
Я заполняю fancybox динамическим контентом, и я хочу, чтобы он изменялся в соответствии с содержимым.
Если вы используете версию Fancybox версии 1.3, существует способ изменения размера:
.$fancybox.resize();
Для версии 2.x из Fancybox то же самое можно было бы сделать с помощью
$. Fancybox.update()
Что изменит размер активного fancybox на основе размера содержимого внутри него.
Решение Alan является неполным, поскольку окно больше не центрируется на экране после изменения размера (по крайней мере, с последними версиями jquery и fancybox).
Итак, полным решением будет:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
$( "# FancyBox-обертка" ) ширина (ширина).//или высота или что-то еще
.$fancybox.center();
Эй, сражаясь почти два дня, мне удалось изменить высоту оверлея. Надеюсь, это может быть полезно:
$('#register-link a').fancybox({
onComplete: function(){
body_height = $('body').height();
fancybox_content_height = $('#fancybox-content').height();
fancybox_overlay_height = fancybox_content_height + 350;
if(body_height < fancybox_overlay_height ) {
$('#fancybox-overlay').css('height', fancybox_overlay_height+'px');
}
}
});
Что делает этот код, он сначала вычисляет высоту тела, # fancybox-content и # fancybox-overlay. Затем он проверяет, меньше ли высота по высоте, чем высота наложения, если да, то она назначает новую расчетную высоту для наложения, иначе она принимает высоту по умолчанию
Я просто хочу, чтобы вы знали об этом.
После поиска решений с использованием javascript для регулировки высоты меня и моего партнера поняли что-то потрясающее.
Проверьте, установлены ли содержащиеся элементы # fancybox-inner PADDING или MARGIN.
Это ключевой элемент (прямые дочерние элементы определения # fancybox-inner margin/padding.
Элементы children (# fancyfox-inner > div > .here) могут иметь прописку, но не забудьте настроить:
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
Я нашел одно решение этой ошибки после долгого поиска в Google, но ничего не нашел.
Чтобы изменить размер окна на ширину и высоту страницы и центрировать ее, сделайте следующее:
$("#click-to-open").click(function(){
var url = "url-loader.php";
$.fancybox({
'autoScale' : false,
'href' : url,
'padding' : 0,
'type' : 'iframe',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'onComplete' : function(){
$('#fancybox-content').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 });
$('#fancybox-wrap').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }).show();
$.fancybox.resize();
$.fancybox.center();
}
});
});
Если Fancybox был частью пользовательского интерфейса jQuery, вы бы сделали это следующим образом:
$("tag").fancybox.option('frameWidth', 500);
Но, как представляется, такой метод не нужен, вам нужно установить CSS напрямую:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
function overlay(){
var outerH = $('#fancybox-outer').height();
var bodyH = $(window).height();
var addH = 300; //add some bottom margin
if(outerH>bodyH){
var newH = outerH + addH;
}else{
var newH = bodyH + addH;
}
$('#fancybox-overlay').height(newH+'px');
$.fancybox.center();
}
и называть его событием, когда вам нужно... (например, uploadify onSelect event → long file list делает fancybox настолько большим, и мы снова вычисляем высоту)
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
$fancybox.resize(); не работал у меня, поэтому я поместил этот код на загруженную страницу внутри fancybox iframe:
$(document).ready(function(){
parent.$("#fancybox-content").height($(document).height());
});
Вы также можете установить его в обратном вызове:
$("#mydiv").toggle('fast', function(){
parent.$("#fancybox-content").height($(document).height());
});
Я боролся с изменением размера fancybox.
Решение $.fancybox.reposition();
Работает как шарм!
Мое решение было таким (для fancybox 1.3.4):
найдите
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
$.fancybox.center(true);
};
и замените на
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
view = _get_viewport();
var updated_width = view[0];
if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; }
$("#fancybox-wrap, #fancybox-content").css("width", updated_width);
$.fancybox.center(true);
};
Этот метод работает для меня.:)
$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust});
$(".fancybox-inner").css({"height": heightToAdjust});
if ($.fancybox.isOpened) {
if ($.fancybox.current) {
$.fancybox.current.height = heightToAdjust;
}
}
$.fancybox.reposition();
Я только что опубликовал предложенный патч для Fancybox в своей группе Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8, который добавляет открытый метод $.fancybox.reshow(). Это позволит пересчитать высоту и ширину fancybox. Он работает как с window.onorientationchange, так и с окном window.onresize, например:
window.onresize = function() {
$.fancybox.reshow();
}
Это форма решения my:
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
Спасибо всем, кто участвует в StackOverflow.com. Вы все были для меня спасателями много раз. Теперь я наконец-то кое-что внес. Ниже приведен пример того, как я смог превысить размер fancybox при запуске quandry:
Я присвоил атрибутам элемента href специфические атрибуты с параметрами PHP, переданными ему. Затем вызывается и устанавливает атрибут в событии click, с функцией управления fancybox и параметрами, встроенными в...
<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW"
assetH="$assetH">LINK</a>
$(".asset").click(function(){
var assetW = $(this).attr('assetW');
//to display inter-activities..
$(".asset").fancybox({
width : assetW,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
'onComplete' : function(){
$.fancybox.resize();
}
});
});
В моем случае я использую Fancybox для отображения очень простой веб-страницы, содержащей только изображение. Это изображение может отличаться по размеру. Моя проблема заключалась в том, что изображение не включало style="height: NNpx; width: NNpx;". Без этого autoSize fancybox может дать неожиданные результаты (указанные в их документах http://fancyapps.com/fancybox/).
tl; dr: предоставить атрибуты ширины и высоты для правильной работы autoSize.
Вкл Fancybox 3 (новейшая версия)
parent.jQuery.fancybox.getInstance().update();
Использование:
parent.jQuery.fancybox.update();