Всем привет! В этом материале рассмотрим, как добавлять метки к фотографиям , причем адаптивно.
Всем привет! В этом материале рассмотрим, как добавлять метки к фотографиям, причем адаптивно.
Для этой задачи нам понадобится библиотека TAGGD
Скачайте ее и подключите нужные файлы
<script src="js/jquery.js"></script>
<script src="js/jquery.taggd.js"></script>
<link href="css/taggd.css">
Произведите конфигурацию и запустите скрипт
var options = {
// Выравнивание текста в всплывающих окнах
align: {
x: 'center', // слева, по центру или справа
y: 'center' // сверху, по центру или снизу
},
// Относительный сдвиг окон в пикселях
offset: {
left: 0, // горизонтальный сдвиг
top: 12 // вертикальный сдвиг
},
// Обработчики событий тэгов
handlers: {
// любое событие в чистом javascript является рабочим
click: function(e) {
alert('You clicked a button');
this; // DOM узел
e; // событие
},
// к примеру, вы можете использовать строки, чтобы
// показать, спрятать и переключать окна
mouseenter: 'show',
mouseleave: 'hide'
}
};
// магия происходит здесь
$('.taggd').taggd( options, data );
Данные(data) - это теги. Taggd поддерживает разные форматы, обратите на это особое внимание
var data = [
// x и y могут быть десятичными(0 - 1)
{
x: 0.512,
y: 0.33,
// (Необязательно) Установите текст для окна
// Если текста нет, окно не будет показываться
text: 'Huey',
// (Необязательно) Установите атрибуты элементов
attributes: {
id: 'my-id',
class: 'my-class'
}
},
// x и y могут быть также в пикселях
// Не переживайте, они будут прекрасно масштабироваться
{
x: 1052,
y: 356,
text: 'Duwey'
}
];
Вот и все! Примеры и работу с API вы можете посмотреть на официальном сайте. Спасибо за внимание!
