asked on

Code that will produce a javascript magnifier

Please take a look at this jquery code that should produce a nice scrolling magnifier effect. I updated the image and code links, but I must be missing something. You can see the working original at: http://ui.jquery.com/repository/latest/demos/functional/#ui.magnifier

Thanks!

John

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Magnifier</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/repository/latest/ui/ui.magnifier.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
$("#magnifier").magnifier();
}); 
</script>
 
<link href="http://ui.jquery.com/repository/latest/themes/default/ui.all.css" rel="stylesheet" type="text/css" />
 
</head>
    
<body>    
 
<div id="magnifier">
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
<img src="http://ui.jquery.com/repository/latest/demos/functional/images/clock.png" width="64" height="64" alt="demo image" />
</div>
 
</body>
</html>

Open in new window

SOLUTION

Pawel Witkowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

Thanks. I downloaded the first one last week, but I have no idea how to use. To make matters more complicated, that one is written with no line breaks which makes it virtually impossible for a beginner like me to read.. Is there an easy way to convert that to a readable form with all the proper line breaks?

With regard to the magnifier one, what would the html look like? Just like the one in their example above?

Thanks,

John

ASKER CERTIFIED SOLUTION

sh0e