|
Wpisany przez Jan Jackowicz-Korczyński
|
|
niedziela, 20 czerwca 2010 04:20 |
|
Narzędzie LUPA oparte na technologii AJAX może być z powodzeniem użyte dla podglądu wielkoformatowych fotografii lub map i planów... - i nie tylko.
Poniżej dwa przykłady takich rozwiązań udostepnione w serwisie: ajaxdaddy
Rozwiązanie pierwsze:
TjpZoom Magnifier
Zdjęcie wielkoformatowe pomniejszone poniżej:
Przy zastosowaniu skryptu: TjpZoom Magnifier udostępnia za pomocą nawigacji kursorem podgląd szczegółów:
Poniżej zastosowany kod:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/tjpzoom/">
<style type="text/css">
body {color: white;background: #52616F;}
a { color: white; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier - Tutorial</title>
<style type="text/css">
code {background-color: #cccccc;}
.long {display:block;margin:1em;padding: 1em;}
</style>
<script type="text/javascript" src="/javascript/tjpzoom.js"></script>
</head>
<body>
<div>
<img src="/images/test.jpg" style="width: 774px; height: 264px;" onmouseover="TJPzoom(this, 'http://vilomedia.eyia.eu/jjk/help/joomla/pluginy/mz2010-example.jpg');">
</div>
</body>
</html>
Rozwiązanie alternatywne:
Loupe
Skrypt źródłowy równiez z serwisu ajaxdaddy
Jest on bardziej rozbudowany:
-
Korzysta z 2 wersji fotografii (oryginalnej i pomniejszonej) a tym samym unika się dezorientującego efektu zatarcia fotografii przez jej nadmierne pomniejszenie.
-
Lupę podglądu szczegółów można włączać i wyłączać na życzenie.
Poniżej zastosowany kod:
<?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>Ajax LUPA example </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: 900px;
}
#header {
font-weight: normal;
}
</style>
</head>
<body>
<div id="content"><p>
© by jjk : This is example to article in <a href='http://youthcoders.net/artykuly-js/630-ajax-lupa-dwa-praktyczne-rozwiazania.html' target='_blank'>youthcoders.net</a>
</p><hr />
<p> Zobacz ikona lupy w prawym dolnym rogu: włącza i wyłącza podgląd szczegółów.</p>
<h2 id="header">Marsz Żywych - 2010</h2>
<div style="float: left; width:650px; height:222px; background:url(http://vilomedia.eyia.eu/jjk/help/joomla/pluginy/middle_mz2010-example.jpg) no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img id="caribbean" onLoad="initLoupe(this.id,true);" src="http://vilomedia.eyia.eu/jjk/help/joomla/pluginy/mz2010-example.jpg" style="cursor:wait;" width="900" height="307" alt="large image" border="0" />
</div></div>
</body>
</html>
|
