A huge collection of AJAX, JavaScript, Light box, CSS and Flash-based image galleries at your fingertips. For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and sideshow. I hope, this post will do the trick and provide all the resources you might need.
The UvumiTools Gallery allows you to display fancy photo galleries on your web site without requiring you to be a master programmer. All you need to do is include a couple JavaScript and CSS files. This is made possible thanks to the powerful Mootools Javascript Framework.
Here's how it works:
First, the thumbnails are loaded. When they are ready, users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel. A click on the photo being displayed brings the user back to the contact sheet view.
Features:
- Requires no Javascript knowledge: All it needs is some basic HTML to define the images, and one line of code to initialize the gallery, in which you can eventually set some options. Even your mom could do it.
- Non-obtrusive: The UvumiTools Gallery uses an existing valid HTML document as its source, so it isn't 100% JavaScript generated. This means if a user disables JavaScript or for some reason the script doesn't load or execute correctly, the pictures will still be visible as they are formatted in the basic HTML. This may require a little more work from you at first, but it really pays off in the end (see next bullet point).
- Search Engine Optimized: Non-obtrusive and degradable also means that search engines will be able to see and index your pictures. Because search engine robots don't execute JavaScript, any content generated after script execution will not be indexed. In our case this doesn't matter because search engines will see the source HTML, containing the thumbnails and links to the full-size pictures. As a result, your gallery photos will be visible to Google, Yahoo, and all other image serach engines. Also, the caption for each picture is stored in the 'ALT' attribute, giving search engines the opportunity to associate your keywords in the caption with their corresponding images.
- Cross-Browser Compatability: We tested UvumiTools Gallery in all the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3, all on Windows systems. We didn't get a chance to test on Mac or Linux, so if you encounter any problems in other browser/operating system combinations, please let us know in the forum. We only support real browsers -- No need to email us with IE4 or AOL issues. We know about that, and frankly we just don't care.
Vista Photo Gallery is a photo album builder, that allows you to create and publish rich, interactive web photo galleries for your website.
Vista Photo Gallery is the first software that creates AJAX-powered online image galleries without the need for server-side setup. It means you just upload files generated by the software to your server and it will run immediately, even if it's a free webhost without a php, asp, mysql support.
Galleries made with Vista Photo Gallery are high-end web applications that look and behave exactly like desktop apps. You and your web site visitors won't feel the difference! All operations, such as selecting a photo, filtering by tag and date, changing the preview mode, scrolling, performs immediately. No more need to wait for page reloading after every click!
This template uses the excellent Lightbox JavaScript by Lakesh Dakar.
Spry is a JavaScript-based framework that enables the rapid development of AJAX-powered Web pages. Not a JavaScript guru? No problem. Spry is designed to feel like an extension of HTML and CSS, so anyone with basic Web production skills can create a next-generation Web experience by adding the power of AJAX.
About:
- Spry is implemented as a set of JavaScript libraries. To use Spry on a page, simply include the JavaScript library that contains the Spry features you need, use those features on your page, and then deploy that JavaScript file to your site along with your page.
- Spry has three parts: Spry Data, Spry Widgets and Spry Effects. They can be used together or independently of one another.
- No browser plug-ins or server-side modules are required for Spry to work.
- Dreamweaver CS3 has features that ease the development of Spry pages but Spry itself is completely tool-agnostic. Any code editor can be used to develop Spry pages.
PostcardViewer is a free customizable Flash image viewer. The interface looks like a set of postcards shuffled on a table.
Controls:
- Mouse: Click to zoom in and out.
- Keyboard: Cursor keys to navigate. Spacebar to zoom in/out.
- Right-Click Menu: Open Image in New Window (optional)
PostcardViewer Features:
- Use on any website.
- Intuitive image navigation.
- Smart image pre-loading.
- Resizable interface scales to fit browser window.
- Displays image captions as a text overlay.
- Optional right-click to open image in a new window.
- Cross platform. Supports Windows, Mac and Linux.
- Lightweight.
- Built-in Flash detection and upgrade prompt.
- Free!
A free Web application that displays Flickr and Picasa images on websites and blogs.
Features:
- PictoBrowser's Width and Height
- Image File (medium or large)
- Image Vertical Alignment
- Image Titles (on/off)
- Image Notes (on/off)
- Thumbnails AutoHide (on/off)
- Image Zoom (on/off)
- Pictobrowser's background color
- Navigation Background color
Imago is an AJAX image gallery focused on simplicity and ease of use. It’s in plain JavaScript and builds on the mature AJAX library MooTools. No server-side scripting is required! Neither is Flash. Whether your photos are on Flickr, SmugMug or your own server, Imago can show them.
A very nice Flash-based template. Each image that flips to the next casts a subtle reflection on the ground. The size of the images can be easily adjusted by editing the template files. And adding a background image is a piece of cake.
ProtoFlow is a coverflow effect written in JavaScript. It uses Prototype and Scriptaculous to do the bulk of the work, and it uses Reflection.js to do all of the image reflection stuff.
Flickrshow is a very simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, and Internet Explorer 6.
(E)2 Photo Gallery is a open-source gallery built with MooTools JavaScript Library in a compact, modular and object-oriented framework. Tell the (E)2 Photo Gallery what folder your images are stored in, and it will automatically load them using PHP.
Features:
- Smooth Image Transitions
- Quick change between 4 designs
- Thumbnail Viewer
- Automatic Photo Detection
- Image Uploader Included
- Four Design Viewer Options
- No Database Needed
- Automatic Adjustment to Image Sizes
- Reads in Photo Meta Data (IPTC Info)
- Dynamically Built using PHP
- Easy Maintance
- Hide/Show Thumbnails
This plug-in for jQuery automatically detects the extension of each media file and applies the right player.
Pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the most attractive ones done by a presidential candidate. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.
If you are creating a fairly small gallery, hand-coding a grid of thumbnails will probably do. But for larger galleries or doing a lot of adding, editing and swapping of photos, you will probably want a better solution. And that solution is: an automatically generating photo gallery!
FancyBox is a tool for displaying images, HTML content and multimedia in a Mac-style Lightbox that floats over top the Web page.
Features:
- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
- Customizable through settings and CSS
- Groups related items and adds navigation.
- If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
- Support fancy transitions by using easing plugin
- Adds a nice drop shadow under the zoomed item
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.
Features
- Smart image preloading after the page is loaded
- Thumbnail navigation (with pagination)
- jQuery.history plugin integration to support bookmark-friendly URLs per-image
- Slideshow (with optional auto-updating url bookmarks)
- Keyboard navigation
- Events that allow for adding your own custom transition effects
- API for controlling the gallery with custom controls
- Support for image captions
- Flexible configuration
- Graceful degradation when javascript is not available
- Support for multiple galleries per page
Shadowbox is an online media viewer application that supports all of the Web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.
Features:
- Standards:
Shadowbox uses HTML markup that validates. It doesn't depend on phony HTML attributes in your anchor tags to make it work. The web has enough problems with standards compliance as it is, and Shadowbox does its best to not perpetuate them.
- Smart
Shadowbox uses a smart plugin detection mechanism behind the scenes that can spare your users from confusing torn image or puzzle piece icons when they don't have the plugins they need to view your content. Also, it will never overflow the viewport, forcing those obnoxious scroll bars.
- Free from Frameworks
Although Shadowbox has the unique ability to adapt to whatever JavaScript framework you choose, it's just as easy to run it as a standalone app, giving the developer a great deal of flexibility.
- Flexible
Shadowbox supports all of the web's most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. This makes it easy to display your content, no matter what it is.
- Customizable
Shadowbox supports a host of options that make it highly configurable. If you don't like the way something works, chances are very good that you can change it without digging through the code.
- Universal
Shadowbox ships with support for many of the world's most-spoken languages, making it easy to configure Shadowbox to communicate with your visitors in their native tongue.
- Neat and Compact
The Shadowbox code is neat, modular, and compact. Create a custom build of the code that includes just the features you need so it's as lightweight as possible.
- Plays Well with Others
Shadowbox tries to be as unobtrusive as possible. If your client doesn't have JavaScript enabled, it will stay completely out of the way and allow the page to function normally.
Plogger is the next generation in open-source photo gallery systems. A web application not bloated with superfluous features or complicated configuration settings. Plogger is a simple yet powerful tool — everything you need to share your images with the world.
Plogger is your photos integrated into your website, a fully featured photo sharing package with an attractive and easy to use administrative interface that makes managing your galleries a breeze. Integrating our gallery software into your website is as easy as inserting three lines of PHP code.
Features:
- Easier Install / Upgrade
- Smart Content
- Extensions / Plugins
- Better SEO
- Extended International Support
Take your favourite images full-screen. This template is based on PicLens and combine the power of PicLens and Media RSS technology to give you an easy way to add immersive multimedia slideshows to your own site. The exported Piclens gallery can also easily be used as a complete webpage.
Export your images in Picasa using this template. Visitors simply click the "Start slideshow" button on your site to start your presentation and can thereafter toggle into the famous Piclens full-screen mode.
For an even more enhanced browsing experience the free Cooliris PicLens add-on for all major browsers and operating systems adds this full-screen functionality to major websites like Flickr and Google Images.
Create dazzling multimedia presentations, slideshows and banners with Active Slideshow Pro. This extension builds on the success of Active Slideshow and gives you new spectacular effects and optimal control over your slides, texts, transitions and sounds.
Features Highlights:
- Customizable overlays and effects
- Free overlays and effects included
- Timed transitions on slides and text
- Easing enables special movement effect
Polaroid Gallery is a free, opensource flash gallery developed by myself, Christopher Einarsrud, in the year of 2006.
I was originally going to use this for my online portfolio, but I ended up going for something completely different.
I thought that it might come in handy for someone else, so I decided to release it here. After all, I did put some work into it and it would be a pity to see it all go to waste.
How it works:
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.
Latest Updates:
- You can now pass the xml-file you wish to load as a parameter when embedding the flash.
- You can specify your flickr ID and the gallery automatically loads the latest pictures from your flickr RSS feed
- The loaded pictures is automatically scaled, centred and smoothed
You May Also Like These Posts:
- 50 High Quality Free Web Templates and Layouts
- 10 Best jQuery Datepickers Plugins
- 8 jquery rating scripts for your next web application
- Awesome And Great Project Management Tools For Developers
- 21 Outstanding JavaScript Effects Every Web Developer Should Know
Topics
