Open Source Resources for Web Application Developers

There are many fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. It is rare to visit a website with a photo gallery that does not already utilize one of these solutions.

So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? Drew Wilson proposed adding a fullsize attribute to the <IMG> tag. By which you can references a larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a pop-up. You can vote for Fullsize and add your name to the list of those who support this Fullsize idea.

Even though Fullsize is not currently in the next HTML spec yet, you can still get Fullsize jQuery plugin now. Since there is no fullsize attribute for the <IMG> tag yet, he is using the longdesc attribute instead. longdesc is a completely valid image attribute and is meant to contain a URL to a description of the image. The Fullsize jQuery plug-in is super easy to use, and provides a kick start to standardizing the way image pop-ups look and work.

Requirements: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6
Demo: http://www.addfullsize.com/
License: MIT, GPL License

• 10 Comments

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

• 2 Comments

ColorBox is a customizable lightbox plugin for jQuery. The appearance is completely controlled through CSS so users can restyle the box in order to create a customized lightbox that is unique to their project. You can check out the example Style 1, Style 2, Style 3 and Style 4.

ColorBox supports photos, photo groups, ajax, inline, and iframed content. It is completely unobtrusive, requires no changes to existing HTML. It degrades gracefully, all content displayed can be accessed without JavaScript. And it generates W3C valid XHTML and CSS.

Requirements: jQuery 1.3+
Demo: Style 1, Style 2, Style 3 and Style 4
License: MIT License

• 11 Comments

Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars – the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6.

Requirements: jQuery Framework
Demo: http://buildinternet.com/live/supersized/
License: License Free

• 6 Comments

Some time ago, we have featured FancyZoom which is designed to view full-size photos and images inline without requiring a separate web page load. After few months, Orderedlist rewrote it in Prototype with some small changes.

First, He didn’t like that it used AJAX. FancyZoom in Prototype tends to lean towards the side of rendering everything and then showing and hiding, rather than loading stuff with AJAX.

Second, Cabel built his from scratch with no use of any JavaScript libraries. That is cool and all, but he almost always have Prototype and Scriptaculous included. Cabel’s version without Prototype is two scripts that weigh in at 36k. Orderedlist’s version with prototype is only 12k.

Third, Cabel’s implementation only works for images and it loads them via AJAX (to save initial page weight). He thinks that the zoom interaction is pretty interesting so he didn’t want a version limited to just images. FancyZoom in Prototype supports pretty much any html you can throw in a div (images, text, flash, etc.).

Fourth, and final, is that he liked Apple’s rounded corners, as opposed to the original fancy zoom’s square edges.

Requirements: Prototype Framework
Demo: http://orderedlist.com/demos/fancy-zoom/
License: License Free

• 6 Comments

Few months ago, we have seen one of the best free flash galleries – dfGallery. There are a lot of great features. It allows integration of most popular photo sharing sites like Flickr , Picasa , Photo Bucket and Fotki along with background music.

Now, dfGallery 2.0 has just released. The reason for this gallery to be cool is not just its UI but the way it is built and architected. They have an amazing theme engine built to support custom themes with multiple skins for each. The administration console built on CodeIginter lets you manage multiple galleries and albums of different types.

This is just the alpha release and they expect lots of feedback to get this to its best possible.

Requirements: Flash
Demo: http://dezinerfolio.com/demo/dfgallery/dfg2/test_embed.html
License: Apache License 2.0

• 8 Comments

Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items.

If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content.

The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6.

Requirements: jQuery Framework
Demo: http://www.reindel.com/accessible_news_slider/
License: License Free

• 2 Comments

Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. It uses PHP to draw images from the folder you specify.

You can also configure Agile Carousel with many different options including controls, slide timer length, easing type, transition type (e.g. blind, drop, pulsate, shake, slide and etc…) and more. The script is currently in beta version, security & feature enhancements are on the way.

Requirements: jQuery Framework
Demo: http://code.google.com/p/agile-carousel/
License: New BSD License

• 3 Comments

This dynamic JavaScript slideshow is feature packed and under 5KB. You can find the new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.

The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder).

This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. This script is available for any personal or commercial projects under the creative commons license and is offered as-is, no free support provided.

Requirements: Javascript Enabled
Demo: http://sandbox.leigeber.com/javascript-slideshow/
License: Creative Commons License

• 9 Comments

The s3Slider jQuery plugin is made by example of JonDesign’s smooth slideshow script. The author needed something like that for jQuery. Since he didnt find it after a small research, he decided to build it by himself. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. This plugin has been tested and is known to work in Firefox, Opera, Safari, Internet Explorer and Google Chrome.

Requirements: jQuery Framework
Demo: http://www.serie3.info/s3slider/demonstration.html
License: Creative Commons 2.5 License

• 6 Comments