UvumiTools Gallery 1.0.2
Allows you to display fancy photo galleries on your web site without requiring you to be a master programmer.
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 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.
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:
- 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).
In a hurry? Add it to your Download Basket!
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.