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:
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.
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.
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.
Please note: all comments are moderated before they are published on this page.
Comments (2)