Просмотр больших изображений в стиле google maps


Привет! Это статья о том, как перетягивать изображение больших размеров внутри меньшего контейнера. Пользоваться мы будет JqueryUI. Сначала необходимо настроить библиотеки. Для подключения можно воспользоваться подключение через CDN либо скачать файлы с официальных сайтов. Jquery я покдключил через CDN, а JqueryUI скачал с сайта и разложил по папкам скрипты в папку js, а  стили в папку css. Напомню сайты - Jqury - http://jquery.com/, JqueryUi - http://jqueryui.com.

Сначала создадим наш документ и назовем его к примеру index.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draggable picture</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
	<div>Пример 1: "перетаскивание изображений"</div>
	<div id="example1" class="example">
    	<div id="drag1"></div>
	</div>
	<div>Пример 2: "перетаскивание маленьких изображений внутри контейнера"</div>
    <div id="example2" class="example">
    	<div id="drag2"></div>
	</div>
	<div>Пример 3: "попытка пертаскивать большие изображения аналогично маленьким"</div>
    <div id="example3" class="example">
    	<div id="drag3"></div>
	</div>
	<div>Пример 4: "рабочее решение"</div>
    <div id="example4" class="example">
    	<div id="drag4"></div>
	</div>
</body>
</html>

Если внимательно посмотреть, то нам необходимы 5 файлов, скрипты Jquery и JqueryUI, а также стили JqueryUI. Их вы должны были скачать. Еще 2 файла будем писать сами. В папке css рядом с документом создадим файл style.css с таким содержимым:

@charset "utf-8";
/* CSS Document */
.example{
	min-width:800px;
	min-height:400px;
	width:500px;
	height:400px;
	margin-left:50px;
	overflow:hidden;
	border: ridge medium #0F3;
}
#drag1,#drag2{
	min-width:200px;
	min-height:125px;
	width:200px;
	height:125px;
	background:url(../images/map_small.jpg);
	overflow:hidden;
}
#drag3,#drag4{
	min-width:1920px;
	min-height:1200px;
	width:1920px;
	height:1200px;
	background:url(../images/map.jpg);
	overflow:hidden;
}

Теперь в папке js рядом с документом создадим скрипт и назовем его drag.js, заполним его таким содержимым:

$(function(){
	// example 1
	$("#drag1").draggable();
	// example 2
	$("#drag2").draggable({containment: "#example2"});
	// example 3
	$("#drag3").draggable({containment: "#example3"});
	// example 4
	var x1 = $('#example4').offset().left + $('#example4').outerWidth()-$('#drag4').width();
	var y1 = $('#example4').offset().top + $('#example4').outerHeight()-$('#drag4').height();
	var x2 = $('#example4').offset().left;
	var y2 = $('#example4').offset().top;
	$("#drag4").draggable({containment: [x1,y1,x2,y2]});
});

Если вы все сделали правильно, то у вас должна появиться страница с 4 примерами. Посмотреть, как это выглядит можно тут - dragexample.chinayanlun.com. К оформлению сразу прошу не цепляться, урок не о нем. Теперь давайте разберемся, что мы сделали. Мы использовали метод draggable библиотеки JqueryUI. Он является ключевым моментом в программирование перетаскиваний и позволяет любому объекту, к которому был применен следовать за мышью пока над ним нажата левая кнопка. Этот метод может быть вызван без параметров - тогда объекты будут перетаскиваться без каких-либо правил, а может принимать различные параметры, подробнее читать на странице http://jqueryui.com/demos/draggable/. Нам будет интересен конкретно один параметр - containment, который задает область в которой может осуществляться перетаскивание выбранного объекта.

Давайте рассмотри первый пример - маленькая карта, внутри большого контейнера. Если посмотреть соответсующий код в скрипте, то мы увидим простой вызов функции draggable:

// example 1
	$("#drag1").draggable();

Сразу недостаток - нет ограничений и картинка может вылететь за область и там потеряться так, что уже оттуда не вытащить.

Поэтому в о втором примере код немного модифицирован:

// example 2
	$("#drag2").draggable({containment: "#example2"});

Как видно мы указали в качестве параметра опции containment родителя нашего перетаскиваемого элемента. Теперь маленькая карта не выходит за пределы контейнера, но на такой маленькой карте сокровищ не разглядеть)))

Попробуем применить подход из примера 2 для прокрутки картинок больше контейнера (первый подход работает также как и с маленькими картинками):

// example 3
	$("#drag3").draggable({containment: "#example3"});

Фокус не удался... Пример третий самый ужасный из всех, никакой плавной прокрутки, картинка прыгает и совсем не за направлением движения мыши. Что делать? Если внимательно взглянуть на документацию, то есть возможность передавать 4 координаты области в которой может перемещаться наша картинка. Но внимание! Тут есть маленький подвох. Эта область определяет где может находится левый верхний угол нашей картинки, а область в которой может перемещаться угол большой картинки лежит за пределами контейнера! Это может сбить с толку, но все логично. Жаль что с большими картинками не все так просто как с маленькими. Но расчетов совсем не много - только 4 координаты. Поэтому в 4 примере код немного больше:

// example 4
	var x1 = $('#example4').offset().left + $('#example4').outerWidth()-     $('#drag4').width();
	var y1 = $('#example4').offset().top + $('#example4').outerHeight()-$('#drag4').height();
	var x2 = $('#example4').offset().left;
	var y2 = $('#example4').offset().top;
	$("#drag4").draggable({containment: [x1,y1,x2,y2]});

Кода немного больше, но 4 пример соответствует нашим ожиданиям и карта не выходит за пределы, при этом плавно следуя за мышью.

Возможность такой прокрутки изображений часто нужна в самых разных ситуациях, но наибольшее применение получила в картографических сервисах. Напоследок хотелось бы сказать, что если у вас предполагается изменяемая область отрисовки, то вам нужно будет при каждом изменении размера области пересчитывать координаты, ограничивающие перемещение. Успехов. До новых встреч.

4 thoughts on “Просмотр больших изображений в стиле google maps”

    1. Значит ссылка не такая заметная, ведь онлайн пример есть! Поправлю. Спасибо.

      «Если вы все сделали правильно, то у вас должна появиться страница с 4 примерами. Посмотреть, как это выглядит можно тут — dragexample.chinayanlun.com.»

  1. Замечательно и просто, в смысле доходчиво. Я три дня назад узнал, что такое Html и css, а зделал все за 5 минут.Спасибо Большое.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *