Open Source Resources for Web Application Developers

The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox. Some users complained that the slider isn’t unobstrusive through its use of the bump effect, you can change the effect in the mooslide.js. Replace the Fx.Transitions.Bounce.easeOut with something like Fx.Transitions.linear.

Requirements: -
Demo: http://www.artviper.net/test/ajaxslide/
License: License Free

• 28 Comments

Shadowbox is a cross-browser (supports Firefox 1.5+, Camino, Safari 2+, Opera 9+ and Internet Explorer 6+), cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. In other words, it is similar to lightbox but focusing on displaying different media formats, e.g. Flash, QuickTime, and Windows Media Player.

It’s easy to use Shadowbox with your JavaScript library of choice for a given project as well. Shadowbox comes bundled with adapters for Yahoo! User Interface Library, Ext (standalone), Prototype + Scriptaculous and jQuery. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.

Requirements: Firefox 1.5+, Camino, Safari 2+, Opera 9+ and IE 6+
Demo: http://mjijackson.com/shadowbox
License: LGPL License

• 5 Comments

There are many popups and galleries scripts we can use, Multibox is one of them as well. Multibox is lightbox that supports images, flash, video, mp3s, html. You can set the color of the background or use a semi-transparent background. It supports Firefox 2 (mac / pc), IE 7, IE 6, Safari (mac). However, it requires Mootools v1.1+ to run properly.

Requirements: Mootools 1.1+
Demo: http://www.phatfusion.net/multibox/
License: MIT License

• 33 Comments

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:

• No plugins like Flash or Java required.
• Popup blockers are no problem. The content expands 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.
• Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself or to a fallback HTML page. This fallback is able to cope with most exceptions and incompatibilities.

Highslide is free for a personal website, a school site, your family’s photo album or a non-profit organisation. If you want to use Highslide for a commercial website, you need to pay for it.

Requirements: IE 4.0+, Firefox 1.5+, Opera 8.5+, Netscape 7.2, Safari 2.0+
Demo: http://vikjavev.no/highslide/
License: License Free for Personal Use

• 4 Comments

Lightbox is a simple, unobtrusive script used to overlay images on the current page. This frees you from the constraints of the layout, particularly column widths. However it only supports images.

Now Videobox is a 6kb script, which allows you to show your videos in Lightbox. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash. It has done a really great job, if you would like to show your videos in the page with an overlay, Videobox is a really great choice.

Requirements: No Requirements
Demo: http://videobox-lb.sourceforge.net/
License: MIT License

• 8 Comments

Sébastien Gruhier has always wanted to create a Class to handle in a easy way portal page like netvibes. After having tried to used Sortable of script.aculo.us, He decided to write his own Class. Prototype Portal Class allows users to drag and drop, re-arrange and remove any windows on the portal page. This is the first version he made. It has been tested on Safari, Firefox, Opera and IE 6/7. The first version is based on Prototype 1.5.1.1 but the next version will be based on 1.6.

Requirements: Prototype Framework
Demo: http://blog.xilinus.com/prototype-portal/test/index.html
License: MIT License

• 1 Comment

Code Central has shown us how easily one can create a lightbox using YUI’s Dialog class. The lightbox incorporated many new features, along with old features such as drop and drag, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser’s window area). You can also hide the lightbox conveniently by clicking on the image.

Requirements: Firefox 2+, Netscape 8+, IE 6+, Opera 9+
Demo: http://test.thecodecentral.com/demos/lightboxrev/lightbox.html
License: License Free

• 1 Comment

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. ModalBox is built with pure JavaScript and is very lightweight (10kb).

Requirements: Safari, Camino, Firefox 1+ and Internet Explorer 6+, Opera 8+
Demo: http://wildbit.com/demos/modalbox/
License: License Free

• 6 Comments

Prototype Window is a javascript class which allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. The most important point is that all modal windows are resizable, you can also minimize or maximize at it any time. And they are skinnable as well which means you can apply your own theme for the modal window so that they can match our web application’s style.

Requirements: Safari, Camino, Firefox and Internet Explorer 6+, Opera
Demo: http://prototype-window.xilinus.com/samples.html
License: MIT License

• 1 Comment

LightWindow is the most powerful modal window I have seen so far. It has so many features, you have the complete ability to style and position it. It is very easy to implement as well. Lastly, most moal window application didn’t actually test for their media types and how they behaved in other browsers and operating systems. However, LightWindow has done a great job, other than images, inline content, iframe content and ajax content, it also supports Quicktime Movie, SWF and PDF.

Requirements: Any Modern Browsers
Demo: http://stickmanlabs.com/lightwindow/#demos
License: MIT License

• 0 Comments