enavu webdevmania tutsvalley psdestination
visit the enavu network
28 Comments Article Title Overlay Article Title

Top 10 jQuery Modal Box Plugins

A list of the top 10 Modal Box jQuery plugins.

http://colorpowered.com/colorbox/

 
Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
 
Lightweight: less than 9KB of JavaScript.
 
Appearance is controlled through CSS so users can restyle the box.
 
Can be extended with callbacks & event-hooks without altering the source files.
 
Completely unobtrusive, options are set in [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

A list of the top 10 Modal Box jQuery plugins.

clip_image002

http://colorpowered.com/colorbox/

     
  • Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
  •  

  • Lightweight: less than 9KB of JavaScript.
  •  

  • Appearance is controlled through CSS so users can restyle the box.
  •  

  • Can be extended with callbacks & event-hooks without altering the source files.
  •  

  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  •  

  • Preloads background images and can preload upcoming images in a photo group.
  •  

  • Written in jQuery plugin format and can be chained with other jQuery commands.
  •  

  • Generates W3C valid XHTML and adds no JS global variables & passes JSLint.

clip_image004

http://www.clearbox.hu/index_en.html

     
  • Multi-language support and more user settings
  •  

  • New animation called “grow”
  •  

  • Clearbox works BEFORE the page is fully loaded
  •  

  • Multi-line comment to any content
  •  

  • Rotate images, fancy OSD
  •  

  • Create galleries for Flash, Quicktime, Windows Media, HTML, inner content, etc.

clip_image006

http://flowplayer.org/tools/overlay.html

     
  • The overlay can contain any HTML and the whole thing can be styled with CSS.
  •  

  • This tool uses a simple and natural syntax and has an advanced programming API. You can extend it with callback methods or with your own plugins.
  •  

  • Auto-hiding functionality for next/prev links and for the image description element.
  •  

  • Automatic preloading of the images.
  •  

  • Standards-based syntax. Works even on browsers without JavaScript enabled.

clip_image008

http://fancybox.net/

     
  • Adds a nice drop shadow under the zoomed item
  •  

  • Groups related items and adds navigation (preloades images)
  •  

  • Can display images, inline, ajax and iframed content
  •  

  • Customizable through settings and CSS
  •  

  • Support fancy transitions by using easing plugin

clip_image010

http://www.shadowbox-js.com/index.html

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

clip_image012

http://leandrovieira.com/projects/jquery/lightbox/

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

clip_image014

http://famspam.com/facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

clip_image016

http://nyromodal.nyrodev.com/

     
  • Ajax Call, Ajax Call with targeting content, Ajax call can change the modal size
  •  

  • Single Image
  •  

  • Images Gallery with arrow navigating
  •  

  • Gallery with any kind of content
  •  

  • Form, Form in iframe, Form with targeting content, Form with file upload Form with file upload with targeting content
  •  

  • Dom Element
  •  

  • Manual Call
  •  

  • Iframe
  •  

  • Error handling
  •  

  • Modal will never goes outside the view port
  •  

  • Esc key to close the window
  •  

  • Customizable animation, Customizable look
  •  

  • Modal title
  •  

  • Ability to block only one element
  •  

  • W3C valid HTML (Transitionnal)

clip_image018

http://www.intelliance.fr/jquery/imagebox/

simple limited lightbox

clip_image020

http://www.pirolab.it/pirobox/

jQuery piroBox plugin is simple images gallery, realized with jQuery library

clip_image022

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

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. 10 Amazing jQuery Plugins To Improve Your Forms
  2. How to make a completely reusable jquery modal window
  3. 10 best jQuery gallery and slider plugins
  4. 11 menu and navigation jquery plugins you don't want to miss
  5. jQuery and Ajax :) the simple designer way

Did you absolutely LOVE this article... share it!

Comments

  • Good article!
    Is it better to use the 2nd snippet over the absolute positioning? why?

  • thanks for sharing, but they are “classics”, any more advanced snippets you could share?

  • 1st one: you have to use the text-align fix to use this one on internet explorer..

  • @Mantish – Absolute positioning should be evaded at all costs, it can cause cross browser issues, also when the content fluctuates you will find yourself having problems

    @pol I am sorry that you didn’t find these as advanced techniques, as an educator i try to cover basics rather than techniques people wouldn’t know where and when to use, I am sure I will write a new article one of these days covering more advanced techniques as i encountered them

    @af sorry but i have NEVER had problems with the margin:0 auto in any ie version…

  • I hate it when sites use #8. Makes the browser look unresponsive when I click on a link, and also makes it nearly impossible to navigate using the tab key.

    Also, according to https://developer.mozilla.org/en/CSS/opacity , you don’t need that progid thing for #6; “alpha(opacity=xx)” (including quotes) is sufficient.

  • Speaking of things I hate, I also get annoyed when blogs auto-substitute straight quotes for curly quotes. I can see how it can be nice in some situations, but for an article about code…

  • for outlines i prefer using overflow:hidden. that way u still have the outlines without it expanding off the page.

  • @Pikaduded No. 1 I suppose #8 is an opinion that i cant argue with smile don’t use the code. And as for #6 it works smile, and the curly quotes look better :D

  • Good collection css tips. Thanks

  • amazing really cool fix for IE 8 too…many thanks….i’m bookmarking this.. smile

  • You’ve got some great tips here, thanks for sharing! I’ll be back to your blog soon to check up on your future posts

  • very usefull snippets. Thanks.

  • Very useful snippets, thank you.

  • Hey… really that’s a cool collection of snippets..

  • Just a couple of notes:

    #8 – Outline should not be readily removed because it’s an accessibility issue. And if you’re having problems with outlines on elements that you’re using image replacement with – you’re doing it wrong. The image replacement technique should include overflow:hidden; and will no longer present this problem. Better to do that than to eliminate an element of accessibility that is often used…

    #10 – Just plain wrong; !important does not override inline styles and should be used sparingly otherwise. Specificity states that inline styles have the highest value. Proper hierarchy should always be observed with selectors and more often than not !important is not even needed.

  • Great snippets – have to try your fixed footer solution soon. Made my own, but it sometimes fails if the page content is too low. Love to see box-shadow in action.

  • Very good tips & roundup Angel.

    Especially he cross-browser opacity & rounded corner tip.

    Good, elegant code, with good explanations.
    Thanks.

  • I think that students have to ease their troubled minds, because the custom writing services will help to accomplish the comparison essay writing of supreme quality.

  • Well worth the read. Thanks for sharing this information. I got a chance to know about this.

  • Not that I’m totally impressed, but this is a lot more than I expected for when I stumbled upon a link on Stumble Upon telling that the info is quite decent. Thanks.

  • Some great CSS spinets for beginners…Now if only IE could stop being a pain in the rear and conform to CSS3 standards.

  • thank’s for sharing this!it’a great post!

  • Thanks for the information you provided. It would be great if got more post like this. Very interesting!

  • I’m extremely impressed with your creating capabilities and with the structure on your weblog. Is this a paid concept or did you customise it yourself? Either way retain up the great high quality composing, it is unusual to see a good blog prefer this one today.

  • We purchased it and then customized it, it’s pretty amazing we know.

    Thanks!

  • Very nice, thanks

  • Great work, thank you

  • very usefull jQuery plugins all plugins are very useful for developer..

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting