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.

Here is a quick way to run your own popurls style website

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

Shane Plasebo

2009-07-26 05:00:23

http://www.netzgesta.de/loupe/ check this website. It has a full demo for download...

Pat

2009-06-04 07:23:52

This is a GREAT but I am having problems downloading the script. Can you help

Khamesi

2008-11-25 03:32:23

Where are the Pirates of the Caribbean

Sanaullah

2008-11-15 00:18:32

picture no meginfie at right top left and bottom corner. Please solve this problom. sorry for engliash

Phil

2008-10-07 23:16:28

When I changing the image src I didnt get any result pls help philliu@a-and-1.com.tw

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