<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как добавлять метки к фотографиям.

Как добавлять метки к фотографиям.

Всем привет! В этой статье мы рассмотрим, как добавлять метки к фотографиям, причем адаптивно.

Для этой задачи нам понадобится библиотека 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 вы можете посмотреть на официальном сайте. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

benom benom 31.07.2015 20:40:38

Спасибо вам Огромное

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.