jQuery is a powerful tool and using it has become a sine qua non condition of web designing. It practically transforms a web page from dullness to an entertaining and catchy piece of work. For images we have the lightbox plugin in its many variations. It displays images using modal dialogs and it became very popular because it is very easy to implement. You have to bookmark this article cause you don’t want to forget using one of these plugins in your future designs.
Check the Lightbox 2 plugin for WordPress adapted by Rupert Morris.
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
Why you should be using ColorBox:
- Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
- 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.
- Released under the MIT License.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
- Customizable through settings and CSS
- Groups related items and adds navigation.
- If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
- Support fancy transitions by using easing plugin
- Adds a nice drop shadow under the zoomed item
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.
Lightview was built to change the way you overlay content on a website.
- Clean: Designed to compliment your content.
- Fast: Smart image preloading.
- Easy: Customizable without having to know CSS.
- Rounded: Adjustable rounded corners, no PNG images required.
- Smart: Content resizes to always fit on your screen.
- Slideshow: One button slideshow.
- Works on all modern browsers.
- ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
- ThickBox will resize images that are bigger than the browser window.
- ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
- ThickBox will hide form elements in Windows IE 6.
- ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
- Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
- ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).
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.
lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.
Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.
You can open the debug window if you want to see some debug outputs.
- Web Applications
- Web Desktops
- Web Sites
- Standalone Windows and Modal Dialogs
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.
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
GreyBox can be used to display websites, images and other content in a beautiful way.
Why use GreyBox:
- It does not conflict with pop-up blockers
- It’s only 22 KB!
- It’s super easy to setup
- It’s super easy to use
- You can easily alter the style as it is controlled through CSS
- Quick and elegant looking.
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content opens within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
- Outstanding, unconditional and free user support for both commercial and non-commercial users.
This will create a basic “lightbox” or “thickbox” interface using HTML masking.
Just download the plugin, unzip the files to the wp-content\plugins folder and activate the plugin in WordPress options.
Then, every time you want to use the Lightbox effect, just place a link to the image, and add the rel=”lightbox” attribute to it, in order to activate the effect when the link is clicked. You can also use rel=”lightbox-album” replacing album by a any keyword to group some pictures on an album
Picasa LightBox is a WordPress plugin that lets you easily add Picasa images to your WordPress posts and pages.
You can add Picasa images to your posts and pages without using any custom tags. Just click the Picasa Photos tab, browse your albums and select the picture you want to insert. Picasa LightBox does not download Picasa images to your server. Instead it displays them directly from Picasa. Picasa LightBox currently supports only public Picasa albums. Picasa LightBox inserts pure HTML code into your posts or pages so you can easily customize it to fit your needs.
After developing the plugin Wp ThickBox Integration, I decided to extend this features to “Lightbox” a cool jquery plugin to overlay images on the current page. In this case you can decide in the admin “images setting panel” if you want to “Open your images using Lightbox”.
Because Slimbox was designed to be 100% compatible with Lightbox, you can just replace the Lightbox 2 WordPress Plugin whit Slimbox Plugin and your Lightbox effects will work just as well as before.
This will add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.
Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design.
The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not fully true. The default CSS works fine, but most of time it’s a mix between required elements and optional. That mean you have to be very careful when editing it.
The other problem is the animation. That’s the worst point. I never found one plugin allowing to redefine easily the animations.
I tried to solve these problems with my plugin. I documented everything possible. The default CSS contains only optional rules. Without it, the plugin will works perfectly —but will also looks very sad. Regarding the animations, you can simply redefine them from A to Z. Thanks to the useful jQuery function like animate, fadeTo or the future enchant, it’s pretty simple.
Moreover, I added the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need.
- The script weight has decreased by 40%, now weighs only 15KB, (9KB Minified)
- There is a choice between three different styles (shadow,white or black)
- Slideshow option
- Multiple image set option
- PngFix for Internet Explorer 6
- Keyboard navigation: Right arrow [next], Left arrow [prev], ESC
- Previoue and Next buttons outside or inside the imageBox. .
- Broken Link Check
- Automatic repositioning of the image in the browser window
I believe you’ll find interesting and useful these articles too:
- 28 Useful JQuery Sliders You Need To Download
- 25 JQuery Menus Ready For Download
- All There Is To Know About HTML5 and CSS3