Кто-нибудь знает, как изменить размер jQuery Fancybox во время выполнения?Как вы изменяете размер Fancybox во время выполнения?
При инициализации FancyBox я могу это сделать:
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
Я наполнение FancyBox с динамическим содержимым, и я хочу, чтобы изменить размер в зависимости от содержания.
Если FancyBox была частью JQuery UI, вы могли бы сделать это следующим образом:
$("tag").fancybox.option('frameWidth', 500);
Но, как представляется, не обеспечивают такой метод, вам нужно установить CSS непосредственно:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
Решение Alan является неполным, потому что окно больше не центрируется на экране после изменения размера (по крайней мере, с последними версиями jquery и fancybox).
Таким образом, полное решение будет:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
Если вы используете версию 1.3 FancyBox, существует способ изменения размера:
$ .fancybox.resize();
Для версии 2.x of Fancybox то же самое будет сделано с:
$ .fancybox.update()
Какой будет размер активного FancyBox на основе размера содержимого внутри него ,
Это изменит размер, а не ширину. – Hans
Спасибо! Это значение. В большинстве случаев для меня это касается изменения размера (из-за сообщений об ошибках формы). – vdboor
Пробное обновление() с fancybox 2.0.6, без успеха. (ширина не обновляется, как отметил Ханс) С fancybox 2.1.5 он работает как по ширине, так и по высоте. – Lez
$ ("# fancybox-wrap"). Ширина (ширина); // или высота или любое другое
$ .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-контента и # FancyBox-накладкой. Затем он проверяет, меньше ли высота тела, чем высота наложения, если да, то она назначает новую расчетную высоту для наложения, иначе она принимает высоту здания по умолчанию.
Я просто хочу, чтобы вы знали об этом.
После поиска решений, использующих javascript для регулировки высоты, меня и моего партнера поняли что-то потрясающее.
Проверьте, имеются ли в элементах # fancybox-inner элементы PADDING или MARGIN.
Это ключевой элемент (прямые дети # FancyBox-внутреннее определение Маржа/отступа.
дети элементы (# fancyfox-внутренние> DIV>.здесь) может иметь отступы, но не забудьте отрегулировать:
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
Я просто разместил предлагаемый патч FancyBox на своей группы Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8, добавляющий публичный метод $ .fancybox.reshow(). Это позволит пересчитать высоту и ширину fancybox. Он работает как с window.onorientationchange и window.onresize, например:
window.onresize = function() {
$.fancybox.reshow();
}
$ .fancybox.resize(); не работает для меня, поэтому я поместил этот код в загруженной страницы, внутри FancyBox фрейма:
$(document).ready(function(){
parent.$("#fancybox-content").height($(document).height());
});
Вы можете также установить его в обратном вызове:
$("#mydiv").toggle('fast', function(){
parent.$("#fancybox-content").height($(document).height());
});
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 события -.> список длинного файла делает FancyBox настолько большим, и мы снова вычислить высоту)
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
Это решение формы мое:
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
Я боролся с изменением размера fancybox тоже. Решение $.fancybox.reposition();
Работает как очарование!
Я нашел одно решение этой ошибки после долгого поиска в 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();
}
});
});
Спасибо всем, кто вносит свой вклад в StackOverflow.com. Вы все были для меня спасателями много раз. Теперь я наконец-то кое-что внес. Ниже приведен пример того, как я смог переместиться в fancybox при изменении времени выполнения:
Я присвоил атрибутам элемента href специфические атрибуты размера PHP, переданные ему. Затем вызывается и установить атрибут в клик-событие, с функцией управления 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 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);
};
Спасибо за сохранение моего времени .. +1 – Toretto
В моем случае, я m, используя Fancybox для отображения очень простой веб-страницы, содержащей только изображение. Это изображение может отличаться по размеру. Моя проблема заключалась в том, что изображение не включало style="height: NNpx; width: NNpx;". Без этого autoSize fancybox может дать неожиданные результаты (указанные в их документах http://fancyapps.com/fancybox/).
tl; dr: предоставить атрибуты ширины и высоты для автоматического определения автозамены.
Этот метод работает для меня.:)
$(".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();
Использование:
parent.jQuery.fancybox.update();
На FancyBox 3 (новая версия)
parent.jQuery.fancybox.getInstance().update();
вы не можете просто установить содержание и снова вызовите fancybox? – rossipedia