UvumiTools Gallery 1.0.2

Allows you to display fancy photo galleries on your web site without requiring you to be a master programmer.
UvumiTools Gallery - UvumiTools Gallery
  3 Screenshots
UvumiTools Gallery is a web script that 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.


- A website where you can include javascripts: Sounds obvious, but if you are a Myspace or Facebook user, you can forget this gallery. Then if you are a blogger, it will depend of how much freedom you get on your platform. Joomla actually offers Mootools support. If you are your own webmaster, well, you'll be stoked at how easy this gallery is to include on your site.
- A thumbnail for each picture: Sorry, we are not going to make those for you. You'll have to use you favorite image editing program to make smaller copies of your pictures. Some programs like Photoshop offer great batching tools, but we don't really have the time or inclination to explain how to do that here.
- Mootools 1.2 only: If you want to use this gallery, you'll need Mootools 1.2, but if you are already using another javascript frameworks like Prototype or JQuery, you may have to decide which one you want to keep because those frameworks were not designed to work together, and they ofen conflict with each other.

And yes, you actually do need version 1.2 of Mootools. If you are already using a previous version of Mootools then the gallery will not work unless you upgrade. Sure, upgrading is a hassle, but trust us, it's worth it in the long run.

Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), that's even better because you can use a single Mootools library for everything. All you'll need is the gallery script, and to make sure your library contains the following classes:

 o Core
 o Browser
 o Array
 o Function
 o Number
 o String
 o Hash
 o Event

 o Class
 o Class.Extra
 * Element
 o Element
 o Element.Event
 o Element.Style
 o Element.Dimensions

 o DomReady

 o Fx
 o Fx.CSS
 o Fx.Tween
 o Fx.Morph


 o Fx.Scroll
 o Fx.Elements
 o Assets

Main 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.
  • Options: We wanted to keep UvumiTools Gallery as simple as possible but also wanted to allow you to personalize it a bit. The default thumbnail size is 120px and the default spacing between them is 40px, but it is easy to change those values. Look at the example below for hints on how to change those settings.
  • Progress Indicator: A progress bar shows how many thumbnails are loaded, so your impatient viewers will have some idea of how long the gallery will take to load if they are on, say, a 56K modem.
  • Handles Missing Images: In case of broken links, the gallery doesn't freeze or crash. It just replaces the missing thumbnails with dummies. The thumbnail may be missing, but the full-size picture still might be there, and we need a way to view them. That's what those dummy placeholders are for. If the full-size picture can't be found, it will just let you know with a simple error message where the photo would be displayed.
  • Optimized Resizing: Oversized images are resized so they always fit their container. No need to scroll around in order to see a high-res photo. However, you can still view them in their real size by clicking the direct link provided in the mouseover caption.
  • Mouse Wheel Scrolling: When in slideshow mode, if you use your mouse wheel over the left column, the pictures will scroll.
  • Fancy Captions: If your thumbnails contain 'ALT' attributes in the source HTML (recommended), then the script will generate captions that will be displayed when you hover the full-sized image. Those caption areas also contain direct links to the pictures, which will allow your users to click through and view high resolution images directly if they want.
  • Fluidity: If you resize your window and your container has percentage or auto dimensions, the gallery will auto-adjust. You'll see the pictures moving around and repositioning themselves to make good use of available space on the page.
  • Looks Awesome and Unique: Come on, you know it's rad. If you're sick of the overused Lightbox image viewer, bring something fresh and new to your web site with the UvumiTools Gallery. People will think you're cool (no guarantees).

last updated on:
September 24th, 2008, 3:12 GMT
developed by:
Uvumi LLC
license type:
MIT/X Consortium License 
ROOT \ Internet \ HTTP (WWW)
UvumiTools Gallery
Download Button

In a hurry? Add it to your Download Basket!

user rating



Rate it!
3 Screenshots
UvumiTools Gallery - UvumiTools GalleryUvumiTools Gallery - UvumiTools Gallery
What's New in This Release:
  • Improvement: Mousewheel scroll event only captured when the mouse is hovering the left-hand column in the slideshow view. This is an improvement over the old method, which was to react to scrolling in the entire gallery area, which made it difficult to scroll the parent page.
read full changelog

Add your review!