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

1 сентября 2015 Антон Кулешов 1175 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
Читайте далее

Слайдер карусель

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

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

На сегодняшний день у многих высоко посещаемых и популярных сайтов есть мобильная версия. Но как же эти ресурсы определяют: с чего зашел пользователь на сайт? Этот вопрос мы и рассмотрим в статье, а также разберем скрипт, который поможет нам обеспечить необходимый функционал.

Прогресс бар как на YouTube

8 сентября 2015 Антон Кулешов

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