Can't make UI magnifier work like I want with image links
I'm having trouble getting the UI magnifier to work as I would like
when I wrap it around a bunch of image hyperlinks. The closest I can
get is with the code I'm posting below, but what I really want is for
the images to rise up from the baseline, a la the Mac OS dock. I can
get it to work exactly as desired with a simple div full of images,
but when the images are wrapped in hyperlinks the formatting gets
screwed up. The stylesheet in my code fixes the worst of the problems
but I just can't overcome the baseline problem.
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/
xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navbar a {
display: block;
width: 67px;
height: 50px;
border: solid 1px;
float: left;
}
#navbar img {
border: none 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.dimensions.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.mouse.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.magnifier.js"></
script>
<script type="text/javascript">
$(document).ready (function ()
{
$('#navbar').magnifier ({
baseline : -1
});
console.log ($('#navbar'));
});
</script>
</head>
<body>
<div id="navbar">
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
<a href="/"><img width="67" height="50" src="test.jpg" /></a>
</div>
</body>
</html>