Go Back   AnandTech Forums > Software > Programming

Forums
· Hardware and Technology
· CPUs and Overclocking
· Motherboards
· Video Cards and Graphics
· Memory and Storage
· Power Supplies
· Cases & Cooling
· SFF, Notebooks, Pre-Built/Barebones PCs
· Networking
· Peripherals
· General Hardware
· Highly Technical
· Computer Help
· Home Theater PCs
· Consumer Electronics
· Digital and Video Cameras
· Mobile Devices & Gadgets
· Audio/Video & Home Theater
· Software
· Software for Windows
· All Things Apple
· *nix Software
· Operating Systems
· Programming
· PC Gaming
· Console Gaming
· Distributed Computing
· Security
· Social
· Off Topic
· Politics and News
· Discussion Club
· Love and Relationships
· The Garage
· Health and Fitness
· Merchandise and Shopping
· For Sale/Trade
· Hot Deals with Free Stuff/Contests
· Black Friday 2014
· Forum Issues
· Technical Forum Issues
· Personal Forum Issues
· Suggestion Box
· Moderator Resources
· Moderator Discussions
   

Reply
 
Thread Tools
Old 02-26-2013, 11:36 PM   #1
TakBaseTech
Junior Member
 
Join Date: Jan 2013
Location: Talay
Posts: 17
Question jQuery Modal Window / Modal Dialog / Lightbox options

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?

Last edited by TakBaseTech; 03-07-2013 at 01:21 AM. Reason: fixed link
TakBaseTech is offline   Reply With Quote
Old 02-27-2013, 01:41 AM   #2
Markbnj
Moderator
Programming
 
Markbnj's Avatar
 
Join Date: Sep 2005
Posts: 12,392
Default

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/...ightbox-clone/
__________________
Everytime I try to tell you, the words just come out wrong

**
Some meaningless scribbling of no account

The 4th Realm

Arts and Letters Daily - Get some culture
Markbnj is offline   Reply With Quote
Old 02-27-2013, 10:16 PM   #3
TakBaseTech
Junior Member
 
Join Date: Jan 2013
Location: Talay
Posts: 17
Default

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.
TakBaseTech is offline   Reply With Quote
Old 02-27-2013, 11:14 PM   #4
GregGreen
Golden Member
 
GregGreen's Avatar
 
Join Date: Dec 2000
Location: Durham, NC
Posts: 1,631
Default

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.
__________________
LOL HY!
GregGreen is offline   Reply With Quote
Old 03-07-2013, 12:49 AM   #5
TakBaseTech
Junior Member
 
Join Date: Jan 2013
Location: Talay
Posts: 17
Default

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
Quote:
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.

Last edited by TakBaseTech; 03-07-2013 at 05:28 AM. Reason: added new content
TakBaseTech is offline   Reply With Quote
Reply

Tags
jquery, modal

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 09:00 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.