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

1 сентября 2015 Антон Кулешов 1181 0

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

Всплывающие окна alertify

5 октября 2015 Антон Кулешов

Скучные JavaScript всплывающие окна – не самый лучший вариант информирования и общения с пользователем. В одной из прошлых статей я рассказывал, как легко и просто можно добавить «Сладкие Оповещения» на сайт, заменив стандартный вид alert-ов. Сегодня мы также рассмотрим хороший самодостаточный JavaScript код всплывающего окна под названием alertify. У него есть ряд преимуществ, которые делают его полезным инструментом в арсенале веб-разработчика.

Как сделать всплывающие подсказки, разбираемся с WebUI Popover

14 января 2015 Антон Кулешов

В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности Windows 3.11 (если кто помнит), и прочно закрепилась во всех приложениях, нацеленных на работу с пользователем – всплывающие подсказки.

Кнопки социальных сетей

28 мая 2016 Антон Кулешов

Приветствую, читатели falbar, сегодня мы рассмотрим одну простенькую JavaScript библиотеку sharer для добавления кнопок социальных сетей. Большой плюс этого скрипта заключается в том, что в нём реализована функция «поделиться» более чем для 20 социальных сетей.