Просмотр больших изображений в стиле 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 примерами. Посмотреть, как это выглядит можно тут — dragexample.chinayanlun.com.»
Замечательно и просто, в смысле доходчиво. Я три дня назад узнал, что такое Html и css, а зделал все за 5 минут.Спасибо Большое.
На здоровье. Простой путь правильный путь, потому стараюсь писать как можно проще.