Lovely Animated Image Captions Using YUI

I saw a very lovely caption effect for images at MotionLab but realised it was written for jQuery. If you have read of my other blogs here on DeVSeO you may notice that I prefer the YUI javascript library by Yahoo for all of my javascript. So, I decided to create this effect using YUI instead of jQuery.

Firstly the setup. To make this work you will need an image and some text to describe that image (including a heading for the image). Here's the one I'm going to use for this example:

• Test 1

  This is a test to show you what this script will do. Hopefully a very nice little caption will appear when you rollover the image, which is pink!

  

• Test 2

  This one should do exactly the same as the other one and I have just put it in here as a bit of a test to show you how it looks with more images.

  

• Test 3

  And one more to do exactly the same as the other one and I have just put it in here as a bit of a test to show you how it looks with more images.

  

For semantics sake I've used an unordered list as I have used this for lists of images in the past, however, as long as you have a container div with the id of 'captions' and can manipulate the styles and structure to your liking it will work in any cirumstance. The following is the HTML:

<ul id="captions">
   <li>
      <div class="caption">
         <h3>Test 1</h3>
         <p>This is a test to show you what this script will do. Hopefully a very nice little caption will appear when you rollover the image, which is pink!</p>
      </div>
      <a href="/tools" title="Booyah">
         <img src="images/brandmain.gif" alt="Brand Main"/>
      </a>
   </li>
</ul>

As you can see I have also wrapped an anchor around my image as in this instance we are going to make them clickable too. The following is the CSS I have used for this example, as I said before this will need changing if you want a different structure or look about the captions:

a img {
   border: 0;
}
   ul#captions {
      overflow: hidden;
      margin: 0 auto;
      width: 756px;
   }
      ul#captions li {
         margin: 5px;
         overflow: hidden;
         position: relative;
         width: 232px;
         height: 105px;
         float: left;
         display: inline;
         border: 5px solid #333;
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
      }
         ul#captions li .caption {
            top: 0;
            height: 105px;
            left: 0;
            position: absolute;
            background: #000;
         }
            ul#captions li .caption h3 {
               background: url(images/white-arrow-norm.png) no-repeat right 0;
               font-size: 10px;
               margin: 5px 5px 0;
            }
               ul#captions li .caption p {
                  color: #999;
                  font-size: 10px;
                  padding: 5px 0 0 5px;
                  margin: 0
               }

Once you have all that on your page, all you need then is the javascript. The dependencies for this to work are the YUI Dom Event and animation utilities. To get them straight off the site use the following URL:

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

Or save the appropriate files to your server and include them on the page. The magic file is the only other dependency and that looks a little something like this:

YAHOO.namespace('caption');
YAHOO.caption.main = {
   YE: YAHOO.util.Event,
   Dom: YAHOO.util.Dom,
   $: YAHOO.util.Dom.get,

   init: function(){
      caption.captions = caption.Dom.getElementsByClassName('caption', 'div', 'captions');
      caption.Dom.batch(caption.captions, caption.create_captions);
   },

   create_captions: function(el){
      caption.Dom.setStyle(el, 'top', '80px');
      caption.Dom.setStyle(el, 'opacity', '0.8');
      caption.Dom.setStyle(el, 'cursor', 'pointer');

      caption.YE.on(el.parentNode, 'mouseover', caption.expand_caption, el);
      caption.YE.on(el.parentNode, 'mouseout', caption.detract_caption, el);
      caption.YE.on(el.parentNode, 'click', function(e, el){
         window.location = caption.Dom.getNextSibling(el).href;
      }, el);
   },

   expand_caption: function(e, el){
      caption.YE.stopEvent(e);
      var newAnim = new YAHOO.util.Motion(el,
         {
            top: { to: 0 }
         }, 0.2
      );
      newAnim.animate();
   },

   detract_caption: function(e, el){
      caption.YE.stopEvent(e);
      var newAnim = new YAHOO.util.Motion(el,
         {
            top: { to: 80 }
         }, 0.2
      );
      newAnim.animate();
   }
}
caption = YAHOO.caption.main;
caption.YE.onDOMReady(caption.init);

Copy the code, add it to your page and that should be it! As always, please use the comment form at the bottom of this page for updates/bugs/annoyances and enjoy the script.