Awiolobby " The home of Tactical Articles and General Topics"

Demos:

FaceBox used to display an image:

Girl listening to music

Girl listening to music

FaceBox used to display an inline DIV:

View DIV with id="mydiv" on the page
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none".

Dynamic Drive

View DIV with id="mydiv" on the page

FaceBox used to display an external page (on same server) using Ajax:

View "External.htm" fetched via Ajax

View "External.htm" fetched via Ajax

FaceBox used to display an external page, plus apply a CSS class to the container (to further style it):

View "External.htm" fetched via Ajax, , further styled via ".thickstyle" CSS class.


"

View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class

Note the valid doctype declaration at the very top of the code, which is required unless your page already has one defined. Facebox consists of 2 .js files, 1 .css file, plus several images that make up its interface (such as round corner images). Download facebox1.1.zip, which consists of all those files:

* facebox1.1.zip
* facebox.css
* facebox.js
* jquery-1.2.2.pack.js
* Facebox images

By default the zip file should be unzipped to the same directory as the page using Facebox (a sub directory facefiles/ is added). If you wish to create a dedicated directory for the above zip file, you'll want to open up facebox.js and edit the images references near the top to point to the correct locations afterwards. The references inside the code of Step 1 should also be updated accordingly.

Step 2: All that's left now is to define your Facebox "thumbnail" links on the page, by giving the link a rel="facebox" attribute, plus set its href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your server, depending on the content type you wish to load. For example:

Girl listening to music

View "External.htm" fetched via Ajax

See the demos at the top of the page and their corresponding HTML code for more info.
Notes

You can directly load some content into the Facebox container via scripting, instead of the conventional path of setting up a thumbnail link. The method to call is:

jQuery.facebox('Some content to show')

You can directly close the Facebox container once it's open via scripting, instead of the default path of the user clicking on the "close" button. The method to call is:

jQuery(document).trigger('close.facebox')