Фото с применением лупы jQuery + jquery.zoomy

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Фото с применением лупы jQuery + jquery.zoomy</title>
<style>
.zoomy	{
	position: absolute;
	display: none;
	background-repeat: no-repeat;
	border: 0;
	cursor: url(blank.gif), move;
	line-height: 100px;
	text-align: center;
	background-image: url(loading.gif);
	background-position: center;
	background-color: #fff;
	z-index: 1000;
	box-shadow: 3px 3px 10px #000;
	-webkit-box-shadow: 3px 3px 10px #000;
	-moz-box-shadow: 3px 3px 10px #000;
	}
.zoomy span {
	display: block;
	margin: 10px auto;
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
	background: -moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
	}
.zoomy img {
	opacity: 0;
	filter:alpha(opacity=0);
	}
.zoomy a {
	color: #333;
	text-decoration: none;
	}
.broke a {
	display: block;
	height: 100%;
	width: 100%;
	}
#brokeZoomy {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	left: 0px;
	background: #fff url(broke.gif) center no-repeat;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	}
</style>
<script type="text/javascript" src="https://www.03www.ru/2013-04/jquery.js"></script>
<script type="text/javascript" src="https://www.03www.ru/2013-04/88/jquery.zoomy0.5.js"></script>
<script type="text/javascript">
	$(function(){
		$('.zoom').zoomy({
			zoomSize: 200 // Размер "увеличительного стекла" в пикселях
		});
	});
</script>
</head>
<body>
<p><a href="https://www.03www.ru/2013-03/001.jpg" class="zoom"> 
<img src="https://www.03www.ru/2013-03/001.jpg" width=400>  
</a></p>
<p><a href="https://www.03www.ru/2013-04/jquery.js">jquery.js (164 kB)</a></p>
<p><a href="https://www.03www.ru/2013-04/88/jquery.zoomy0.5.js">jquery.zoomy0.5.js (10 kB)</a></p>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне