Calling Fancybox from a page inside an iframe

15279 views
Skip to first unread message

Armando Basile

unread,
Mar 5, 2010, 12:13:20 PM3/5/10
to fancybox
Hi all,
i trying to use fancybox but my page is loaded inside an iframe, so
when i open fancybox, it show under bottom of scree ( i need to scroll
down to see it). Iframe have scrolling="no" and height="1600".

Could you help me ?


JFK

unread,
Mar 9, 2010, 11:56:16 PM3/9/10
to fancybox

ikalatch

unread,
Mar 25, 2010, 11:39:22 AM3/25/10
to fancybox
I have the same problem: a page includes an iframe that is pretty long
and scrollable and inside that iframe I open a fancybox (which also
includes yet another iframe, but this is irrelevant here).
Fancybox calculates the center of the iframe inside which it has to
display itself and positions quite low on the screen because the
iframe is long.
I'd like it to be positioned in the center of the browser viewport
instead.
What I found to (somewhat) work is to use this callback when defining
the attributes of fancybox (using version 1.3.1):
'onComplete': function() {
$("#fancybox-wrap").css({
'top':'10px',
'left':'10px'
})}
It works - moves the fancybox where I want it inside the iframe, but
one problem is that it first shows it in the original position and
then repositions it which is mildly annoying.
I haven't found a good way to show it in the position I want it when
it first gets drawn. Replacing 'onComplete' with 'onStart' doesn't do
anything.
I guess one way would be to have somehow make it invisible on onStart
and then make it visible on onComplete when it has been repositioned.

Any suggestions would be appreciated!

JFK

unread,
Mar 25, 2010, 8:07:29 PM3/25/10
to fancybox
same

ikalatch

unread,
Mar 30, 2010, 1:40:29 PM3/30/10
to fancybox
I understand that it can not be displayed outside of the iframe - this
is obvious, but at least we should be able to easily position it
explicitly where we want it (towards the top in my case).
To turn the question around - forget about the iframe: Basically it
would be great if we had another two public attributes (X & Y
positions) that allow us to explicitly position the box when it's
first drawn - right now it gets always drawn in the center and while
it may work for most cases, it's not desirable in others (as we see in
the case of iframes). And, of course, a third option one similar to
centerOnScroll which keeps the box in this position on scrolling.
Actually, centerOnScroll can be renamed to something like
keepPositionOnScroll and it can easily accommodate both cases - when
it's centered and when it's explicitly positioned. So, for example, if
we have: XPos=10px, YPos=10px, keepPositionOnScroll=true, the box
would stay in that position (10px from the top and left) when the
vertical or the horizontal scrollbars of the viewport are moved.

On Mar 25, 8:07 pm, JFK <jfk.d...@gmail.com> wrote:
> samehttp://fancybox.net/faq


> see No. 3
>
> On Mar 25, 8:39 am, ikalatch <ikalatc...@neosaej.com> wrote:
>

> > I have the same problem: a page includes aniframethat is pretty long
> > and scrollable and inside thatiframeI open a fancybox (which also
> > includes yet anotheriframe, but this is irrelevant here).
> > Fancybox calculates the center of theiframeinside which it has to


> > display itself and positions quite low on the screen because the

> >iframeis long.


> > I'd like it to be positioned in the center of the browser viewport
> > instead.
> > What I found to (somewhat) work is to use this callback when defining
> > the attributes of fancybox (using version 1.3.1):
> >                     'onComplete': function() {
> >                             $("#fancybox-wrap").css({
> >                             'top':'10px',
> >                             'left':'10px'
> >                     })}

> > It works - moves the fancybox where I want it inside theiframe, but

JFK

unread,
Mar 30, 2010, 5:26:00 PM3/30/10
to fancybox
>I understand that it can not be displayed
>outside of the iframe -
>this is obvious,

Not that obvious.
http://fancybox.net/faq No. 3 also says : "....... You can modify
FancyBox source to suit your needs"
And a fellow fancybox fan did try modifying it to his needs ... see
below copy of the email (that I haven't tried it yet but it makes
sense to me)

>forget about the iframe: Basically it
>would be great if we had another

>two public attributes ...etc

let's the developer answer what he thinks of your suggestions

***copy of email **************
hi JFK it work, ive tried it using just a simple tweak, using the on
load
example $("a.sample").trigger("click");

here what ive done;

in my iframe page i called the parent window with the href e.g.
onClick="callMe('www.google.com')" or if pics "/images/pics.png"

and call this script in my parent page

<script type="text/javascript">
function callMe(site){
$(".sample").fancybox({
'width' : '97%',
'height' : '97%',
'href' : ''+site+'' //force href to change its site from the
call function in the iframe page
});
readyFancy() call to trigger the decoy link page
}
function readyFancy(){
$("a.sample").trigger("click");
}
</script>

in my parent html we right a decoy link (this one is from the example
on load fancybox)

<body>
<a href="#" class="sample"></a>
</body>

******

ikalatch

unread,
Mar 31, 2010, 9:48:46 AM3/31/10
to fancybox
Yep, this makes sense - the iframe calling a script on the parent page
which in turn renders the box in the parent's document.

On Mar 30, 5:26 pm, JFK <jfk.d...@gmail.com> wrote:
> >I understand that it can not be displayed
> >outside of the iframe -
> >this is obvious,
>

> Not that obvious.http://fancybox.net/faq No. 3 also says : "....... You can modify

drex

unread,
May 27, 2010, 2:08:37 AM5/27/10
to fancybox

100% it works, i was the one who emailed JFK iv already tried it in my
live projects.

Karmageddon

unread,
Jun 6, 2010, 3:50:09 AM6/6/10
to fancybox
THX to JFK!

IGrahamL

unread,
Dec 28, 2010, 8:00:42 AM12/28/10
to fanc...@googlegroups.com
Does anyone have a working example of this - to avoid me randomly experimenting for hours on end 

Was just about to reluctantly give up on fancybox as everything was going great until i realised the limitation of opening fancybox from within a iframe

JFK

unread,
Dec 29, 2010, 12:55:04 AM12/29/10
to fancybox
you may want to write drex (two comments above yours)

drex

unread,
Jan 13, 2011, 8:54:46 PM1/13/11
to fancybox

IGrahamL

unread,
Jan 14, 2011, 4:44:54 AM1/14/11
to fanc...@googlegroups.com
thanks for that, much appreciated
just as well your just a 'virtual m8' or I'd have to kiss you

bcavan

unread,
Feb 21, 2011, 9:50:33 AM2/21/11
to fancybox
Are image galleries (using the rel="group") possible with the provided
example?



On Jan 13, 8:54 pm, drex <ands...@gmail.com> wrote:
> you can download working example at this linkhttps://docs.google.com/leaf?id=0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDcz...

Matteo Santiloni

unread,
Aug 23, 2012, 8:01:31 AM8/23/12
to fanc...@googlegroups.com
Hi there, I've tried the code here: http://www.dallo.it/iframe/
but it doesn't work.

Can anyone help me? I really need this for a project.
thanks!

JFK

unread,
Aug 28, 2012, 12:35:24 AM8/28/12
to fanc...@googlegroups.com

John Rotondo

unread,
Sep 20, 2012, 10:12:42 AM9/20/12
to fanc...@googlegroups.com
The code works, but cross-domain pages seem to be a problem. I'm trying to implement our product into a client site and I'm getting the error " Refused to display document because display forbidden by X-Frame-Options."

Any ideas on how to allow the content to be rendered in the iframe?

Thanks,
John

JFK

unread,
Sep 23, 2012, 8:42:35 PM9/23/12
to fanc...@googlegroups.com
check http://stackoverflow.com/a/9393545/1055987
you could have found that using Google

richard rosen

unread,
Apr 2, 2013, 7:19:01 PM4/2/13
to fanc...@googlegroups.com
having someone write to another member about a problem doesn't do any of the rest of us any good who have the same problem

JFK

unread,
Apr 2, 2013, 9:14:10 PM4/2/13
to fanc...@googlegroups.com
@richard rosen : meaning?

Leonard Carter

unread,
Sep 30, 2013, 1:32:49 PM9/30/13
to fanc...@googlegroups.com
I am having a related problem. I got it so it works, but using the example shown at the end of this thread, FancyBox always opens the first image in the gallery, rather than the image that was clicked. Is there some way to make it open properly in the parent frame and show the image in the slideshow that was clicked in the same process? I can do one or the other, but not both.

Thanks very much,

Jamie

JFK

unread,
Sep 30, 2013, 8:18:23 PM9/30/13
to fanc...@googlegroups.com
@leonard Carte : could you post the code you are using (both jQuery and html)? (this post is very old and there has been so many changes in the meantime) could you also tell what version of fancybox?
Message has been deleted

sanath pixsence

unread,
Sep 24, 2017, 10:42:09 AM9/24/17
to FancyBox
Reply all
Reply to author
Forward
0 new messages