Показать Меню
falbar Всплывающие подсказки

Подписываем фотографии

Всплывающие подсказки

Фотографии на сайте делают его живым и интересным, порой бывает не лишним подписать места, события, а то и людей изображенных на фото. В свое время, опция отмечания друзей на снимках была невероятно популярно в социальных сетях. Если блог о путешествиях, кулинарный или любой другой, где изображений много и они собраны в галереи, то подписанные снимки будут выглядеть выигрышнее безымянных. Я же предлагаю для этих целей воспользоваться 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 и другие).
Источник
timseverien.com

Подписаться на обновления

Комментариев еще не оставлено