jQuery. Активные зоны на фотографиях

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009
picture-6.png
Во многих социальных сетях стало модно давать возможность пользователям аннотировать произвольно выбранную ими зону на фотографии. Впервые, видимо, это было сделано на Flickr.com. Сделать такой сервис можно с помощью плагина jQuery Image Annotation. С помощью него легко создается горячая зона. Если потом двигать мышью по этой активной зоне, будет появляться всплывающая аннотация (tooltip).

Пример работы (demo) и источник (внешка)

Для работы плагина, сначала надо подключить библиотеки jQuery и jQuery UI и файлы плагина jquery.annotate.js и annotation.css.

Код: Выделить всё

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.5.3.min.js"></script>
<script type="text/javascript" src="js/jquery.annotate.js"></script>

<style type="text/css" media="all">@import "css/annotation.css";</style>

После этого добавим необходимый скрипт инициализации плагина и выведем пару активных зон с подсказками

Код: Выделить всё

<script language="javascript">
  $(window).load(function() {
    $("#toAnnotate").annotateImage({
      editable: true,
      useAjax: false,
      notes: [ { "top": 286,
                 "left": 161,
                 "width": 52,
                 "height": 37,
                 "text": "Small people on the steps",
                 "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
                 "editable": false },
               { "top": 134,
                 "left": 179,
                 "width": 68,
                 "height": 74,
                 "text": "National Gallery Dome",
                 "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
                 "editable": true } ]   
    });
  });
</script>


Функция $(window).load(function()) нужна для того выполнять скрипт, только после того как все картинки на странице были загружены.

HTML код:

Код: Выделить всё

<html>
  <head>
    <title>Demo Page</title>
  </head>
  <body>
    <div>
      <img id="toAnnotate" src="images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" />
    </div>
  </body>
</html>


Плагин может работать с зонами не только в статическом режиме, но и загружать, обновлять и удалять их используя AJAX. Зададим Get, Save и Delete URLы, и переключим флаг useAjax в состояние true.

Код: Выделить всё

$(window).load(function() { 
                $("#toAnnotate").annotateImage({ 
                    getUrl: "get.php", 
                    saveUrl: "save.php", 
                    deleteUrl: "delete.php", 
                    useAjax: true 
                }); 
            }); 

Сервер должен возвращать в ответ на запрос получения зон данные в формате JSON

Код: Выделить всё

[ { "top": 286, 
    "left": 161, 
    "width": 52, 
    "height": 37, 
    "text": "Small people on the steps", 
    "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5", 
    "editable": false }, 
  { "top": 134, 
    "left": 179, 
    "width": 68, 
    "height": 74, 
    "text": "National Gallery Dome", 
    "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe", 
    "editable": true } ]   
Вложения
jquery-image-annotation-1.3.zip    360.47 КБ • 80 скачиваний

Вернуться в «jQuery»