Possible Enhancement

[Jon]

Hello,

I recently started evaluating facebox and I ran across several things
that I wish were more automated. I know how to work around these but
I thought I would mention them to see what reaction there would be.
My current development platform is ASP.Net.

1. Default path.

I often have a site's directory structure that looks like:

./index.html
./jquery/jquery.js
./facebox/facebox.js

This directory structure of course causes the facebox border images as
well as the closeImage to break. This is obviously easy to fix by
specifying $.facebox.settings.closeImage but the border images seemed
to only be controllable from facebox.css.

It would be helpful to have a setting like closeImage that could be
used to specify a default path or something along that line.

2. Hide closeImage

I will likely use facebox to modally display a form and graphically a
close image in the lower right doesn't work for me. I can't just say
settings.closeImage=''. It is easy to work around by creating a
single pixel image and using that but it would be cleaner to be able
to specify closeImageHide=true.

3. Overlay.Click calls #facebox.close();

I would like to control when and where the user closes the modal
display by providing my own close-button. I can do housekeeping by
binding to the facebox's close event but I really do want to force the
user to click on a close button rather than a random part of the
screen.

It would be nice to be able to disable the overlay click-close action
or at least be able to hook into the facebox.close event and specify a
function which would return true or false to indicate whether the
close event should finish and close the facebox or remain open.

I can easily edit facebox.js and remove/modify the line that handles
the overlay click but it is always better if there is a way to do this
without manually touching the actual package.

I would like here comments or suggestions on how to handle this.
Thanks to the developers for maintaining this great package.

-Jon

[Chris Wanstrath]

On Thu, May 8, 2008 at 11:31 AM, Jon <jna...@gmail.com> wrote:

> 1. Default path.
>
> I often have a site's directory structure that looks like:
>
> ./index.html
> ./jquery/jquery.js
> ./facebox/facebox.js
>
> This directory structure of course causes the facebox border images as
> well as the closeImage to break. This is obviously easy to fix by
> specifying $.facebox.settings.closeImage but the border images seemed
> to only be controllable from facebox.css.
>
> It would be helpful to have a setting like closeImage that could be
> used to specify a default path or something along that line.

This has bitten me a few times too, it could be useful.

> 2. Hide closeImage
>
> I will likely use facebox to modally display a form and graphically a
> close image in the lower right doesn't work for me. I can't just say
> settings.closeImage=''. It is easy to work around by creating a
> single pixel image and using that but it would be cleaner to be able
> to specify closeImageHide=true.

Maybe a settings.footer = false option?

> 3. Overlay.Click calls #facebox.close();

>
> It would be nice to be able to disable the overlay click-close action
> or at least be able to hook into the facebox.close event and specify a
> function which would return true or false to indicate whether the
> close event should finish and close the facebox or remain open.

$.facebox.settings.overlay = false;

Or, try binding to 'facebox.close' and returning false. That might
not work for custom events, I'm not positive.

--
Chris Wanstrath
http://github.com/defunkt

[Jon]

Chris,

> Maybe a settings.footer = false option?

Yes, that would do the trick.

> Or, try binding to 'facebox.close' and returning false.  That might
> not work for custom events, I'm not positive.

I did try that since it seemed like a logical possibility. Although
the hook is at the correct place in the close sequence, i.e. the bound
function executes before the overlay and facebox is hidden the
returned "false" is not noticed.

Along these same lines I have moved from simple prototypes to trying
to integrate facebox into my actual web app and I have found some
difficulty which I think is related to z-index. I had to modify
facebox.css to get the overlay to display but for some reason the
actual facebox is not visible.

I think the visibility of the facebox might be related to the auto
sizing because I was able to modify the facebox CSS to force a width,
height, border, and background and then I did in fact see it. It
seems from that experiment that the facebox DIV is placed but it is
positioned as if it has zero width and height, i.e. the upper left
corner of the box is located in the center of the screen.

I still have to do some more experimentation though.

-Jon