David Cilley's AJAX Imaging Blog : Thumbnails

Using YUI Animation to slide AJAX thumbnails in and out

David Cilley — Mon, 03 Mar 2008 16:58:00 GMT

One of the easiest usability improvements that can be made to an imaging application, is the ability to hide the thumbnails from view when they are no longer needed. Most users would prefer to see as much of the image, and as little of the application on the screen as possible.

Using YUI's Animation Utility, you can accomplish this task, while adding a little more feedback that something is happening.

The thumbnails and the main viewer are placed in separate table cells, so that the whole table can be fit to the width of the browser (a common requirement for imaging apps). The object that will be used for the animation, is a div tag (slideAnim in this case) that holds the thumbnails, and clips the content if it's too large. Keep in mind that height and width must be defined on all objects up the tree, if percentage based values need to be used.

Here's how I did it:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/animation/animation-min.js"></script>

<button id="demo-run" onclick="return false;">SlideIn/Out</button>

   function slideIn(){
      _animIn.animate();
   }
</script>

AJAX Thumbnails and On Demand Tiling Unleashed!

David Cilley — Thu, 03 Aug 2006 15:11:00 GMT

It's been a while since I last spoke about anything on this blog... the main reason for this is we've been hard at work getting the DotImage 4.0 release out. Now that it's out, I'd like to show you the two coolest additions to the our AJAX WebControls. We've added a new AJAX thumbnail control, and we've completely redeveloped the WebImageViewer control.

After many requests for live scrolling and panning, our original control would use a delayed on demand scroll (where only the part of the image visible was updated when the control was finished scrolling), we can now scroll the image like you would in windows. It splits the image up into tiles, and it loads the tiles when they are scrolled to (OnDemand). This technology was also used in our new thumbnail control, for the same load on demand thumbnailing. The end result is really slick.

We currently have two demos active and public on the Atalasoft web site. The first one that I'm going to show you is a slick combination of the two controls in action. The AJAX Multipage Tiff Demo uses code snippets that I've blogged about in the past, and takes advantage of the PNG transparency fix I spoke of in my last post. Here are links to those blog posts if you're interested:

Paging Through Multipage Tiffs using RemoteInvoke
PNG Transparency in Internet Explorer Revisited

This demo shows how you can open multipage tiff images over the web, save changes, export them to pdf, switch pages, zoom, pan, crop, redact, deskew, despeckle, remove noise, rotate, and fit the image to the viewer all without posting back. It also adds a little extra UI feedback to make the user experience better. This can all be done using DotImage Document Imaging v4.0.

The next demo I'll be going over is our multi-control demo converted to our latest version. The AJAX Photo Viewer Demo shows how you can use two of these WebImageViewer controls together for live scrolling and panning, and it also demonstrates many of our commands, all done using our AJAX method of RemoteInvoking. Try dragging the preview selection rectangle around, it'll update your scroll position while your dragging it.

In this demo, you can upload images, zoom, fit the image, pan, crop, blur, unsharp mask, emboss, change threshold, pixelate, flip, rotate, add a drop shadow, change the color depth, and even draw rectangles, circles, text, and overlay images with transparency. This also takes advantage eliminating full page postbacks.

Please let me know if you would like to see any other demos using these two controls in more specific scenarios. I'd be happy to make a few more if time permits, thanks! :)