Lightbox Macro
Last modified by Vincent Massol on 2024/11/19 16:12
Description
The existing lightbox has many limits, is difficult to use, lacks extensibility and the code is not clean. We need a light, user-friendly lightbox with a better look.
Use Cases in XWiki
We should be able to use a lightox to easily manage:
- Users & Groups features (creating a new user / group, adding a user to a group etc)
- Photo Galleries (browsing photos in a lightbox could be an interesting, useful feature)
- Embedded media types (video and audio files, swf movies etc)
- Ajax forms (for better usability)
- Application features (like Blog posts for instance)
- Many other possible situations
Proposed Implementation
There are two possible approaches to the problem.
Clean-up & improve the existing lightbox
| PROS | CONS |
|---|---|
| The current lightbox is already integrated in users & groups management and...it works so far. | The code is messy. There is still a lot of js + css +velocity + html in the same place. The css has some weird hacks for ie and mostly don't work as they should. |
| Very limited in terms of features. It doesn't support skins (the css only allows different colors or rounded / square corners). And, IMO it looks ugly. | |
| It is difficult to use. To use it for users & groups management I had to modify the code and add some hacks I'm not very happy with. | |
| It is not at all extensible (or very hard) and this would take a lot of time. |
My opinion is that the existing lightbox was good so far, but it's time for something better. This leads us to second choice.
Use an existing lightbox
There are many lightboxes available on the Internet, but among the ones that are based on prototype (and scriptaculous, for cool effects) the best I've seen are:
Below I will try to sum-up some of their most used features.
| Prototype Window | ModalBox | LightWindow |
|---|---|---|
| Small (62 k) | Very small (22k) | Small (63k) |
| Resizable | Resizable | Resizable |
| Movable | Fixed | Fixed |
| Fully skinnable (separate images + css) | Customizable through css. | Not easy to theme. |
| Supports modal windows. | Same. | Same |
| Supports all visual Effects of Scriptaculous | Supports SlideDown and SlideUp transitions. | Customizable transition handlers . |
| Supports offline + Ajax content. | Same. | Same. |
| Has pre-build confirm, altert and info dialogs. | Doesn't have. | Doesn't have. |
| Supports multi-modal windows. | Doesn't. | Doesn't. |
| Support to save in cookies the windows status (location - since is movable, open, close, hidden etc.) | Doesn't. | Doesn't. |
| Has a tooltip add-on. | Doesn't. | Doesn't. |
| Doesn't have a photo slideshow included. | Doesn't have a photo slideshow integrated. | Has a photo slideshow integrated. Also supports multi-galleries. |
| Doesn't support media files. | ? (not sure how) | Supports all known / used media files. |
| Works on Safari, Camino, Firefox and IE6. | Works on IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 and 9. | Works on Windows Firefox/IE6/IE7/Safari3/Opera & Mac Firefox/Safari/Opera/Netscape. |
| Has a svn, a forum to post bugs / requests for features. Releases are often. | Is a Google project, with frequent releases and bug tracking. | Has a forum (was down when I checked it). |
| MIT licence | MIT licence | MIT licence. |
