Sofware applications are so much more robust, and can be developed in less time when you are able to stand on the shoulder of giants! The ability to use a select group of the jQuery plugins to build Kynetx applications has been greatly enabled by the addition of the external resource directives. Do note that the full feature set of Facebox is not available because of Javascript cross-site scripting limitations. Here is a demo page using the Facebox jQuery plugin in a Kynetx app.

In short you will need to edit the last line of the facebox.js file, and then include both the Facebox Javascript & CSS file as external resources in your Kynetx application. Here are the detail steps:

  1. Download Facebox GitHub http://github.com/defunkt/facebox

  2. Edit the facebox.js file to pass in $KOBJ instead of jQuery.
    (function($) {
      $.facebox.loading()
      ...
    })($KOBJ);
    
    My thanks go out to Alex Olsen for this info which he provide in the Kynetx Developer Exchange.

  3. Edit both the facebox.js and facebox.css file to reflect the location of the images files. For example, here are the lines that I have changed:
    facebox.js
    loadingImage : 'http://kynetx.edorcutt.org/facebox/loading.gif',
    closeImage   : 'http://kynetx.edorcutt.org/facebox/closelabel.gif',
    <img src="http://kynetx.edorcutt.org/facebox/closelabel.gif" title="close" class="close_image" />
    
    facebox.css
    background:url(http://kynetx.edorcutt.org/facebox/b.png);
    background:url(http://kynetx.edorcutt.org/facebox/tl.png);
    background:url(http://kynetx.edorcutt.org/facebox/tr.png);
    background:url(http://kynetx.edorcutt.org/facebox/bl.png);
    background:url(http://kynetx.edorcutt.org/facebox/br.png);
    
  4. Upload the edited files and the required images files to a external web server.

  5. Add the following two use external resource files to the meta block of your Kynetx application. Needless to say the URLs will be different.
    use javascript resource "http://kynetx.edorcutt.org/facebox/kobj.facebox.js"
    use css resource "http://kynetx.edorcutt.org/facebox/facebox.css"
    

A demo Kynetx application which uses the Facebox jQuery plugin is available here and the source code for the Kynetx app is available at GitHub.

Enjoy!