: Home / JavaScript / artykuły / Ajax Lupa - dwa praktyczne rozwiązania
Ajax Lupa - dwa praktyczne rozwiązania
Ocena użytkowników: / 0
SłabyŚwietny 
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:

ZOBACZ PRZYKŁAD

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:

  1. Korzysta z 2 wersji fotografii (oryginalnej i pomniejszonej) a tym samym unika się dezorientującego efektu zatarcia fotografii przez jej nadmierne pomniejszenie.
  2. Lupę podglądu szczegółów można włączać i wyłączać na życzenie.

ZOBACZ PRZYKŁAD

 

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>

	 &copy 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>

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież