Veneer

Example 1: Image with known dimensions.

$("example-1-trigger").addEvent("click", function() {
  veneer.open($("example-1-image"), 500, 434);
});

Example 2: Image with unknown dimensions.

$("example-2-trigger").addEvent("click", function() {
  veneer.open($("example-2-image"));
});

Example 3: Set of image, video, and arbitrary HTML.

var example_3 = (function() {
  var self = {};
  
  self.open = function(index) {
    self.close();
    veneer.open($("example-3-item-" + index));
    add_arrows();
  }

  self.close = function() {
    veneer.close();
    remove_arrows();
  }

  function add_arrows() {
    var left_arrow = new Element(".left_arrow", {html: "&larr;"});
    var right_arrow = new Element(".right_arrow", {html: "&rarr;"});
    left_arrow.inject(document.getElement("body"));
    right_arrow.inject(document.getElement("body"));

    position_arrow(left_arrow);
    position_arrow(right_arrow);

    observe_arrows(left_arrow, right_arrow);
    observe_overlay_and_remove_arrows();
  }

  function get_open_index() {
    return parseInt(document.getElement(".veneer_modal").getFirst().get("index"));
  }

  function observe_arrows(left_arrow, right_arrow) {
    right_arrow.addEvent("click", function() {
      self.open((get_open_index() + 1) % 3);
    });
    left_arrow.addEvent("click", function() {
      self.open((get_open_index() + 2) % 3);
    });
  }

  function observe_overlay_and_remove_arrows() {
    var overlay = document.getElement(".veneer_overlay");
    if (overlay) {
      overlay.addEvent("click", function(ev) {
        remove_arrows();
      });
    }
  }

  function remove_arrows() {
    var left_arrow = document.getElement(".left_arrow");
    var right_arrow = document.getElement(".right_arrow");

    if (left_arrow) {
      left_arrow.dispose();
    }
    if (right_arrow) {
      right_arrow.dispose();
    }
  }

  function position_arrow(arrow) {
    arrow.setStyle("top", ((window.getSize().y - arrow.getSize().y) / 2) + "px");
  }

  return self;
})();

$("example-3-trigger").addEvent("click", function() {
  e.stop();
  example_3.open(0);
  return false;
});

Veneer

Modal dialogs in JavaScript.

Example 1: Image with known dimensions.

Example 2: Image with unknown dimensions.

Example 3: Set of image, video, and arbitrary HTML.