boxplus: a lightweight pop-up window engine
Description
boxplus is an ultimate lightweight pop-up window implementation (commonly known as lightbox) that can show images, video and other multimedia content including custom HTML content. boxplus exhibits a high degree of personalization with features like thumbnail bar of images inside the lightbox for fast navigation between items, image captions supporting HTML, auto-fit content and auto-center as well as several themes mimicking various popular lightbox implementations. boxplus for Joomla adds a thin layer around boxplus client-side JavaScript code to expose its functionality in the Joomla framework. Since boxplus is written entirely using the Joomla-native MooTools framework, it incurs virtually no extra overhead and you should not expect script conflicts, which are likely to arise with other plug-ins built on top of different JavaScript libraries.
This page discusses boxplus for MooTools, a stand-alone lightbox script as well as a self-contained Joomla plug-in. Some of the particulars may differ from those of boxplus for jQuery, which is shipped with sigplus.
Features
- Supports all modern browsers, including Firefox (≥ 2), Internet Explorer (≥ 7), Chrome and Opera.
- Displays a wide range of content types. Supports images, video, Flash animations, inline and external HTML (iframe), PDF documents, etc.
- Supports captions. Each image or content item can be assigned a title and a caption, which can make use of HTML tags.
- Pop-up window centers vertically and horizontally. Vertical centering takes into account any caption text. The pop-up window is re-centered when the user scrolls down or across the page, or resizes the browser window.
- Various navigation controls. You can navigate to the next or previous image with the mouse or the keyboard (left arrow and right arrow), or use the thumbnail bar at the bottom to jump to any specific item, press HOME to jump to the first and END to the last content item.
- Fit to browser window. Large images are automatically reduced to fit available browser window space. The pop-up window can be expanded with the enlarge control in the upper right corner to view the image in its original size.
- Configurable layout. Panel containing captions and navigation icons can be aligned to bottom, right or left of content being displayed.
- Asynchronous operation with no dead time delay. The script launches as soon as the document structure is available, even if some images are still being downloaded. Only those content items are retrieved that are shown to the visitor.
- Easily customizable appearance using valid CSS. All styling is done using cascading style sheet rules, which allows for simple theming.
- Small network footprint. Even while boxplus has many extra features, its compressed size is comparable to Slimbox 2, which claims to be the smallest lightbox script available for the MooTools framework (with a footprint of 4 KB).
- 100% CSS and JavaScript. The implementation uses MooTools Core (≥ 1.2, automatically included in the document head by Joomla) and needs no additional dependencies to work.
See the boxplus demo page for an on-line demonstration of some of the features boxplus has to offer.
Solving common problems
Usually, boxplus is not used in isolation but as part of a site. Page template CSS style sheet files are a common cause of layout problems with boxplus. Some agressive templates may apply unusual properties to certain elements globally. As HTML elements boxplus uses are inserted below the body element in the HTML DOM tree, boxplus is affected by rules with global scope. For example, if a template sets z-index:1 with a global element selector img, it will make all absolutely positioned images cover other absolutely positioned elements, hiding boxplus overlay navigation controls, the enlarge/shrink control as well as thumbnail images inside the pop-up window. To remedy the issue, any such global declarations should be reset before boxplus styles would be applied. In order to do so, paste the contents of reset.css at the end of your template CSS file. reset.css will clear most unusual style applications but will only affect boxplus due to the local selector scoping #boxplus.
Comparison
The following table compares boxplus to other lightweight pop-up window engines.
| boxplus | Slimbox | Slimbox2 | prettyPhoto | FancyBox | |
| Version | 0.9 | 1.58 | 2.04 | 3.0 | 1.3.4 |
| JavaScript library | MooTools | MooTools | jQuery | jQuery | jQuery |
| Minified script size [bytes] | 14890 | 4681 | 4123 | 21240 | 15624 |
| Multiple themes |  |
 |
|
|
|
| Displays images | |
|
|
|
|
| Fit-to-window for large images | |
|
|
|
|
| Thumbs in pop-up window for fast navigation | |
|
|
|
|
| Wide-screen arrangement [*] | |
|
|
|
|
| Panel for image background information | |
|
|
|
|
| HTML in image captions | |
|
|
|
|
| Displays custom HTML content | |
|
|
|
|
| Displays Flash content and video | |
|
|
|
|
| Displays HTML5 video | |
|
|
|
|
| Displays Picasa web albums | |
|
|
|
|
| Multiple languages | |
|
|
|
|
| Multiple configurations on a single page | |
|
|
|
|
| Multiple themes on a single page | |
|
|
|
|
| Caption and metadata script callbacks | |
|
|
|
|
| Browser compatibility |      |
     |
|
|
|
If you find that data in the table is inaccurate, please e-mail the developer and the table will be updated.
License and status
boxplus is licensed under the GPL. It is a non-commercial project with a goal to provide a lightweight, yet versatile tool to display images, video and other multimedia content on a web page. As such, it depends on donations for further development. Especially if you use boxplus in a commercial environment, you are strongly encouraged to make a donation.
Download
The latest public release of boxplus is available for download from JoomlaCode. The files in the subfolders css and js have no external dependencies (apart from MooTools Core); they can be used stand-alone.