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:
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
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.
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.
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:
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.
I believe you’ll find interesting and useful these articles too:
Want your job opening posted here? Go to Cool Design Jobs and submit it.