Next Prev

Loupe

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers and Internet Explorer (without excanvas), it'll degrade and your visitors won't notice a thing.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/loupe/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="expires" content="Mon, 7 May 2007 12:00:00 GMT">
	<link rel="icon" href="favicon.ico" type="image/ico">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<title>Caribbean</title>
<script type="text/javascript">
	// path to "loupe.png"
	// var loupePath = ""; 
</script>
<script src="javascript/loupe.js" type="text/javascript"></script>
<!--[if gte IE 6]> 
<script type="text/javascript">
	var loupePath = "vml/";
</script>
<script src="vml/loupe.js" type="text/javascript"></script>
<![endif]-->
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		 	font-family: georgia,serif;
		 	font-style: italic; 
		}	
		#content { 
			padding: 0;
			margin-left: 84px;
			margin-top: 40px;
			width: 450px;
		}
		#header {
		 	font-weight: normal; 
		}
	</style>
</head>
<body>

<div id="content">
<h2 id="header">Where are the Pirates of the Caribbean?</h2>
<div style="float: left; width:356px; height:205px; background:url(images/caribbean/small.jpg) no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img id="caribbean" onLoad="initLoupe(this.id,true);" src="images/caribbean/big.jpg" style="cursor:wait;" width="356" height="205" alt="large image" border="0" />
</div>
</div>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Markeezz Poloneez

2008-08-24 02:13:01

playing with 6.0.26 for the sake of its unfortunate popularity and the loupe script runs very slow with jerky movements

Steve

2007-11-21 03:19:35

Very nice, thanks! In IE I see all but the loupe.png: can you help me? gioquarto@hotmail.com

Robert

2007-10-20 10:29:50

Thanks, very nice!

Harsh Mittal

2007-10-01 11:48:25

hi its very nice how can we customize it for our use on my map i tried it by running the code and changing the image src but didnt get any result pls help harsh.yellocity@yahoo.com

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Loupe

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers and Internet Explorer (without excanvas), it'll degrade and your visitors won't notice a thing.

Comment on this example