Max Kiesler - Web Design, SOMA San Franciso

Downloadable AJAX Galleries, Slideshows and Effects

 Subscribe

Monday, March 06, 2006

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.



AJAX Galleries
minishowcase
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
A very detailed tutorial with a downloadable example

Zen Photo
One 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.

MyMemento
An alpha release of a full featured AJAX gallery.

AJAX Image Gallery Example - Alpha Release
Both of these are extreme alpha developer releases. These two examples are really mash-ups of existing code to show what is possible.

AJAX Image Gallery
A nicely design gallery, however, there is no documentation.

Ajax Image Gallery
A very basic AJAX image gallery example

AJAX Lightboxes
Lightbox Gone Wild
While 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 Lightbox
So, 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 JS
Lightbox 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 Slides
S5: A Simple Standards-Based Slide Show System
S5 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
The 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 Controls
This 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 Slideshows
Miniature slideshow for DIVs using Scriptaculous
This is a nice code snippet that has many uses.

AJAX flickr Slideshow
A nice slideshow example pulling images from a flickr account.
Direct link

AJAX Slideshow
It 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.

FotoGraf
AJAX slideshow with a nice window shade translation. There is no documentation, however, it is a good example to look at.

Live Thumbnails: Watch 'em Grow
They'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 Manipulation
Canvas Reflection Demo
This 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.

iPhoto-like image resizing using Javascript
Upon 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 Rotation
Rotate ads on a website, even when the page is not reloaded.

Comments on this post

Johnathan  on  03/06  at  01:25 PM

There are other, better featured Ajax image editors - such as:
http://www.flog.co.nz/2006/03/02/image-editor/

Henke  on  03/06  at  03:03 PM

Hello!

1) You really really need to decrease the text-size. Otherwhise it feels like we’re back to 1998 again…
2) Another great article: http://www.codeproject.com/aspnet/ImageCMS1.asp for us non-php people!

Ivan Minic  on  03/07  at  06:52 AM

Great job man! Thank you!

Ollanta  on  03/07  at  07:39 AM

Nice artistic, effects-plenty stuff.
But would you have a very practical example, lets say, for a business website that needs to just flickover picture after picture?

Henke  on  03/07  at  01:17 PM

Ollanta: I can provide you with an example like that:
http://slayeroffice.com/code/imageCrossFade/xfade2.html

Have fun!

digdugdog  on  03/07  at  08:26 PM

Another AJAX image editor is at http://www.blibs.com/

funkytaco  on  03/07  at  11:07 PM

Where is the code download for http://shevtsov.fanstvo.com/demo/ajax-gallery/ ? I can’t read Russian.

abruton  on  03/07  at  11:23 PM

Does anyone have an AJAX and standard .asp code for image upload and resizing?

Cranch  on  03/07  at  11:45 PM

Still very early: http://spacebuilt.com/photo/

Cheyne  on  03/08  at  01:58 AM

Fantastic post. One for my del.icio.us bookmarks. Thanks
http://www.thewebdesignblog.com

pulssart  on  03/08  at  02:02 AM

My photoblog use scritaculous and pixelpost. I use the refection.js and the resizing effect “iPhoto like”. http://www.pulssart.yi.org

Tobias  on  03/08  at  02:20 AM

I wrote a iTunes-music-store-like Slideshow Program that uses Lightbox JS. Check it out at: http://tobias-digital.de/index.php?id=43

Rupert Larou  on  03/08  at  04:04 AM

Lovely resource. I will be checking those Ajax galleries out.

http://www.wirah.com

tobto  on  03/08  at  04:54 AM

cool stuf. I like it. But font size is a little bit big for my little eyes.

Kord Campbell  on  03/08  at  07:23 AM

Great stuff listed here…

Here’s a gallery of DHTML lightboxish widgets that one of our designers did when we first started working on Zoto back in 2003.  Drag and drop, zooming thumbs, and more.

http://ditchnet.org/dhtmlgallery/

John Dowdell  on  03/08  at  09:54 AM

Thanks for the list. Do any of these handle their support costs particularly well?

Things like browser detection, browser-version detection, providing appropriate feedback to visitors who may arrive with client software which was tested-and-failing on that site, or handling visitors who may arrive in an unknown or masked browser. What’s the best approach towards visitor qualification that you’ve seen in this group?

tx, jd/adobe

Daisy  on  03/08  at  05:54 PM

Henke said:

</i>...You really really need to decrease the text-size. Otherwhise it feels like we’re back to 1998 again… </i>

No! It’s great the way it is and so nice not to have to hit the Ctrl+ button to be able to read the text.

Chango  on  03/08  at  08:40 PM

Missing Ajallerix http://linux.csf.itesm.mx/ajallerix/

Nelson  on  03/13  at  03:56 PM

This request of using smaller text is SO wrong. I love big fonts so I can read the story at a confortable distance from the monitor. Web designers have to understand that small text is for books/magazines that you can bring close to your eyes without being unconfortable, and where space is a premium because of the cost of paper. 99% of web sites need to make their text bigger. Expanding its size with control-+ is a less than ideal solution because, unless the page is designed for that, it usually messes up everything.

Walter  on  03/16  at  05:19 PM

Profiled by Emily Chang recently ...

http://pxn8.com/

Andreas Koehler  on  03/28  at  04:32 AM

Today I found another cool Gallery using lightbox.js

http://www.mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/

Ken  on  03/29  at  08:18 AM

Thanks for the compilation!!

Khang-pa  on  04/12  at  11:53 AM

This is such a useful resource!  Thank you!!

Ivan  on  04/20  at  05:46 AM

Hi there,

Here:
http://www.iloire.com/demo/ajax/index.asp

is another AJAX based photo gallery, based in the top rated ASP Simple Online Photo Album script:
http://www.iloire.com/vbscript/online_photo_catalog_vbscript.asp

Cheers,

Iván

AgileGallery  on  04/21  at  11:44 PM

I would like to suggest http://www.agilegallery.com - an AJAX gallery for Picasa. Could you add this to your resource list?

Luis Alberto Barandiaran  on  05/15  at  12:20 AM

WoW! Excellent resources! Not only those provided in the article, but also in the comment area. Great job! I’ll try a few on my website!

Crash  on  05/16  at  08:29 PM

Thanks for the collection! Very helpful for me!

The Doc  on  05/17  at  09:38 PM

Well, I tried a couple on my site, but as it turns out, they work, but need a lot of tweaking… I tried the image reflection thingy, but it kept aligning items left instead of whatever I tried to place it in… will keep trying though

ased  on  06/20  at  08:39 PM

Thank you for that. Good job !

website design company  on  07/04  at  05:05 AM

Great source! Thanks

Rony  on  07/13  at  01:44 AM

hi bro thanx for provide us nice scripts, i like all but zenphoto-1.0.3 is great script…

LP  on  07/19  at  06:04 AM

Hello. There was started a new AJAXed vector image editor yesterday night. http://www.litha-paint.com Use online store to share your images amoung others.

axelspin  on  07/26  at  06:39 AM

I did`n now till today that you mentioned my ajax image gallery.. The one with no documentation.. and a dead link!! Ok.. now it`s everything online again.. with the source

http://axelspin.freeflux.net/blog/devlab/

joe  on  08/08  at  03:00 AM

Just now I looked through all AJAX Galleries and think
“AJAX Powered Fading Image Gallery Tutorial” is the best.

Tim  on  08/14  at  11:49 AM

Great list, really usefull! Thanks

Braco  on  09/14  at  12:42 AM

Hi!

Very useful list. Any chance of adding the TripTracker slideshow to it? http://blog.triptracker.net/2006/09/08/revamped-slideshow/

It’s free for personal use.

Leon  on  09/18  at  09:01 PM

Awesome, thanks for that list - very useful, been looking for some of these techniques for ages.

mehdi  on  09/20  at  03:18 PM

hi friends!
if some one can help
send me a documentation of “"” ajax “""" at my mail
please ;
and thanks ;

rxbbx  on  09/22  at  10:32 AM

thnx for making this list

regards

Edd  on  09/25  at  08:20 AM

Great recopilation, really useful, I apreciate it.

Lautreamont  on  10/04  at  10:03 AM

Ajax xommunity is growing fast. Thanks for your compilation. This helps spreading the word.

creditos  on  10/11  at  12:43 PM

Very useful resources and applications, I have one problem though: In slow machines AJAX is a bit heavy, probably it won’t be a problem in the future but right now lots of people (like in Peru my homecountry) are still running some very old hardware.

tobto  on  10/26  at  07:24 AM

I would love to collect such collection myself. Thanks a lot!

Armand  on  10/27  at  02:57 AM

Hi, nice site!
crochet hat
chef hat

digdig  on  10/31  at  04:01 AM

The AJAX image editor (http://www.blibs.com/) is nice, but it will be much more friendly if multiple functions like resizing, cropping, coloring be available on one screen, instead of multiple steps.

Harper  on  11/13  at  07:52 AM

for a more professional slideshow, you could always check out Monoslideshow: http://www.monoslideshow.com

and not expensive either.

vhgdesign  on  11/13  at  09:30 AM

You save me a lot of time with this links. Thank you!!!

Jocuri  on  11/21  at  02:09 AM

Nice script.Thx.

FunnyVideo  on  11/27  at  12:10 PM

Very useful resources and applications. Keep it this way dudes.

Jocuri copii  on  12/10  at  03:40 AM

Thanks a lot for that list. We found it very useful, been looking for some of these techniques for ages.

eMule Forum  on  12/10  at  05:16 PM

Awesome, thanks for that list - very useful, been looking for some of these techniques for ages.

Cheers

Howe  on  12/20  at  05:27 AM

Very useful Ajax resources,Thanks a lot.

Pozycjonowanie  on  12/21  at  04:15 PM

Great collection Keep up the good work. Greetings from Poland

max  on  02/26  at  03:10 AM

Thanks for all of the great comments. The source code for aPop and footoo has now been released. Please see my post here.

yaip  on  05/04  at  12:47 PM

Check this out for lightbox implementation:

http://www.justthinkart.com/General/Portfolio_AwardWinners.aspx