DEVseo

Making It Your Web

Lovely Animated Image Captions Using YUI

  • Posted 23rd Dec 2009 @ 11:59:42
  • Last update 24th May 2013 @ 18:01:35
  • By Alex Hall

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!

    Brand Main
  • 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.

    Brand Main
  • 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.

    Brand Main

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.

Comments (2)

S6Lcl1Ijn by Paulina

on 5th Sep 2013 @ 04:18:17

Thank you a lot for providing iniadivudls with remarkably terrific chance to read critical reviews from this website. It really is very beneficial and jam-packed with a good time for me and my office co-workers to search your site really thrice a week to read the latest issues you will have. And of course, I'm usually amazed for the amazing tricks you give. Certain 3 ideas in this posting are absolutely the best we have ever had.

0 0

Reply

Foot Ball by Jaiper Feliciano

on 27th Nov 2013 @ 03:50:33

I wanted to thank you for this great read!!I have been looking for this kind of info on other blogs and none of them went into the details as you did.

0 0

Reply

Add A Comment

Please note: all comments are moderated before they are published on this page.


f6e2a6
Cancel Reply

Loading

Complete!