Как разместить fancybox 100px сверху, по умолчанию выравнивается по центру.
Я считаю, что для этого нет настроек api. Может ли кто-нибудь помочь мне сделать это на фактическом script.
Как правильно разместить fancybox
Ответ 1
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
Ответ 2
В решении, которое я получил, было укладка обертки следующим образом:
#fancybox-wrap {
position: absolute;
top: 100px !important;
}
Надеюсь, что это поможет!
Ответ 3
В fancyBox 2 я использую topRatio : 0, этот подходящий движок fancyBox сверху, затем я использовал jQuery().css(), чтобы поместить его туда, где я хочу. Пример:
$("#myfancy").fancybox({
wrapCSS : 'fancybox-custom',
maxWidth : 500,
maxHeight : 360,
fitToView : false,
width : '85%',
height : '95%',
autoSize : false,
openEffect : 'fade',
openSpeed : 'slow',
closeEffect : 'fade',
modal : true,
closeSpeed : 'slow',
topRatio : 0,
helpers : {
overlay : {
css : {
'background-color' : '#fff'
}
}
}
}).trigger('click');
jQuery('.fancybox-wrap').css('margin-top', '120px');
Ответ 4
scrollTop страница.
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$(document).scrollTop(0);
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
Ответ 5
Это работает. Просто добавьте стиль после загрузки fancybox css. Это будет преодолевать любое движение.
<link rel="stylesheet" type="text/css" href="../css/fancybox/jquery.fancybox-1.3.4.css" media="screen" >
<style type="text/css">div#fancybox-wrap {top:100px !important;}</style>
Источник
Ответ 6
Если вы просто хотите расположить fancybox немного высоко, вы можете использовать этот параметр: "topRatio", проверить документ на http://fancyapps.com/fancybox/#docs.
Ответ 7
$('.fancybox').fancybox({
topRatio: 0,
afterShow: function(){
$(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
}
});
Ответ 8
Я немного изменил приведенный выше код. И его работа прекрасна для меня.
<script type="text/javascript">
$(document).ready(function() {
$('a.fancybox').each(function(){
var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
var posTop = parseInt($(this).attr('href').match(/top=[0-9]+/i)[0].replace('top=',''));
var posLeft = parseInt($(this).attr('href').match(/left=[0-9]+/i)[0].replace('left=',''));
var marLeft = parseInt($(this).attr('href').match(/marleft=[0-9]+/i)[0].replace('marleft=',''));
$(this).fancybox({'type':'iframe','transitionIn':'elastic','transitionOut':'elastic','width':fWidth,'height':fHeight,onStart: function () {
//create a style that will position the fancy box relative to the element that clicked it.
var leftT=posLeft;
var topT=posTop;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.shekhar{ top: ' + topT + 'px !important; left: ' + leftT + '% !important; margin-left: -' + marLeft + 'px !important; }';
document.getElementsByTagName('head')[0].appendChild(style);
$('#fancybox-wrap').addClass("shekhar");
}
});
});
});
</script>
HTML находится здесь:
<ul>
<li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=100&height=100&top=100&left=50&marleft=200">Iframe</a></li>
<li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=200&height=200&top=100&left=50&marleft=100">Iframe</a></li>
</ul>
Ответ 9
Не знаю, поддерживает ли версия fancybox 2.xxx, но в этом случае вы можете установить значение по умолчанию следующим образом:
$("#myfancy").fancybox({
margin : [100, 0, 20, 0],
...
где margin задает позицию (px) обертки (первое число в массиве TOP)
Ответ 10
Если вы используете V2, нижеприведенный вспомогательный метод выполнит трюк на мобильных устройствах:
$('.fancybox_success').fancybox({
afterShow: function () {
if ($portWidth <= $mobileBreakpoint) {
$('html,body').animate({ scrollTop: 0 }, 'slow');
}
},...
Ответ 11
Двухступенчатая атака, но с использованием положения "фиксированная", а не абсолютная, отключит прокрутку, чтобы остановить кадр от перемещения страницы
Внутренний CSS:
.fancybox-wrap { position:fixed !important; top: 100px !important; };
fancyBox jQuery:
onComplete : function(){
$('.fancybox-wrap').css({'position':'fixed', 'top':'100px'});
}
Ответ 12
Для fancyBox 2.0 и позже, как указано в этом документе
http://fancyapps.com/fancybox/#docs
margin: минимальное пространство между окнами просмотра и fancyBox. Может быть задано как массив - [верхний, правый, нижний, левый]. Правый и нижний поля игнорируются, если размеры контента превышают область просмотра Integer, Array; Значение по умолчанию: 20
Пример:
$('.fc-event').fancybox({
autoCenter: true,
margin: [100, 0, 0, 0], // [top, right, bottom, left]
type: 'ajax',
Ответ 13
Я никогда не использовал fancybox самостоятельно, но похоже, что вам нужно установить centerOnScroll в false, а затем поместить #fancybox-wrap с помощью css, как вы считаете нужным.
Ответ 14
//pass in the id of the link that was clicked and set the width and height for the iframe
$.fn.fancybox_new = function (options) {
for (i = 0; i < this.length; i++) {
options._id = $(this[i]).attr("id");
switch (options._id) {
case "elementid": //set window size based on id
options.width = 375;
options.height = 190;
break;
}
$(this[i]).fancybox(options);
}
};
$("a[rel*=formWin]").fancybox_new({
onStart: function () {
//create a style that will position the fancy box relative to the element that clicked it.
if (this._id != "" && !$(this).hasClass(this._id)) {
var style = document.createElement('style');
var pos = $("#" + this._id).position();
var mRight = parseInt($("#" + this._id).css("margin-right").replace("px")) + parseInt($("#" + this._id).css("padding-right").replace("px")) + parseInt($("#" + this._id).css("margin-left").replace("px")) + parseInt($("#" + this._id).css("padding-left").replace("px"));
var mTop = parseInt($("#" + this._id).css("margin-top").replace("px", "")) + parseInt($("#" + this._id).css("padding-top").replace("px", "")) + parseInt($("#" + this._id).css("margin-bottom").replace("px", "")) + parseInt($("#" + this._id).css("padding-bottom").replace("px", ""));
style.type = 'text/css';
style.innerHTML = '.' + this._id + ' { top: ' + (pos.top + $("#" + this._id).height() + mTop) + 'px !important; right: ' + ($("body").width() - pos.left - $("#" + this._id).width() - mRight).toString() + 'px !important; left:auto !important; }';
document.getElementsByTagName('head')[0].appendChild(style);
$('#fancybox-wrap').addClass(this._id);
}
}
});
Ответ 15
Две возможные проблемы:
- Fancybox не получает абсолютную позицию или z-индекс. Решение: добавьте
!importantв оболочку, где позиция является абсолютной. - Div под ними имеет абсолютное положение или положительный z-индекс. Решение: дать фиксированное положение или относительно под divs и настроить или добавить отрицательный индекс z.
Ответ 16
Я изменил библиотеку fancybox
Версия: 1.3.4 (11/11/2010)
для выполнения этой работы:
В файле jquery.fancybox.js найдите строку:
$.fancybox.center = function() {
в этой области найдите:
wrap
.stop()
.animate({
'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)),
и измените его на:
var topFromOptions = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding));
if (currentOpts.top) {
topFromOptions = currentOpts.top;
}
wrap
.stop()
.animate({
'top' : topFromOptions,
При отмене флажка fancybox на опции выбора селектора (например):
top: '100px'
или что вам нужно:)
$('#fancybox-selector').fancybox({
top: '20px',
// transitionOut:'elsatic'
});
Ответ 17
эта работа отлично для меня
<script>
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onStart' :function()
{
$("#fancybox-wrap").addClass('my_class');
},
});
</script>
<style>
.my_class{top:20px !important; }
</style>