Служба поддержки Документация наверх 0 на 0 р. корзина пуста

Товар успешно добавлен в корзину

Оформить заказ
г. Краснодар
+7 (861) 248-83-80
для звонков из России
8-800-775-83-80
Логотип лаборатории IT-решений ReadyScript(ready script реди скрипт, рэди скрипт, редискрипт )

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

Скачать

Текущая версия: 1.0.0 (07.08.2012) (Распространяется под MIT лицензией | GitHub)
Демо: открыть в новом окне. Автор: Артём Полторанин

Возможности

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

1. Разметка HTML

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

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

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 Возможные значения: 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