Как разместить fancybox сверху

Question

Как разместить fancybox на 100 пикселей сверху, по умолчанию он выровнен по центру.

Я считаю, что для этого нет настроек API. Может кто-нибудь помочь мне в этом на самом сценарии.

Answer 1

Я немного подправил приведенный выше код. И это работает нормально для меня.

<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>

Answer 2

Для fancyBox 2.0 и позже, как указано в этом документе http://fancyapps.com/fancybox/#docs

поле : минимальное расстояние между областью просмотра и fancyBox. Может быть установлен как массив - [сверху, справа, снизу, слева]. Правое и нижнее поля игнорируются, если размеры содержимого превышают область просмотра
Целое число, массив; Значение по умолчанию: 20

Пример:

$('.fc-event').fancybox({
    autoCenter: true,
    margin: [100, 0, 0, 0], // [top, right, bottom, left]
    type: 'ajax',

Answer 3

Я изменил библиотеку 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'
});

Answer 4

Две возможные проблемы:

1. Fancybox не получает абсолютную позицию или z-индекс.Решение: добавьте !important в обертку, где позиция абсолютна.
2. Div под ними тоже имеет абсолютную позицию или положительный z-индекс.Решение: задайте фиксированную позицию или относительно нижних элементов div и отрегулируйте или добавьте отрицательный z-индекс.

Answer 5

    //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);
            }
        }
    });

Answer 6

у меня это нормально работает

<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>

Answer 7

Я никогда не использовал fancybox сам, но похоже, что вам нужно установить centerOnScroll в false и затем установить #fancybox-wrap с помощью css, как вы считаете нужным.