jQuery Modal Window / Modal Dialog / Lightbox options

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

jQuery Modal Window / Modal Dialog / Lightbox options

Postposted on Tue Feb 26, 2013 11:37 pm

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?

fancyBox
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?
TakBaseTech
Gerbil In Training
 
Posts: 1
Joined: Tue Feb 26, 2013 11:31 pm

Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 0 guests