jQuery.photoLabel

jQuery.photoLabel - это плагин, позволяющий отмечать людей и выводить отметки на фото, подобно тому как это сделано ВКонтакте.

Информация

Версия: 1.0.0
Автор: Артём Полторанин
E-mail: artpol@readyscript.ru
Web-site: photolabel.readyscript.ru
Демо: открыть в новом окне.

Возможности

Подпись области на фото можно выбрать из списка или набрать текстом
Воспроизведение отметок на фотографиях любого размера, даже если отметки были поставлены на фото с другим размером.
Можно указать произвольную гиперссылку у каждой отметки
Отложенная загрузка списка друзей
Быстрый поиск среди списка друзей
Встроена логика модерирования отметок

Как подключить?

1. Разметка HTML

<div id="block-1" class="photoLabel">
<div class="imgWrap" style="width:700px;">
<img src="res/img/photo1.jpg">
</div>
<div class="labelBox">
<div class="recoverTags"></div>
<div class="labelList">
На этой фотографии:
<ul class="labels">
</ul>
</div>
</div>
<div class="tools">
<a href="JavaScript:;" onclick="$('#block-1 .imgWrap').photoLabel('start')" class="turnOn">Отметить человека на фото</a>
<a href="JavaScript:;" onclick="$('#block-1 .imgWrap').photoLabel('stop')" style="display:none" class="turnOff">Готово</a>
</div>
</div>

2. Подключение необходимых скриптов и стилей.

<link rel="stylesheet" type="text/css" href="res/css/photolabel.css">
<link rel="stylesheet" type="text/css" href="res/css/ui-lightness/jquery-ui-1.8.22.custom.css">
<script type="text/javascript" src="res/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="res/js/jquery/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="res/js/jquery.photolabel.js"></script>

3. Инициализация плагина

$(function() {
$('#block-1 .imgWrap').photoLabel({
onStart: function() { //Обработчик на событие - "start" (начало процедуры отметок на фото)
$('#block-1 .turnOn').hide();
$('#block-1 .turnOff').show();
},
onStop: function() { //Обработчик на событие - "stop" (завершение процедуры отметок на фото)
$('#block-1 .turnOn').show();
$('#block-1 .turnOff').hide();
},
recoverContainer: '#block-1 .recoverTags', //Контейнер для ссылки "восстановить тег"
labelListContainer: '#block-1 .labelList', //Общий контейнер, для списка отметок.
labelContainer: '#block-1 .labels', //UL контейнер для списка отметок
addTagUrl: "php/tags.php?Act=addTag", //Адрес скрипта, который будет вызван при добавлении метки
removeTagUrl: "php/tags.php?Act=removeTag", //Адрес скрипта, который будет вызван при удалении метки
recoverTagUrl: "php/tags.php?Act=recoverTag", //Адрес скрипта, который будет вызван при восстановлении метки
friends: {
"1": {id: 1, fullname:"Татьяна Сидорова", url: "JavaScript: alert('здесь может быть переход на страницу Татьяны Сидоровой')"},
"2": {id: 2, fullname:"Петр Иванов", url: "JavaScript: alert('здесь может быть переход на страницу Петра Иванова')"},
"52": {id: 52, fullname: "Артём Полторанин", url: "JavaScript: alert('здесь может быть переход на страницу Артема Полторанина')"}
},
});
});

4. Настройка серверной части
Убедитесь, что по указанным адресам в параметрах addTagUrl, removeTagUrl, recoverTagUrl, скрипты-обработчики доступны. В комплекте со скриптом идет PHP файл-заглушка, эмитирующий действия сервера.

Свойства

Свойство

По умолчанию

Описание

startHandler

null

Элемент, при нажатии на который произойдет запуск отметок

labelListContainer

null

Общий контейнер, для списка отметок. Элементу будет присвоено display:none, в случае, если у фотографии нет отметок.

labelContainer

null

<UL> элемент, в который будет помещен список отмеченных друзей

recoverContainer

null

Контейнер для ссылки "восстановить тег". Если null, то восстановление отметок - отключается

friends

{}

Список друзей. Может быть задано: объект, строка, функция.

Объект означает что список друзей будет перечислен прямо при инициализации плагина. Формат объекта должен быть следующий:

{

                    "ID друга": {
                        
                        id: "ID друга",

                        fullname: "Полое имя друга"

                        url: "ссылка на страницу друга"

                    },

                    "ID друга": ......

}

Строка означает, что Вы указали URL по которому будет запрошен в формате json объект со списком друзей, который описан выше. Запрос произойдет только после вызова метода Start().

Если Вы указали Функцию в качестве значения параметра, то ожидается, что эта функция вернет объект со списком друзей, который описан выше.

areas

[]

Отметки, которые нужно отобразить на фотографии. Массив должен быть педставлен в следующем формате:

[{

                    id:"ID метки",

                    leftTopX:"координата X левого верхнего угла в процентах от ширины изображения",

                    leftTopY:"координата Y левого верхнего угла в процентах от высоты изображения",

                    rightBottomX:"координата X правого нижнего угла в процентах от ширины изображения",

                    rightBottomY:"координата Y правого нижнего угла в процентах от высоты изображения",

                    item_id: "ID пользователя, отмеченного на фото или 0",

                    creator_id:"ID пользователя, создавшего отметку",

                    item_url:"ссылка на страницу пользователя",

                    item_title:"подпись метки"

}, ... ]

onStart

function() {}

callback на событие Start

onStop

function() {}

callback на событие Stop

addPostData

{}

Дополнительные данные (ключ => значение) для POST запроса во время добавления отметки. Обычно здесь добавляют imgId.

addTagUrl

Адрес скрипта, который будет вызван сразу после добавлении отметки на фото. В данный скрипт методом POST будут переданы следующие данные:

Параметр	Описание
creator_id	id пользователя, который создал отметку (равен viewerId)
left	смещение отмеченной области по горизонтали относительно левого края изображения
top	смещение отмеченной области по вертикали относительно верхнего края изображения
height	высота отмеченной области
width	ширина отмеченной области
img_height	высота изображения
img_width	ширина изображения
item_id	id отмеченного пользователя
item_title	подпись отмеченной области
item_url	ссылка отмеченной области
leftTopX	координата X левого верхнего угла в процентах от ширины изображения
leftTopY	координата Y левого верхнего угла в процентах от высоты изображения
rightBottomX	координата X правого нижнего угла в процентах от ширины изображения
rightBottomY	координата Y правого нижнего угла в процентах от высоты изображения
...	в данный список также включаются переменные переданные в параметре addPostData

От скрипта ожидается ответ в формате json:

{

                        success: true,

                        tag_id: "ID добавлнного тега"

}

removeTagUrl

Адрес скрипта, который будет вызван после удаления тега

recoverTagUrl

Адрес скрипта, который будет вызван перед восстановлением тега

onAddTag

function(tagData) {}

Функция, которая будет вызвана, после добавления тега. Параметры: tagData - объект добавленной области

onDeleteTag

function(tagData) {}

Функция, которая будет вызвана, после удаления тега. Параметры: tagData - объект добавленной области

viewerId

-1

ID текущего пользователя на вашем сайте. (Данная информация позволяет корректно реализовать возможность удаления отметок, т.е. удалить отметку может только тот кто отмечен или тот кто отметил или администратор (об этом ниже). Предполагается что ставить отметки могут только зарегистрированные пользователи, а просматривать - все.)

isAdmin

Возможные значения: 0 или 1. Если указано 1, то это означает что на фото смотрит администратор, и возле всех меток будут отображены крестики для удаления. Если указано 0, то крестик(возможность удалить) возле отметки будет только в случаях:
1. если на фото смотрит человек, которого отметили на фото (area[index].item_id == viewer_id )
2. если на фото смотрит человек, который оставил отметку (area[index].creator_id == viewer_id)

recoverText

"восстановить"

Текстовое отображение ссылки "восстановить" удаленный тег.

tagDeletedText

"Отметка удалена."

Текстовое отображение надписи "Отметка удалена.".

noFriendText

"Список пуст."

Текстовое отображение надписи "Список пуст.".

Методы

Метод	Пример вызова	Описание
start	$('#imgWrap').photoLabel('start')	Включает режим отметок. Курсор над изображением принимает вид перекрестия. Ожидается выделение области на изображении.
stop	$('#imgWrap').photoLabel('stop')	Выключает режим отметок. Также вызывается при нажатии Esc в режиме отметок.

Это важно

Плагин зависит от jQuery, jQuery.ui.dialog, jQuery.ui.resizable, jQuery.ui.draggable