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.
Article Info
- Posted By: Alex Hall
- On: 23rd Dec 2009 @ 11:59:42
- Comments: 29
- Rating: 4 / 5
- Hits: 10392
- Listed In: seo, javascript
- Short URL: http://bit.ly/8dyo5b
About the author
Alex is a web developer currently working for Worldview Limited in Morecambe, UK. Alex likes to write code and is proficient in HTML, CSS, PHP, JavaScript, Ajax, XML and XSLT. In his spare time Alex likes to write articles and scripts for various projects.
Author: AS
#1 | 20th Sep 2010 @ 14:32
When you mouse over sometimes it bugs and the caption does not come up or it comes up and flies down without having moused out...
Is that easy to fix?
This happens if you keep mousing in and out a few times.
reply
Author: Alex Hall
#2 | 20th Sep 2010 @ 18:22
Hi AS,
I've noticed this issue too. I have a feeling it's something to do with the event not stopping before the next event is triggered.
I guess the way to fix it would be to call a stop on the animation before triggering a new one. See http://developer.yahoo.com/yui/docs/YAHOO.util.Anim.html for more details on this.
I'll add it to the example!
reply
Author: CRAZY TAXI
#3 | 06th Nov 2011 @ 07:46
I also notice the same issue, but afterall nice one. SEO Toronto
reply
Author: AS
#4 | 21st Sep 2010 @ 12:40
I will try play around with this later on today and if I figure it out I will post a reply to this article, or else I will wait for you to add it to this example if you figure it out :)
This is a very cool article by the way, like all of your articles :) Keep up the good work and I love the YUI enthusiasm; it's brilliant!
reply
Author: Alex Hall
#5 | 21st Sep 2010 @ 13:30
Had a little play around and the captions are much better than they were although every now and again I still get a blip.
I tried calling the stop method, but this works really well and simply stops any other animation that was currently running. Trying to stop the animations onComplete didn't seem to work too well either.
All I've changed now is to set all animations to the same global variable so that they overwrite each other.
Glad you're finding the blog useful though!
reply
Author: Daniel
#6 | 08th Mar 2011 @ 11:55
Nice manual!! I'll try that too..
reply
Author: loan
#7 | 09th Jul 2011 @ 12:53
This is well known that money can make people independent. But how to act when somebody does not have cash? The only one way is to try to get the home loans and just short term loan.
reply
Author: packile
#8 | 09th Jul 2011 @ 13:16
I was searching for something like that for quite a long time and at last I have found it here. Your blog is better than others because of useful and meaningful posts. Keep posting them in the future too, I will be waiting for that. Windows tablet PC
reply
Author: John Budd
#9 | 14th Jul 2011 @ 11:34
Had the same problem also when mouse hovering. I also tried to stop the animations onComplete but it didn't work. If you can find solutions to the problem, please let us know.
Thanks,
Johnathan Budd
reply
Author: jack
#10 | 14th Oct 2011 @ 07:34
Thanks for sharing. i really appreciate it that you shared with us such a informative post.. Degree Program | Masters Degree Programs | Online Degree | Accredited Degree
reply
Author: Jerico
#11 | 20th Oct 2011 @ 17:53
I appreciate your work. This information is really cool and lot informative. Keep this work up and make us knowledgeable.
Data Roaming
reply
Author: ABELIA
#12 | 04th Nov 2011 @ 06:28
animation series simultaneously with the launch of the toyline. Cisco 640-822 The premise of the series is that the Lady lovely locks is the princess of the Kingdom of Lovely locks.Microsoft 70-649 She and her friends are helped by Pixietails maintain security realm his enemies.VMware VCP-410
reply
Author: mediahuset nova klage
#13 | 11th Nov 2011 @ 11:52
This is exactly what I was looking for. Thanks for sharing this great article! That is very interesting Smile I love reading and I am always searching for informative information like this!
reply
Author: payday loans online
#14 | 13th Nov 2011 @ 11:16
Thanks for sharing this great article! That is very interesting Smile I love reading and I am always searching for informative information like this!
reply
Author: cheap car insurance
#15 | 14th Nov 2011 @ 08:13
In order for us to make this as easy as possible for you, as well as our commenting system on all articles and tools
reply
Author: memory foam beds
#16 | 14th Nov 2011 @ 22:56
Caricature is one more or less work which uses photo. Many people loves cartoon. So, many caricaturist make their work as business thing. memory foam beds
reply
Author: Mobile App development
#17 | 15th Nov 2011 @ 10:51
"circles" you would like your content to reach. It's like Facebook groups, except that you don't have to have people Mobile App development
reply
Author: jsmith
#18 | 19th Nov 2011 @ 12:27
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.
arrest warrants
warrants for arrest
warrant search
reply
Author: htc explorer unlock
#19 | 19th Nov 2011 @ 14:29
can manipulate the styles and structure to your liking it will work in any cirumstance. htc explorer unlock
reply
Author: aarenace jack
#20 | 19th Nov 2011 @ 18:51
love it , very helpful seo australia
reply
Author: how to get ripped fast
#21 | 21st Nov 2011 @ 18:12
I have gained some useful information from this site. Thanks for sharing this information.how to get ripped fast
reply
Author: Schlüsseldienst Frankfurt am Main
#22 | 23rd Nov 2011 @ 10:22
I read blogs on a similar topic, but i never visited your blog. I added it to favorites and I'll be your constant reader. Schlüsseldienst Frankfurt am Main
reply
Author: boom
#23 | 24th Nov 2011 @ 06:58
I am happy when reading your blog with updated information! thanks alot and hope that you will post more site that are related to this site. Sony Digital Cameras
reply
Author: mayank
#24 | 25th Nov 2011 @ 05:42
This site is fantastic..Thanks for sharing this site with us. buy new 12 reg number plates
reply
Author: Property Maintenance Brisbane
#25 | 25th Nov 2011 @ 06:08
I understand all the coding but I want to know how we can save cookies in our database? Property Maintenance Brisbane
reply
Author: Building Inspections Gold Coast
#26 | 25th Nov 2011 @ 09:02
After reading this article on YUI, I am going to recommend others to read it as well, since I know they will enjoy it as much as I did.Building Inspections Gold Coast
reply
Author: Mayaking
#27 | 25th Nov 2011 @ 09:18
Merci pour le partage. Je l'apprécie vraiment que vous avez partagé avec nous un tel poste informatif. Vacation deals - vacation in Portugal | rent in Austria
reply
Author: PR 7 Backlinks
#28 | 25th Nov 2011 @ 09:26
In this article, I think it's very good, can see how the author is love, hope can the writing this spirit to keep going!!!!!
reply
Author: Pergolas Sydney
#29 | 25th Nov 2011 @ 10:39
After being referred to your blog, I am glad I decided to read it. Your writing is very inspirational and insightful. Thank you. Pergolas Sydney
reply