[jQuery] Greybox Redux (Reworked)

[Benjamin Yu]

Hi, I just wanted to submit this rewrite of the greybox redux for
comment/publication. I did the following major changes:

1. Rewrote the internals to conform to jQuery's plugin conventions.
2. reduced 'global' variables into hidden settings, configurable by
passing an options dictionary.
3. added an option to disable users from closing the greybox via
clicking the overlay.
4. added a callback mechanism when a user closes the greybox.

The reworked files is attached to this email.

Cheers,
Ben

--
Blog: http://badpopcorn.com/
Homepage: http://foofiles.com/

/* Greybox Redux
 * Required: http://jquery.com/
 * Written by: John Resig
 * Based on code by: 4mir Salihefendic (http://amix.dk)
 * License: LGPL (read more in LGPL.txt)
 */

(function() {
  var GB_DONE = false;

  var settings = {
    close_img: "close.gif",
    height: 400,
    width: 400,
    animation: false,
    overlay_clickable: true,
    callback: null,
    caption: ""
  };

  jQuery.GB_show = function(url, options) {
    settings = jQuery.extend(settings, options || {});

    if(!GB_DONE) {
      jQuery(document.body)
        .append(
          "<div id='GB_overlay'></div>" +
          "<div id='GB_window'><div id='GB_caption'></div>" +
          "<img src='" + settings.close_img + "' alt='Close window'/></div>");
      jQuery("#GB_window img").click(jQuery.GB_hide);
      if(settings.overlay_clickable) {
        jQuery("#GB_overlay").click(jQuery.GB_hide);
      }
      jQuery(window).resize(jQuery.GB_position);
      GB_DONE = true;
    }

    jQuery("#GB_frame").remove();
    jQuery("#GB_window").append("<iframe id='GB_frame' 
src='"+url+"'></iframe>");

    jQuery("#GB_caption").html(settings.caption);
    jQuery("#GB_overlay").show();
    jQuery.GB_position();

    if(settings.animation)
      jQuery("#GB_window").slideDown("slow");
    else
      jQuery("#GB_window").show();
  }

  jQuery.GB_hide = function() {
    jQuery("#GB_window,#GB_overlay").hide();
    if(settings.callback && typeof(settings.callback) == 'function') {
      settings.callback.apply();
    }
  }

  jQuery.GB_position = function() {
    var de = document.documentElement;
    var w = jQuery("body").width();
    jQuery("#GB_window").css({
      width: settings.width+"px",
      height: settings.height+"px",
      left: ((w - settings.width)/2)+"px" });
    jQuery("#GB_frame").css("height",settings.height - 32 +"px");
  }

})();

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/