Trying to set the position of the fancy box

3,183 views
Skip to first unread message

Prufrock

unread,
Apr 21, 2009, 8:51:26 AM4/21/09
to fancybox
I want the fancy box to pop up in one location and stay there. Even if
the user attempts adjust the browser.
any ideas? I assume that it can be changed by manipulating the css-
but I just can't figure it out.
Any help would be greatly appreciated.

JFK

unread,
Apr 21, 2009, 5:45:42 PM4/21/09
to fancybox
so you want to mess with the script, eh? ....
this solution applies to jquery.fancybox-1.2.1.js file:

1. open this file with your editor (I would recommend you to back-up
the file first)
2. search for the line 232 and change 'left':itemLeft, for your new
left position like this 'left':'50px',
3. in the line 233 change 'top':itemTop, for your new top position:
'top':'10px',
4. search the line 367 with
$("#fancy_outer").css('left', (($("#fancy_outer").width() + 36) .....
bla bla bla
and leave only
$("#fancy_outer").css('left');
5. in the line 368 with
$("#fancy_outer").css('top', (($("#fancy_outer").height() + 50) ...
bla bla bla
leave only
$("#fancy_outer").css('top');

be careful to respect the syntax and don't delete or add more than
these lines
check it out: http://jquery.diaz-cornen.com/fancybox/index_fix.html
works in IE6 too

Anthony

unread,
Feb 2, 2011, 7:36:57 PM2/2/11
to fanc...@googlegroups.com
Is there any way to do this by passing options/variables into the
function call or does the script source still need to be modified? On
some pages I want the fancy box to function normally but on specific
elements I want to change the positioning of the popup.

Thank you in advance!

Tony Alfrey

unread,
Feb 2, 2011, 7:45:12 PM2/2/11
to fanc...@googlegroups.com

Insert into the body to override the usual fancybox css before you fire
fancybox.

<style type="text/css"> #fancybox-wrap {
top: 5px !important;
left: 5px !important;
}
</style>


--
Tony Alfrey
tonya...@earthlink.net
"I'd Rather Be Sailing"

circlecube

unread,
Feb 23, 2011, 6:11:47 PM2/23/11
to fancybox
Is there a way to do this dynamically though. I have a bunch of
fancybox links on one page and I want them to show in different places
depending on their location. Could the link contain a querystring or
attribute that would get translated into position?

Something related to this perhaps?
http://groups.google.com/group/fancybox/browse_thread/thread/641a36ea1b02df24

But I don't see any setting for adjusting the position, just css.

Thanks!
> tonyalf...@earthlink.net

eric.deckerspence

unread,
Mar 4, 2011, 4:27:55 AM3/4/11
to fancybox
This is probably not the best idea, but you could try having a bunch
of different ids (ie. #fancybox-wrapOne, #fancybox-wrapTwo, etc.) with
different positioning. Add an onclick event to the link and use jQuery
or just Javascript to change the ID to the one with the appropriate
styles after the fancybox loads. Certainly not the most elegant, but
it doesn't seem like there's any other option currently available.

On Feb 23, 6:11 pm, circlecube <eva...@gmail.com> wrote:
> Is there a way to do this dynamically though. I have a bunch of
> fancybox links on one page and I want them to show in different places
> depending on their location. Could the link contain a querystring or
> attribute that would get translated into position?
>
> Something related to this perhaps?http://groups.google.com/group/fancybox/browse_thread/thread/641a36ea...

eric.deckerspence

unread,
Mar 4, 2011, 4:57:26 AM3/4/11
to fancybox
Any chance of an updated version of this guide for 1.3+, JFK?

On Mar 4, 4:27 am, "eric.deckerspence" <eric.deckerspe...@gmail.com>
wrote:

JFK

unread,
Mar 5, 2011, 3:21:49 PM3/5/11
to fancybox
that post is almost 2 years old
I am not particularly fan of modifying the original js or css files
and think your best option is to use custom css rules to override the
default css rules as suggested by Tony

On Mar 4, 1:57 am, "eric.deckerspence" <eric.deckerspe...@gmail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages