Navigation Menu+

Downloadable AJAX Galleries, Slideshows and Effects

Posted on Mar 6, 2006 by in Web

image Until recently many of the most visually stunning and functional image galleries, slideshows, and effects were done through Flash. With the advent of AJAX many developers are taking another look at javascript and are producing some very amazing functionality in these areas.”Many of the components that make up image galleries and slideshows are perfectly suited for AJAX. Lightboxes, slides, fades, uploaders and live search are just a few of the many AJAX widgets that could improve the usability of many image galleries and slideshows. Over the course of the last year I’ve spent some time searching and collecting links for downloadable image galleries and slideshows. Below you’ll find a categorized list of all of the AJAX image solutions I’ve been able to find that were of some use. If you know of any AJAX based galleries, slideshows, or image manipulation that is not included on this list please post a comment of email me. “Special thanks to all of the developers who spend their free time writing great code and releasing it for all of us to use for free.”

SPECIAL NOTE:The source code for aPop and footoo have now been released. Please see my post here.

AJAX Galleriesrnminishowcase“minishowcase is a small and simple php/javascript online photo gallery, powered by asynchronous http+javascript+xml (AJAX) that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes!.”AJAX Powered Fading Image Gallery Tutorial rnA very detailed tutorial with a downloadable example”Zen PhotornOne of the nicest and most complete image gallery with AJAX functions. Features include uploading, comments, AJAX-powered edit-while-you-browse, and a theme engine.”MyMementornAn alpha release of a full featured AJAX gallery.”rnAJAX Image Gallery Example – Alpha ReleasernBoth of these are extreme alpha developer releases. These two examples are really mash-ups of existing code to show what is possible.”AJAX Image GalleryrnA nicely design gallery, however, there is no documentation.”Ajax Image GalleryrnA very basic AJAX image gallery example”AJAX LightboxesLightbox Gone WildrnWhile researching the best way to recreate a modal window for our current project, we ran into Lokesh Dhakar’s lightbox.js and we knew we found a winner delivery container. Dhakar’s method, however, while fantastic, was a bit too specific for our purposes and so we created our own implementation that we think is a bit more flexible for extending a web site’s interface. In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.”Building aB: Customizing LightboxrnSo, there’s been a HUGE buzz lately over Lightbox JS (and semi-modal Javascript overlays in general, as Particletree has recently discussed) as a way to deliver content to the user without a popup or reloading the page. This technique can be successfully used for many types of interactions, but it seems ideally suited for (and Lightbox JS is specifically made for) showing larger versions of images.”Lightbox JSrnLightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.”AJAX SlidesS5: A Simple Standards-Based Slide Show SystemrnS5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible.”AJAX-S rnThe name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to). Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically.”Slide Show with ControlsrnThis slideshow uses the Zapatec effects to display and hide the different slides, resulting in a flash like smooth transitions. This is a product that must be purchased.”AJAX SlideshowsMiniature slideshow for DIVs using ScriptaculousrnThis is a nice code snippet that has many uses. “AJAX flickr SlideshowrnA nice slideshow example pulling images from a flickr account.rnDirect linkAJAX SlideshowrnIt resizes, it transitions, it fades in and out and it’s not flash! The new AJAX slideshow on the homepage of my site comes to you courtesy of Scott Upton at Uptonic.”rnFotoGrafrnAJAX slideshow with a nice window shade translation. There is no documentation, however, it is a good example to look at.”Live Thumbnails: Watch ‘em GrowrnThey’ve been around since forever, and they all work the same way. You have a page full of thumbnails, and when you click one, you get a page with a larger version. What if thumbnails could grow into full images seamlessly right on the same page?”AJAX Image ManipulationrnCanvas Reflection DemornThis is one of the most amazing javascript effects I’ve ever seen for images. It’s also very easy to implement. All you do is upload the .js file and add a class=”reflect” to the image.”rniPhoto-like image resizing using Javascript rnUpon seeing the Fluxiom intro video, I was compelled to figure out how they pulled off iPhoto-like image scaling in a browser. Leveraging the work of others, it’s actually very simple. If you use the script.aculo.us slider control to capture input values, it’s really just a matter of converting those values into something useful and modifying styles.”AJAX Banner RotationrnRotate ads on a website, even when the page is not reloaded.”rn

SPECIAL NOTE:The source code for aPop and footoo have now been released. Please see my post here.

rn