Which jquery overlay library is best? [closed]

Question

I've used lightbox and fancybox quite a lot but never really seen any reason to choose one over another. There are also a whole bunch I have not used like these http://planetozh.com/projects/lightbox-clones/ . The data on that page is quite old and in many cases incorrect.

Are there any good reasons to choose one over the others? Performance, API options, ease of customization etc.

This is more of a subjective question than a black and white one. I haven't seen any comparisons on this topic don't know where else to ask this.

edit After looking at the suggestions I think fancybox has the best api and it's only 5kb gzipped. http://fancybox.net/api Colorbox also looks very good.

Usability Tip: If you are think of capturing user input from a focus stealing overlay don't. What if the user needs to view information on the parent window to fill out your form, they are now trapped. Sometimes these popups are appropriate, but most of the time a slidedown block element would do the job better.

Answer 1

i like colorbox

Answer 2

i just checked colorBox and findout it has 1000 line of code to add a overlay. some times all i want is just open the content of a element (e.g. div)in center of page and i plugin like colorBox is definite overkill for these simple task.

best thing for such simple task (tooltip, overlay etc) is create your own plugIn:

(function($, global) {

  "use strict";

  $.fn.cOverlay = function(contentClass) {
    var contentItems = contentClass || '.cOverlay';
    var template = $('<div class="overlay"><div class="content"><div class="close">close</div></div></div>');
    var overlay = template.css({
      'position': 'absolute',
      'width': '100%',
      'height': '100%',
      'backgroundColor': '#555',
      'top': '0',
      'left': '0',
      'display': 'none'
    });
    var content = template.find(".content").css({
      'float': 'left',
      'backgroundColor': '#fff'

    });
    var close = template.find(".close");

    content.append($(contentItems));
    $(contentItems).show();

    this.click(function() {

      overlay.show();
      content.show();


      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;

      content.css('marginTop', height);
      content.css('marginLeft', width);

      return false;
    });

    content.click(function(e) {
      e.stopPropagation();
      return false;
    });

    close.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });


    overlay.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });

    $(window).resize(function() {
      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;
      content.css('marginTop', height);
      content.css('marginLeft', width);
    });

    $('body').append(template);
  };

})(jQuery, window);

$ = jQuery;

here is my version of simple overlay.

Answer 3

jQuery tools also has an overlay plugin. It's pretty decent.