17

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.

Benbob
  • 13,876
  • 18
  • 79
  • 114
  • actually, it's a good question too. – mpen Oct 01 '10 at 02:05
  • i ran into the same decision not too long ago..ended up going with fancy box too because i needed iframe support, and they had a pretty website. – mpen Oct 01 '10 at 02:06
  • + 1 for fancybox. I just tried both fancybox and colorbox. Fancybox worked immediately but after about a half hour of playing with colorbox I still couldn't seem to work out some CSS quirks. – David Tuite May 18 '11 at 15:14
  • BTW, that comparison site is very old and plain wrong. Fancybox box does do iFrames, flash etc. – Benbob May 18 '11 at 22:36
  • Check out Magnific Popup (3KB gzipped) - http://dimsemenov.com/plugins/magnific-popup/ – Marvin3 May 24 '13 at 15:52

5 Answers5

11

i like colorbox

Matt Briggs
  • 41,224
  • 16
  • 95
  • 126
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.

nitesh sharma
  • 591
  • 2
  • 6
  • 16
1

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

A-Dubb
  • 1,670
  • 2
  • 17
  • 22
  • 1
    As far as I can tell there are no next/prev events for multiple images/divs. Fancybox supports transitioning between a group of overlays without closing the overlay. – Benbob Oct 01 '10 at 01:48
  • See http://jquerytools.org/demos/tabs/slideshow.html and http://jquerytools.org/demos/scrollable/gallery.html – Davi Lima Jan 09 '13 at 19:26
0

I've always had good luck with ThickBox, but I also haven't messed around much with any of the others. I like that one due to the ease of implementation. Sript.aculo.us for ProtoType has a lot of awesome features for overlays as well, but I sometimes feel like ProtoType is a bit clunky to work with... My personal opinion though.

However, I assume that most of the different implementations of overlays for jQuery use the same underlying functions in the framework, so it will probably be hard to see a real performace difference between say, ThickBox and LightBox. The real judge of performance would be the framework itself.

There are several sites out there that compare the various javascript frameworks. Here is one. I would start looking there and once you find a good framework then focus on which overlay add-on is easiest to implement and has the features you need. Sorry, I know that doesn't really answer your question, but at the least, hopefully it helps :)

regex
  • 3,585
  • 5
  • 31
  • 41
-1

Came across this question, trying to make a decision on what to go with on my new framework. Fancybox2 is now on a non commercial license so I really wanted to be convinced by colorbox or another alternative and save some pennies but I also came across this link http://jsperf.com/colorbox-vs-fancybox and it appears colorbox is not winning on the performance comparison - not by a long shot - although this comparison is using outdated versions of both

SwiftD
  • 5,769
  • 6
  • 43
  • 67