Open Source Resources for Web Application Developers

noobSlide is a mootools based slide show gallery. You can see 7 different styles of images galleries / slide shows. I think they are working smoothly and looking nice. However, I particular like example 6 and 7. If your web application / website is already using mootools, noobSlide is definitely a good choice to power your image gallery. noobSlide is licensed under MIT License.

Requirements: Mootools Framework
Demo: http://efectorelativo.net/laboratory/noobSlide/sample.html
License: MIT License

• 14 Comments

FancyBox is similar to lightbox-like tools, but with kinda different image zooming script for those who want something fresh. It is powered by great javascript library – jQuery, tested with IE6, IE7, Firefox. It supports single or a group of images as other gallery scripts. Zooming in and out effects are customizable. CSS is seperated from js code to improve speed and customization. I really like the loading animation which is inside the thumbnail rather than in the center of the whole screen.

Requirements: jQuery
Demo: http://fancy.klade.lv/
License: MIT License

• 4 Comments

jQuery, jQuery, jQuery, jQuery again. There are lots of nice application written in jQuery. Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. The core of Galleria lies in it’s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.

Above is a demonstration shows you some more advanced effects you can accomplish with the Galleria plugin. The history object is also active that you can click the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

Requirements: jQuery Framework
Demo: http://www.monc.se/galleria/demo/demo_01.htm
License: GPL 3.0 License

• 61 Comments

The image transition manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking. Because it uses the unobtrusive javascript technique, no inline javascript is needed and hyperlinks still function when javascript is disabled.

I think the script works really great, you can have 8 (more to come) image transition effects to spice up your site. However, I found it a bit slow to load the image first time. It would be much better if the script preloads all the images beforehand.

Requirements: Scriptaculous 1.7.3 beta and Prototypejs 1.5.1.1 Framwork
Demo: http://ajaxorized.com/image-transition-manager/
License: License Free

• 3 Comments

FancyZoom is designed to view full-size photos and images inline without requiring a separate web page load. It is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself. FancyZoom has the following features that makes it different to other popular modal box galleries, e.g.Lightbox. FancyZoom is totally free for your non-commercial website.

• Focused on the smoothest, most polished zooming animation possible
• Automatically scales images from any image link, with no HTML changes
• Preloads full-size images in the background on link mouseover
• No resource-heavy Javascript libraries — 100% coded from scratch to zoom
• Draws a nice drop shadow under the full-size image to offset it from the page
• Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required

Requirements: Safari, Firefox, IE7, and IE6
Demo: http://www.cabel.name/2008/02/fancyzoom-10.html
License: License Free

• 8 Comments

Thank you Patrick for bring this wonderful web resources to my attention. Do you love Apple? Do you Love iTunes? Do you Love looking at all your albums in your iTunes in a sense of accomplishment. Now you can do it in Flash. iTunesAlbumArt allows us to display the albums we love or just our photo albums with the interface of iTunes Cover Flow. iTunesAlbumArt looks stunning and works smoothly. Users can scroll or click to select the album. All the album pictures and details are defined by an XML file.

Requirements: Modern Browsers with Flash installed
Demo: http://www.weberdesignlabs.com/blog_files/itunes2/iTunesAlbumArt.html
License: MIT License

• 11 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

Lightview was designed from the ground up to make the overlaying experience as nice as possible. The idea was to have the image be the most important thing while the box is there to present it without interfering with it. That is why the author has created the animated side buttons to make sure the image is always 100% visible. Button around the image will change in opacity, having lighter buttons by default and darker buttons on hover keeps the focus on the image.

Lightview is very easy to style as well, even someone who doesn’t know CSS can be able to customize it. The javascript options and the images are basically all you need to change to get the look and feel you want within seconds. One of the best things is that Lightview uses Canvas an VML to draw a those images for you. This way it’s possible to change the corner radius very fast. It also works on every screen resolution, all images are automatically resized to fit within the viewport when you open them. Even the close button will adjust as you go smaller.

Requirements: Prototype, Scriptaculous with Javascript Enabled
Demo: http://www.nickstakenburg.com/projects/lightview/
License: License Free

• 7 Comments

SimpleViewer is a free, customizable Flash image viewing application with the following features. However, if you want more customization options and does not include the download link, you have to purchase SimpleViewer-Pro instead.

• Intelligent image pre-loading.
• Intuitive image navigation
• Lightweight (17k).
• Customizable interface – Set text color, frame color and width, navigation position.
• Resizable interface – Interface scales to fit browser window.
• Cross platform – Windows/Macintosh/Linux (requires Flash 7 or higher).
• Flash 7 detection. Users without Flash 7 are messaged to upgrade Flash.
• International font support.
• Keyboard Navigation (Cursor keys, Home, End, Page Up/Down)
• Mousewheel navigation
• Optionally right-click to open image in a new window.

Requirements: Flash 7+
Demo: http://www.airtightinteractive.com/simpleviewer/
License: License Free

• 2 Comments