Фотографии на сайте делают его живым и интересным, порой бывает не лишним подписать места, события, а то и людей изображенных на фото. В свое время, опция отмечания друзей на снимках была невероятно популярно в социальных сетях. Если блог о путешествиях, кулинарный или любой другой, где изображений много и они собраны в галереи, то подписанные снимки будут выглядеть выигрышнее безымянных. Я же предлагаю для этих целей воспользоваться jQuery плагином taggd – скриптом, позволяющим сделать всплывающие подсказки для подписи фотографий.
У меня на сайте можно найти уже немало статей по теме tooltips (всплывающие подсказки) - этот скрипт будет хорошим дополнением к коллекции, тем более что он более узконаправленный и заточен под пометки на фотографиях. Решение довольно интересное и для начала нам потребуется подключить скрипты:
<link href="taggd.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.taggd.min.js" type="text/javascript"></script>
Теперь добавим само изображение с классом taggd, чтобы воспользоваться плагином:
<img src="demo.jpg" class="taggd" alt="Картинка с подсказкой" />
Давайте перейдём к основной части и настроим наши всплывающие подсказки на картинке:
$(function(){
var options = {
align: {
y: "top"
},
offset: {
top: 15
},
handlers: {
click: "toggle"
}
};
var data = [
{
x: 0.62,
y: 0.7,
text: "Rope"
},
{
x: 0.51,
y: 0.5,
text: "Bird"
},
{
x: 0.40,
y: 0.3,
text: "Water, obviously"
}
];
var taggd = $(".taggd").taggd(options, data);
});
Запускать скрипт будем после полной загрузке страницы. Настройка его заключается в формирование параметров options и data. Для удобства мы их сохранили в переменные. Теперь их рассмотрим поподробнее, чтобы иметь представление как ими пользоваться.
Настройка options:
- align – выравниваем текст в подсказе по осям x и y;
- offset – этот параметр отвечает за относительный сдвиг;
- handlers – при помощи этого параметра мы можем навесить обработчики событий на подсказку.
Настройка data – это массив из объектов, в котором указывается текст подсказки и её расположение:
- x – расположение по x;
- y – расположение по y;
- text – текст подсказки;
- attributes – здесь можно указать атрибуты(id, class и другие).