Как вы изменяете размер Fancybox во время выполнения?

Кто-нибудь знает, как resize jQuery Fancybox во время выполнения?

При инициализации fancybox я могу это сделать:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 }); 

Я заполняю fancybox динамическим контентом, и я хочу, чтобы он изменялся в зависимости от содержимого.

Если вы используете версию 1.3 Fancybox, существует способ изменения размера:

$ .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, но ничего не нашел.

Чтобы resize windows на ширину и высоту страницы и центрировать ее, сделайте следующее:

 $("#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 vars, переданными ему. Затем вызывается и задает атрибут в событии click с функцией fancybox control и параметрами, встроенными в …

 LINK $(".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(); 

Ссылка: http://fancyapps.com/fancybox/3/docs/#iframe

Использование:

 parent.jQuery.fancybox.update(); 
  • Изменение размера UIImage (пропорция шкалы)
  • Изменение размера windows WPF и содержимого, зависящего от разрешения экрана
  • Автоматическое изменение размера элемента SELECT в соответствии с выбранной шириной OPTION
  • автоматически resize текста (размер шрифта) при изменении размера windows?
  • Как масштабировать / изменять размер текста в соответствии с TextView?
  • Давайте будем гением компьютера.