Как позиционировать Fancybox на основе элемента, который назывался From

Question

Я пытаюсь выяснить, как вызвать Fancybox, чтобы он отображался рядом с элементом (тегом привязки), из которого он был вызван.

$("a.fancylink").fancybox({
    'width' : 560,
    'height' : 340,
    'transitionIn' : 'fade',
    'transitionOut' : 'fade',
    'speedIn' : 600, 
    'speedOut' : 200, 
    'overlayShow' : false,
    'centerOnScroll' : false
});

Я знаю, что могу расположить Fancybox с помощьюВызов OnComplete, но затем он дергается от центра к месту назначения.

Кто-нибудь знает, как закодировать вызов Fancybox, чтобы он был открыт, скажем, влево или вправо от элемента, из которого он был запущен? *

Anyпомощь очень ценится.Спасибо!

Answer 1

Кажется, все работает нормально:

//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");
        $(this[i]).fancybox(options);
    }
};

$("a[rel*=fancybox]").fancybox_new({
    onStart: function () {
            $('#fancybox-wrap').addClass("formWin");
            //create a style that will position the fancy box relative to the element that clicked it.
            if (this._id != "" && !$(this).hasClass(this._id)) {
                var pos = $("#" + this._id).position();
                var mRight = parseInt($("#" + this._id).css("margin-right").replace("px").replace("auto", "0")) + parseInt($("#" + this._id).css("padding-right").replace("px", "").replace("auto", "0")) + parseInt($("#" + this._id).css("margin-left").replace("px", "").replace("auto", "0")) + parseInt($("#" + this._id).css("padding-left").replace("px", "").replace("auto", "0"));
                var mTop = parseInt($("#" + this._id).css("margin-top").replace("px", "").replace("auto", "0")) + parseInt($("#" + this._id).css("padding-top").replace("px", "").replace("auto", "0")) + parseInt($("#" + this._id).css("margin-bottom").replace("px", "").replace("auto", "0")) + parseInt($("#" + this._id).css("padding-bottom").replace("px", "").replace("auto", "0"));
                var styleTag = '<style type="text/css">.' + this._id + ' { top: ' + (pos.top + $("#" + this._id).height() + mTop) + 'px !important; right: ' + ($("#mainContainer").width() - pos.left - $("#" + this._id).width() - mRight + (($("body").width() - $("#mainContainer").width()) / 2)).toString() + 'px !important; left:auto !important; }</style>';
                $("head").append(styleTag);
                $('#fancybox-wrap').addClass(this._id);
            }
        }
    }
});

Answer 2

Я решил переопределить этот метод fancybox:

$.fancybox.getViewport = function() { 
    // fancybox custom conditions for positioning here
    return {w: customWidht, h: customHeight, x: customLeft, y: customTop}
}; 

определите customWidht, customHeight, customLeft, customTop в зависимости от вашего случая, может быть динамическим или нет.

Answer 3

Мое простое решение для относительного положения:

$('.modal').fancybox({
    autoCenter: false,
    beforeShow: function() {
        var position = this.element.offset();
        $.fancybox._getPosition = function() {
            return position;
        }
    }
});

Answer 4

Другое решение - добавить # fancybox-wrap div к желаемому родительскому div и установить позицию в css.

Css ^

#parent #fancybox-wrap {
left:0 !important;
top:0 !important;
}

JS:

jQuery(document).ready(function() {
    jQuery("#fancybox-wrap").appendTo("#parent");   

    jQuery('#parent').fancybox({    
    }); 
});

Answer 5

Вот плагин, который я написал для позиционирования элементов. Имеются всевозможные позиции, варианты.

Вы используете это так:

$("#Element").align($("#ParentElement"), {
    animate: false
});

// Align
// Author: Sam Striano
// Date  : 12/14/2010
jQuery.fn.align = function (parentElement, options, callback) {
    /// <summary>
    ///     Aligns an element over/around another element.
    /// </summary>
    /// <param name="parentElement" type="jQuery/String" optional="false">
    ///     Either a jQuery object or a selector string to align the selected element(s) on.
    /// </param>
    /// <param name="options" type="Object" optional="true">
    ///     A set of key/value pairs that configure the alignment.
    /// </param>
    /// <param name="callback" type="Function" optional="true">
    ///     A callback function that is executed once the alignment is complete.
    /// </param>
    var settings = jQuery.extend({
        animate: true,
        animateLength: 500,
        fadeIn: false,
        fadeInLength: 250,
        outerAlign: false,
        position: "MiddleCenter",
        show: true,
        hPadding: 0,
        vPadding: 0
    }, options),
        $parentElement = (typeof parentElement === "string") ? $(parentElement) : parentElement;

    return this.each(function () {
        // Cache Element
        var $element = $(this).css("position", "absolute"),
            x = 0,
            y = 0;

        // Calculate Position
        if (settings.outerAlign) {
            switch (settings.position) {
                case "TopLeft":
                    x = ($parentElement.offset().left - $element.outerWidth() - settings.hPadding);
                    y = ($parentElement.offset().top - $element.outerHeight() - settings.vPadding);
                    break;
                case "TopCenter":
                    x = (($parentElement.offset().left + ($parentElement.outerWidth() / 2)) - ($element.outerWidth() / 2));
                    y = ($parentElement.offset().top - $element.outerHeight() - settings.vPadding);
                    break;
                case "TopRight":
                    x = ($parentElement.offset().left + $parentElement.outerWidth() + settings.hPadding);
                    y = ($parentElement.offset().top - $element.outerHeight() - settings.vPadding);
                    break;
                case "MiddleLeft":
                    x = ($parentElement.offset().left - $element.outerWidth() - settings.hPadding);
                    y = (($parentElement.offset().top + ($parentElement.outerHeight() / 2)) - ($element.outerHeight() / 2));
                    break;
                case "MiddleCenter":
                    x = ($parentElement.offset().left + (($parentElement.outerWidth() / 2) - ($element.outerWidth() / 2)));
                    y = ($parentElement.offset().top + (($parentElement.outerHeight() / 2) - ($element.outerHeight() / 2)));
                    break;
                case "MiddleRight":
                    x = ($parentElement.offset().left + $parentElement.outerWidth() + settings.hPadding);
                    y = (($parentElement.offset().top + ($parentElement.outerHeight() / 2)) - ($element.outerHeight() / 2));
                    break;
                case "BottomLeft":
                    x = ($parentElement.offset().left - $element.outerWidth() - settings.hPadding);
                    y = ($parentElement.offset().top + $parentElement.outerHeight() + settings.vPadding);
                    break;
                case "BottomCenter":
                    x = (($parentElement.offset().left + ($parentElement.outerWidth() / 2)) - ($element.outerWidth() / 2));
                    y = ($parentElement.offset().top + $parentElement.outerHeight() + settings.vPadding);
                    break;
                case "BottomRight":
                    x = ($parentElement.offset().left + $parentElement.outerWidth() + settings.hPadding);
                    y = ($parentElement.offset().top + $parentElement.outerHeight() + settings.vPadding);
                    break;
            }
        } else {
            switch (settings.position) {
                case "TopLeft":
                    x = ($parentElement.offset().left + settings.hPadding);
                    y = ($parentElement.offset().top + settings.vPadding);
                    break;
                case "TopCenter":
                    x = ($parentElement.offset().left + (($parentElement.outerWidth() / 2) - ($element.outerWidth() / 2)));
                    y = ($parentElement.offset().top + settings.vPadding);
                    break;
                case "TopRight":
                    x = ($parentElement.offset().left + ($parentElement.outerWidth() - $element.outerWidth()) + (-settings.hPadding));
                    y = ($parentElement.offset().top + settings.vPadding);
                    break;
                case "MiddleLeft":
                    x = ($parentElement.offset().left + settings.hPadding);
                    y = ($parentElement.offset().top + (($parentElement.outerHeight() / 2) - ($element.outerHeight() / 2)));
                    break;
                case "MiddleCenter":
                    x = ($parentElement.offset().left + (($parentElement.outerWidth() / 2) - ($element.outerWidth() / 2)));
                    y = ($parentElement.offset().top + (($parentElement.outerHeight() / 2) - ($element.outerHeight() / 2)));
                    break;
                case "MiddleRight":
                    x = ($parentElement.offset().left + ($parentElement.outerWidth() - $element.outerWidth()) + (-settings.hPadding));
                    y = ($parentElement.offset().top + (($parentElement.outerHeight() / 2) - ($element.outerHeight() / 2)));
                    break;
                case "BottomLeft":
                    x = ($parentElement.offset().left + settings.hPadding);
                    y = ($parentElement.offset().top + ($parentElement.outerHeight() - $element.outerHeight()) + (-settings.vPadding));
                    break;
                case "BottomCenter":
                    x = ($parentElement.offset().left + (($parentElement.outerWidth() / 2) - ($element.outerWidth() / 2)));
                    y = ($parentElement.offset().top + ($parentElement.outerHeight() - $element.outerHeight()) + (-settings.vPadding));
                    break;
                case "BottomRight":
                    x = ($parentElement.offset().left + ($parentElement.outerWidth() - $element.outerWidth()) + (-settings.hPadding));
                    y = ($parentElement.offset().top + ($parentElement.outerHeight() - $element.outerHeight()) + (-settings.vPadding));
                    break;
            }
        }

        // Position Element
        if (settings.animate) {
            if (callback) {
                $element.show().animate({ left: x, top: y }, settings.animateLength, callback(x, y));
            } else {
                $element.show().animate({ left: x, top: y }, settings.animateLength);
            }
        } else if (settings.fadeIn) {
            if (callback) {
                $element.hide().css({ left: x, top: y }).fadeIn(settings.fadeInLength, callback(x, y));
            } else {
                $element.hide().css({ left: x, top: y }).fadeIn(settings.fadeInLength);
            }
        } else {
            $element.css({ left: x , top: y });

            if (settings.show) {
                $element.show();
            }

            if (callback) {
                callback(x, y);
            }
        }

    });
};

// Center
// Author: Sam Striano
// Date  : 12/14/2010
jQuery.fn.center = function (parentElement) {
    /// <summary>
    ///     Centers an element over another element.
    /// </summary>
    /// <param name="parentElement" type="jQuery" optional="false">
    ///     The jQuery object to center the selected element(s) on.
    /// </param>
    var $element = $(this),
        $parentElement = (typeof parentElement === "string") ? $(parentElement) : parentElement;

    return this.each(function () {
        $element.align($parentElement, { animate: false, outsideAlign: false, position: "MiddleCenter" });
    });
};

// MakeSameSize
// Author: Sam Striano
// Date  : 12/14/2010
jQuery.fn.makeSameSize = function (parentElement) {
    /// <summary>
    ///     Makes the selected element(s) size the same as the parent element.
    /// </summary>
    /// <param name="parentElement" type="jQuery" optional="false">
    ///     The jQuery object.
    /// </param>
    /// <param name="parentElement" type="String" optional="false">
    ///     The selector string of the parent element.
    /// </param>
    var $parentElement = (typeof parentElement === "string") ? $(parentElement) : parentElement;

    return this.each(function () {
        $(this)
            .css({
                height: $parentElement.innerHeight() + "px",
                width: $parentElement.innerWidth() + "px"
            });
    });
};