How to position a fancybox based on an item that it called From

Question

I'm trying to figure out how to call Fancybox so that it appears next to the element (anchor tag) from which it was called.

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

I know I can position Fancybox with an OnComplete call, but then it jerks from the center to the destination.

Does anyone know how to encode a Fancybox call so that it opens, say, to the left or right of the item from which it was launched?

Any help is appreciated. Thanks!

Answer 1

This works fine:

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

I decided to override this fancybox method:

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

define customWidht, customHeight, customLeft, customTop depending on your case, can be dynamic or not.

Answer 3

Here is the plugin I wrote to the position elements. It has all kinds of positions, options.

You use it like this:

 $("#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" }); }); }; 

Answer 4

Another solution is to add the # fancybox-wrap div to the desired parent div and set the position in 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

My simple solution for relative position:

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