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

Ответить
Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.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 КБ • 135 скачиваний

Ответить