David Cilley's AJAX Imaging Blog

Using YUI Animation to slide AJAX thumbnails in and out

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:

<!-- YUI Dependencies -->
<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>

<table style="width:100%;height:630px;">
<tr>
   <td valign="top">
      <div id="slideAnim" style="overflow:hidden; width:202px; height:630px;">
         <cc1:webthumbnailviewer id="WebThumbnailViewer1" runat="server" width="200px" height="600px" viewerid="WebImageViewer1" thumbsize="160, 120"></cc1:webthumbnailviewer>
      </div>
   </td>
   <td style="width:100%;" valign="top">
      <cc1:webimageviewer id="WebImageViewer1" runat="server" height="600px" width="100%" />
   </td>
</tr>
</table>       

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

<script type="text/javascript">
   var _vis = true;
   var _outAttributes = { 
       width: { to: 0 } 
   };

   var _inAttributes = { 
       width: { to: 202 } 
   };
    
   // create animation objects
   var _animOut = new YAHOO.util.Anim('slideAnim', _outAttributes, 1, YAHOO.util.Easing.easeOut); 
   var _animIn = new YAHOO.util.Anim('slideAnim', _inAttributes, 1, YAHOO.util.Easing.easeIn); 
    
   // bind events
   YAHOO.util.Event.on('demo-run', 'click', slide);
   _animOut.onComplete.subscribe(onSlideOut);
   _animIn.onComplete.subscribe(onSlideIn);
    
   function onSlideOut(){
      _vis = false;
   }   

   function onSlideIn(){
      _vis = true;
   }    
    
   function slide(){
      if (_vis){
         slideOut();
      }
      else{
         slideIn();
      }
  
      return false;
   }
    
   function slideOut(){
      _animOut.animate();
   }

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