Protovis - Visualization Toolkit for Javascript using Canvas

Protovis is a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations.

To facilitate this, Protovis supports panels and inheritance. A panel is a container for marks; the contained marks are replicated for each data point on the panel. You can vary the panel position to create small multiple displays, or you can overlay panels. Inheritance lets you derive new marks from existing ones, while sharing some or all of the same properties. This is the same principle as cascading in CSS, or prototypal inheritance in JavaScript.

Please note: Protovis is in its early stages of development. At the moment, they only support Firefox 3, but they plan on adding support for Chrome and Safari 4.

Requirements: Firefox 3
Demo: http://vis.stanford.edu/protovis/ex/
License: BSD License

Another sIFR alternative for Font Embedding

Cufón is similar to Typeface.js which aims to become a worthy alternative to sIFR, and despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts as well – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

It works on every major browser on the market. There is near-zero configuration needed for standard use cases. And it is fast, even for sufficiently large amounts of text.

Requirements: Canvas and VML
Demo: http://cameronmoll.com/archives/2009/03/cufon_font_embedding/
License: License Free

Excel Style Keyboard Navigation for HTML Tables

There are a number of tools such as DataTables which provide enhanced access to HTML tables for Javascript capable browsers. However, these tools often lack keyboard accessibility. KeyTable addresses this by allowing Excel like cell navigation on any table.

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. Simply navigate to the cell you wish to edit and hit return. This initialises the excellent jEditable plug-in for jQuery - make your edit and then hit return again to save.

Requirements: IE 6+, Firefox 3+, Safari 3+, Opera 9.6
Demo: http://www.sprymedia.co.uk/article/KeyTable
License: GPL or BSD License

Ajax Communication Suite with Webmail and IM

Claros inTouch is an Ajax communication suite with key features such as webmail, address book, post-it notes, built-in instant messenger and rss reader. It is an open source web application which features built in spam protection and instant messaging capabilities together with web 2.0 technologies.

It supports both Pop3 and IMAP protocols. Claros inTouch requires a JSP/Servlet container(such as Apache Tomcat), Sun JDK 1.4 or 1.5 and MySQL to run.

Requirements: JSP/Servlet container, Sun JDK 1.4+, MySQL
Demo: http://www.claros.org/web/showProduct.do?id=1
License: Claros Public License

Another Nice Looking Multi-Level Context Menu in Mootools

After publishing Mootools ContextMenu few days ago, our reader, Temuri has suggested another really nice looking context Menu using Mootools which is called Mif.Menu. There are ART style and shadow style context menu for you to choose from. It supports multi-level and key navigation as well. Mif.Menu is released under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.

Requirements: Mootools Framework
Demo: http://mifjs.net/trunk/menu/Demos/index.html
License: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License

jQuery Translation Plugin Uses Google Translate API

SundayMorning is a jQuery plugin which allow site-owners to offer their visitors some easy and fancy ways to translate their content in more than 30 languages. It uses the Google translate API. You can have Inline translation with menu, Word translation or Translation with remote trigger. It is available as a Bookmarklet as well. SundayMorning has been tested on Internet Explorer 6/7, Firefox 3, Safari 3.

Requirements: jQuery Framework
Demo: http://sundaymorning.jaysalvat.com/
License: MIT and GPL License

Replace Your Default Tooltip with Pretty (mb)Tooltip

(mb)Tooltip is a beautiful tooltip for your webpage in jQuery. Simply by placing a “title” attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime.

Requirements: jQuery Framework
Demo: http://www.open-lab.com/mb.ideas/index.html#mbTooltip
License: GPL License

Highly Customizable Mootools ContextMenu Plugin

MooTools ContextMenu Plugin is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools javascript framework. ContextMenu allows you to offer stylish, functional context menus on your website.

The most dynamic part of the ContextMenu instance is the “actions” option, where you define what action should be taken per menu item. The action is passed the element clicked on and the reference to the context menu.

Requirements: Mootools Framework
Demo: http://davidwalsh.name/dw-content/moo-context-menu.php
License: License Free

Allow Users to Switch Page Layouts with jQuery & CSS

Soh Tanaka has shown us a quick and simple way to allow your users to switch page layouts by using CSS and jQuery on “Easy Display Switch with CSS and jQuery“. The technique is quite simple but the result is very nice and useful.

Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/display-switch/
License: License Free

Scroll Your HTML with jQuery

jQuery Scrollable is to provide generic scrolling capability to your pages. Anytime you want to scroll your HTML elements in a visually appealing way you should use this tool. The difference between “normal” scrolling is that you don’t have browser’s default scrollbars available and you can perform scrolling in more sophisticated ways.

Items can be scrolled horizontally or vertically. Elements can be scrolled with navigational buttons, arrow keys, API calls and mouse wheel. You can specify the amount how many items are scrolled at once. Possibility to add and remove scrollable items dynamically. And also, the file size is roughly 6.0 Kb when minified.

Requirements: jQuery Framework
Demo: http://www.flowplayer.org/tools/scrollable.html
License: MIT and GPL Licenses

57+ Free Image Gallery, Slideshow And Lightbox Solutions

Actually at first I wanted simple image gallery solution for web design project, but when I started to search I changed my mind and thought how great would be to create article about all the best image gallery solutions available on the Internet. So here it is - this list is separated in 3 big categories like Ajax, JavaScript and Lightbox based galleries, CSS based galleries and FLASH based galleries, so You can easy switch to category You got interest in. I think here You’ll find gallery for every needs, should be enough to choose from!

Ajax, JavaScript ( jQuery, MooTools), Lightbox based galleries

1. JonDesign’s SmoothGallery

Using MooTools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Together there are 7 different gallery demos, You can download and test for free.

Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom CSS selectors. And even better, this solutions is very lightweight: The JavaScript file is only 24kb.

2. MiniShowcase Gallery

Minishowcase is a small and simple PHP/JavaScript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

3. jQuery SlideViewer

SlideViewer is a lightweight (1.5Kb) jQuery plugin which allows to instantly create an image gallery by writing just few lines of HTML. SlideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

4. DevKick Galleria

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.

5. ZenPhoto

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. We hope you agree with our philosophy: simpler is better. Don’t get us wrong though – zenphoto really does have everything you need for your online gallery, and you’ll even stare in awe at some of the innovative innovations we innovated upon.

Check out their feature list - it was too long to long to post here!

6. Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers

7. Visual Lightbox

VisualLightBox is a free wizard program that helps you easily generate web photo galleries, based on famous LightBox2 script, in a few clicks without writing a single line of code.

8. Photo Gallery with MooTools

Fully explained tutorial and also spectacular photo gallery to comfortably display many images.

9. GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way. It is very easy to use full-screen website, image gallery, which doesn’t conflict with pop-up blockers and it’s only 22 kb size!

10. TripTracker

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

11. qGallery

qGallery is a simple to use prototype based gallery script. All image processing is done by the script so you don’t have to worry about the images you upload on the server. All images for the skimmer graphics and the fullsize view will be created on the fly and stored in a cache directory on the server to save processing power on the server.

12. jFlow gallery

Tutorial and documentation, how to use jFlow plugin to create Your own gallery.

13. NoobSlide

8 different examples how to view Your images using MooTools, unfortunately there isn’t any documentation, but very easy to use gallery.

14. Spacegallery -jQuery plugin

Yet another way how to display Your images.

15. JQuery Cycle Plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin.It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

16. Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff using jQuery plugins.

17. PrettyPhoto

jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.

18. PrettyGallery

One more way how to display Your photos using jQuery.

19. FrogJS

FrogJS is a simple, unobtrusive JavaScript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories.

20. Galleriffic

A jQuery plugin for rendering fast-performing photo galleries. Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos.

21. Pirobox jQuery Lightbox

Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages. DesignShack offers a new jQuery Lightbox script It has been designed and created by Diego Valobra.

22. Slideshow 2

Slideshow 2! is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

23. JQuery flickrGallery

FlickrGallery is a jQuery plugin for embedding flickr photos into a webpage. Plugin considers a Gallery to be a list of Albums (similar to Flickr’s Collections). Albums are considered to be photo sets.

24. Auto Generating Gallery

Words - “Auto Generating” don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. Gallery use PHP for this web wizardry.

25. Photo Slider

Tutorial teaching how to create photo slider gallery with play/pause slideshow settings and interesting thumbnail effect using jQuery.

26. JavaScript TinySlideshow

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider.

27. S3Slider jQuery plugin

JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.

28. Ajax Photo Gallery

The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from Google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

29. Suckerfish HoverLightbox Redux

Handy JavaScript, CSS based image gallery with another version of Lightbox included.

30. PhatFusion Slideshow

Slideshow using JavaScript MooTools with features like:

• Fade, Slide and Wipe transitions
• Loops
• Play, Stop, Next and Previous controls
• Inits from array of image src’s, a list of images on the page or using the href of an a tag like the Lightbox.

31. HighSlide JS

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 popup’s on web pages.

32. SlideFlow Ajax Image Gallery

Use slideflow to show elegantly Your images, also fullscreen mode is available.

Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included)

33. Barack Slideshow 0.2

An elegant, lightweight slideshow JavaScript script.

34. jQZoom Evolution

JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework. jQzoom is a great and a really easy to use script to magnify what you want.

35. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

36. jQuery spherical panorama viewer

A JavaScript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

I didn’t include screenshot here because demonstration can be seen only by clicking and dragging on the picture getting that 3D look.

37. JQuery Virtual Tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour !

38. MooSlideBox

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. It is based on the MooTools framework version 1.11.

39. jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos

40. Featured Content Slider

Tutorial, how to create a slick auto-playing featured content slider.

41. Easy Slider jQuery Plugin

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with CSS alone. So, basically you link to plugin file, set the content up and style it with CSS.

42. Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features.

CSS Based Galleries

43. HoverBox Image Gallery

Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS, free to use for Your own projects.

44. Sliding Photograph Galleries

This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

45. CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The gallery works in IE6+, Firefox, Opera 8+.

46. Cross browser CSS Slideshow

Nasty CSS Slideshow producing a slide show or photogallery using a mixture of portrait and landscape images.

47. Cross Browser Multi-Page Photograph Gallery

Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.Unlike the Suckerfish HoverLightbox this version does not use JavaScript but is pure CSS and still works in IE.

Tested in IE5.5, IE6, IE7, Opera, Firefox, Safari (PC).

48. CSS Decorative Gallery

Nice CSS Decorative Gallery and tutorial, how to decorate your images and photo galleries without editing the source images.

Flash Based Galleries

49. Flash Parallax Gallery

Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images. Awesome tutorial and also great idea how to display Your portfolio or create unique web design. Must see!

50. Flash Gallery

Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.

51. SimpleViewer

SimpleViewer is a free, customizable Flash image viewing application.

52. 3D Curve Wall

Unique Flash based 3D curve wall similar to Flashloaded version, but this one is free.

53. dfGallery

As stated on many other articles on DezinerFolio site, dfGallery is one of the coolest flash galleries currently on the Web.

54. Spiral Carrousel XML

55. Polaroid Gallery

Polaroid Gallery is a free, opensource flash gallery, the script loads images and image titles dynamically from an external XML file or a flickr RSS feed. Then the script processes the data and creates an interactive flash gallery.

56. TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.

Other

57+. DynamicDrive

And finally if You still haven’t got enough galleries or one for Your taste You can check this huge collection of many different image galleries from DynamicDrive.com

If You know some more resources I missed here, feel free to add in comments and if You enjoy this article, let others know about it! Spread the word!