|
|
All Lightbox JS clones
In the pages of my website, I use a script for the characteristic of visualizing bigger images clicking on thumbnails. In order to understand of what I am talking about, please click on the image below: 
This script, with all its variants, is used in Internet a lot, but actually there exists many variants, that provide for different features for different needs. In this page I report the results of my research on all Lightbox clones and their features. This research has been useful when developing a plugin for MODx, as I describe in this other post.
The first version of the script has been developed by Lokesh Dhakar and is named Lightbox. Currently there is also a version 2,
and from its creation it has been massively used by many web designers. Version 1 is still used by some website, because it does not depend by any JavaScript library, while version 2 depends by prototype and script.aculo.us. Author: Lokesh Dhakar. License: it is not clear about version 1, while versione 2 is licensed under Creative Commons
Attribution 2.5. | This script, extension of Lightbox JS,
adds the possibility to load whole p ages inside the Lightbox. It uses prototype. Author: Chris Campbell. License: Creative
Commons Attribution 2.5 | | Lighbox+
has been created from Lightbox JS version 1 and provides some feature of version 2, while avoiding to use external libraries. It allows to have image groups and resize the image in order to have it not bigger than the browser window. It does not have
any animation effects. In my case (Firefox 2.0 on Linux) some feature does not work, for example the zoom and the image drag. Author: Takuya Otani. License: ?. | Based on the idea that all the visualizable text should be inside the page itself (for example for search engines or should be visible to screen readers), Leightbox provides the features of Lightbox Gone Wild, but whitout using AJAX. Author: Simon de Haan. License: ?. | | Slimbox
provides the same functionalities of Lightbox, also animations, using the mootools library. This is needed in those websites that use CMS or other tool that force to the use of a particular JavaScript framwork (Prototype or mootools), this kink of libraries have often non resolvable conflict and cannot be used at the same time. In this website I use Slimbox, because MODx (the CMS with which my site has been developed) uses the mootools library. Author: Christophe Beyls. License:
MIT. | This version extends the functionalities of Slimbox, giving to it the possibility to visualize the content of other webpages inside the box (iframe). Author: Yukio Arita. License: MIT. | | GreyBox
adds the feature of visualizing the content of a whole wepage inside the box (iframe). In its website, for example, it is showed how to insert the content of Google inside the GreyBox. Author: Orangoo Labs (Amir Salihefendic). License:
"OpenSource" (GPL?). | This variant of GreyBox
is very small (1.2kB, versus the 12kB of original GreyBox). Its website is very osseous and it is not possible to understand if it provides some other features. Author: Amir Salihefendic.
License: ?. | | ThickBox
has been written using jQuery library and offers the following features: image resizing to avoid it to be bigger than the browser window, it can show images, inline content, iframes and also AJAX answers. It has not any animation, but this is considered a feature from the author. Author: Cody Lindley.
License: MIT, GPL. | SmoothBox is a ThickBox clone that has the same feature but uses mootools library. Like ThickBox, it does not have any animation. Author: Boris Popoff. License: ? (MIT?). | |
ModalBox,
that uses Prototype and script.aculo.us libraries, provides the possibility of having modal dialogs in webpages, whose content is loaded via AJAX. Author: Wildbit Labs. License: ?. |
Also in this case, the MOOdalBox variant has been developed in order to use mootools instead of prototype. Author: Răzvan Brateş. License: MIT. |
Summary| | Animation effects
| Shows images | Shows inline text | Shows external content | Used libraries
| | Lightbox JS | no
| yes (no groups)
| no
| no
| none | Lightbox JS 2
| yes ("fancy pants")
| yes (groups) | no | no | Prototype, script.aculo.us
| | Lightbox+ | no | yes (groups) | no | no | none | | Lightbox Gone Wild | no | yes (groups) | no | yes (via AJAX)
| Prototype
| | Leightbox | no | yes | yes | no | none (?) | Slimbox
| yes ("fancy pants")
| yes (groups)
| no
| no
| mootools
| | Slimbox (Extended) | yes ("fancy pants")
| yes (groups) | no
| yes (iframe)
| mootools | GreyBox
| yes (fading)
| yes (groups) | no | yes
| AJS JS | | GreyBox Redux | no | ? | ? | yes
| jQuery | | ThickBox | no | yes (groups) | yes
| yes
| jQuery | | SmoothBox | no | yes (groups) | yes
| yes (iframe)
| mootools | ModalBox
| yes ("fancy pants")
| yes | no | yes
| Prototype, script.aculo.us | | MOOdalBox | yes ("fancy pants")
| no | no
| yes
| mootools
|
Write a comment
- Required fields are marked with *.
Showing comments 1 to 10 of 28
| Next
| Last
Showing comments 1 to 10 of 28
| Next
| Last
|
.
|
Posts: 28
Reply #28 on : Wed November 19, 2008, 08:50:09