jQuery Modal Window / Modal Dialog / Lightbox options

[TakBaseTech]

My journey down the rabbit hole of non-professional website development--heretofore via HTML 5, CSS3 and JavaScript that quickly begot jQuery--has led me to modal windows. When they first popped onto the scene, I found them jarring. Now, I both enjoy and expect them in certain situations.

At the very least, I want to view images without using a new tab or window and without needing browser buttons or links to return to the thumbnail area. At the most, I want to view entire thumbnail galleries and accompanying text in a modal window. For the latter, the jury is still out; I'll need to see how it fits in my website's flow.

Additional Requirements

• jQuery compatibility
• Background overlay
• Fade-in/fade-out of the modal window and background overlay upon activation/close with fading speed options
• Next/previous navigation indicators within the image that appear/disappear instantly on hover over the corresponding right/left half of the image
• Close button
• Modal window closes when users click outside it
• Modal window closes when the ESC key is pressed
• CSS styling, especially of modal window borders, overlay, navigational indicators, close button and loading indicators (what appears where the image will load while it is loading)

Further Considerations

• Less code and bandwidth is better
• Less processing overhead and computational time is better
• Priority given the latter; will sacrifice a larger data requirement for quicker responsiveness
• Less hacking and coding is better; I am neither a professional nor experienced coder

Neither Here Nor There

• For display while the image is loading, I'm going to create a black background with centered, white text that says "loading." I find this much less obtrusive than the animated, circular indicators that I associate with slow computing.

jQuery plugins and prominent considerations:

jQueryUI
Although unwanted functionality of this feature-rich addition can be removed with the custom download builder, the minified JavaScript for the dialog component--used to create modals--is 72 KB. It appears that no animations beyond a scale effect are built into the dialog component, so the effect core and fade effect may be required for fading, bringing the minified JS total to 85 KB. Can I use the original jQuery fade instead?

fancyBox2
The JS is 47 KB. The JS ".pack" (I'm not familiar with this extension) is 23 KB. Adding what they call "helpers"--additional JS for buttons, media and thumbnails--will add 3, 6 and 4 KB, respectively, as well as three separate JS files.

ColorBox
The minified JS is 11 KB.

SimpleModal
The minified JS is 10 KB.

Reveal
The JS (unminified?) is 5 KB.

Slimbox2
The minified JS is 4 KB.

Is there a clear winner among these plugins? Do you have any other recommendations?

 

[Markbnj]

I don't have experience with all of them. Last one I used was prettyPhoto, and it seemed to do a good job.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

 

[TakBaseTech]

Thanks for the suggestion, Mark.

Like the others, prettyPhoto appears to do everything I need. It weighs in at 22 KB, compressed.

In ascending order of smallest size, I'm going to try each solution if the previous one can't be bent to my will. I want to avoid excessive tinkering, so hopefully I'll nail it on my first try with Slimbox2.

 

[GregGreen]

I thoroughly recommend Fancybox version 1 (not version 2 that you linked to -- http://fancybox.net/ instead of the link you posted). It is one of only two jQuery plugins I will use instead of writing my own. Fancybox 1 is very easy to use (and free -- I don't know if they still charge for Fancybox 2 now, but they used to).

The minimized file (they refer to it as a "pack" file, which you want to use as it is the "compressed" version) is 15kB, plus another 15ish kB for the associated graphics (which you can customize out, although this might be over your skill level?) and 7kB for easing.

I also would recommend the Modal portions of Twitter's Bootstrap. It's modularized so you can custom configure it on the website to only download the portions you need. JS works out to around 4kB, 2kB of CSS and 9-13kB of sprited icons that they apparently dont split out based on what modules you download .

Side Note: Yes, Bootstrap kind of sucks when you are using the entire framework as a basis for your site, but if you are using the entire framework instead of ripping out the bits and pieces that you need, you are using it wrong.

 

[TakBaseTech]

Thanks for the suggestions, Greg.

I've updated my fancyBox link to the second version. It's free for non-commercial use. Although claiming to be "completely rewritten," it doesn't seem to have added much to fancyBox1 that I need. I'd still rather use a plugin that is actively supported, so I will try the second version first.

Update

I as delve deeper into the options of these plugins and think more about the design of my site, my requirements are crystallizing.

Slimbox2

You can also change the fonts for the caption and the image counter, the width of the border around the lightbox and the caption, the margins in the caption and every color. You must not add new CSS rules.

From the official instructions, emphasis mine. That's not enough flexibility for me, especially going forward.

Reveal
This requires the most coding from scratch, as even basic navigation buttons are not included in the plugin. In its initial form, it's more akin to a simple modal alert than anything else. However, this approach may ultimately be easier than learning how to significantly modify a feature-rich, complex plugin.