Open Source Resources for Web Application Developers WebAppers - Hunting the Best Open Source Resources for Web Developers

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.

jquery-gallery.png

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

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.

transitions.png

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

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

fancyzoom.png

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

Flash iTunes Cover Flow

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.

itunes-album.png

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

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.

shadowbox.png

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

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.

multibox.png

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

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.

lightview.png

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

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.

simple-viewer.png

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

flickrshow provides you with the simplest way of displaying your Flickr photosets on your own website. It is simple to install, completely free and doesn’t require Flash or any server side programming knowledge. It is free to use flickrshow, however flickrshow is not available for people to download and use on their own servers at the moment. It has the following main features.

  • Unobtrusive and compatible: they built flickrshow on top of Prototype so it will work with all modern browsers and won’t interfere with any other Javascript on your page.
  • Themeable to match your site: You can alter the colour of flickrshow to match your site.
  • Can be used multiple times: it caused a number of headaches, but you can run as many slideshows on your site as you want, as long as your viewers can handle the loading times.

flickrshow.png

Requirements: -
Demo: http://www.flickrshow.com
License: License Free

Gerard Ferrandez has created a Photo 3D Gallery. The interactive gallery is written in Javascript which is very user friendly. The photos will move according to your mouse movement. You can click on any pictures to zoom in and out. Now we have one more choice for embedding a photo gallery in your projects.

photo-3d-gallery.png

Requirements: No Requirements
Demo: http://www.dhteumeuleu.com/
License: License Free

Page 2 of 4«1234»
Web Resources Menu

Web Component Resources

Web Design Resources

Extra Resources

Search Site

Advertise on WebAppers?