jQuery is Fun!

I'm having fun with jQuery and Fancybox. Not only can I do lightbox style effect with images and galleries, but I can use it for other things too.

I have a client who wants a diagram and all the sections of it to have an explanation box. I'm using fancybox with the elastic transition for these explanations to pop out. The coolest part is they elastic out and back in in the shape of the link.

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script>
$(document).ready(function(){
$(".more").fancybox({
 'titlePosition'  : 'inside',
 'transitionIn'  : 'elastic',
 'transitionOut'  : 'elastic'
});
});
</script>

HTML:

<a class="more" href="#popup1">HTML Popup</a>
<div style="display:none">
 <div id="popup1" style="width:500px; height:220px; overflow:auto;">
     <h2>Title</h2>
     <p>Text text</p>
 </div>
</div>