July 16, 2014gearmobile Reading time ~4 minutes

Библиотека Animate.css

В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.

Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.

Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.

Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (

1	animate.min.css

) или несжатую (

1
animate.css

) версию библиотеки.

Подключение Animate.css

Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл

1	animate.css

<head>
  <meta charset="utf-8">
  <title>Animate CSS</title>
  <link rel="stylesheet" href="css/animate.css">
  ...
</head>

И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.

Добавление CSS-классов из Animate.css

Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс

.animated

. CSS-расшифровка этого класса также предельно проста:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет

bounceIn

) этого эффекта и добавляем его в качестве имени класса к HTML-элементу, у которого уже есть класс

1
.animated

(вспоминаем основы CSS - такая конструкция называется мультиклассовостью):

<h1 class="animated bounceIn">
  Animate.css
</h1>

Все - можно проверять работу библиотеки Animate.css.

Использование jQuery c Animate.css

Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:

… и прописываю в скрипте инициализации

1	animate_me.js

$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
})

Вуаля - все отлично работает!

Можно немного усложнить задачу и добавить с помощью Jquery событие

hover

к элементу

1
img

, затем “повесить” на него класс анимации

1
rotateIn

1
animated

из библиотеки Animate.css:

<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>

$(document).ready(function() {
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
)})

Управление задержкой анимации

Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе

.animated

. Например, с

1
animation-duration: 1s

на

1
animation-duration: .4s;

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Полный код примера на Animate.css

Полный код рассмотренного в этой статье примера привожу ниже.

<h1 class="animated bounceIn">Animate.css</h1>
<h2>animate me with jquery!</h2>
<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>
<!--  SCRIPTS  -->

$color: #778899;

h1,h2,figure{
  margin: 50px auto 0;
  text-align: center;
}

h1{
  font: normal 72px/1.3 Georgia, sans-serif;
  color: darken($color,10%);
}

h2{
  font: normal 56px/1.3 Georgia, sans-serif;
  color: lighten($color,5%);
  text-transform: capitalize;
}

figure img:hover{
  cursor: pointer;
}

$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
 )})

Библиотека Animate.css в действии

На этом все.

July 15, 2014gearmobile Reading time ~5 minutes

Кросс-браузерный placeholder

Короткая статья, посвященная вопросу кросс-браузерности такого HTML5-атрибута для формы, как
1
placeholder
.

Недавно столкнулся в подобным вопросом, решение не смог найти. Однако, в книге “Недостающее руководство по HTML5” случайно столкнулся с подробным описанием решения этой маленькой проблемы. Проблема и вправду маленькая - вопрос поддержки или не поддержки браузерами данного атрибута на сегодняшний день - это мелочь. Ну правда, разве пострадает функциональность верстаемого сайта от того, что в поле поиска не будет отображаться подстановочный текст? Конечно, нет!

Еще один момент - говоря о кросс-браузерной поддержке атрибута

1	placeholder

, почти всегда подразумевается на самом деле поддержка этого атрибута только одним браузером. Конечно, это многострадальный Internet Explorer версии 7 или 8. О версии Internet Explorer 6 можно уже забыть. Остальные браузеры нормально справляются со своей задачей и понимают, что такое

1
placeholder

Автор статьи обладает некоторой долей перфекционизма - для него и такая мелочь является принципиальной мелочью, камнем преткновения. И вот, этот камень можно отодвинуть в сторону.

Кросс-браузерные заплатки для HTML5

Начну с того, что решение вопроса кросс-браузерного

1	placeholder

было создано уже давно. Это для меня данный факт был открытием! Более того, существует большое количество способов, решающих данную проблему. Все они собраны воедино по одному адресу на GitHub - HTML5 Cross Browser Polyfills . Вся эта коллекция называется “Кросс-браузерные заплатки для HTML5”, но в нашем случае нужен только один раздел этой коллекции - Web Forms : input placeholder.

Ого - там не одно решение, а целых одиннадцать! Причем, все они реализованы на JavaScript, поэтому и кросс-браузерные. Выбирать можно любой, какой понравиться - принцип работы и способ подключения к HTML-странице у них всех почти одинаков. Я возьму для себя способ jquery.placeholder.js, просто потому, что название понравилось.

Плагин

1	jquery.placeholder.js

может реализовать поддержку атрибута

1
placeholder

как в Internet Explorer 7 или 8, так и в Internet Explorer 6. Ну, Internet Explorer 6 - это уже слишком! На момент написания статьи многие верстальщики (конечно, не все) имеют тенденцию “забывать” о существовании даже Internet Explorer 8.

Подключение плагина jquery.placeholder.js

Подключение плагина

1	jquery.placeholder.js

абсолютно стандартное для такого рода скриптов. Ниже привожу пример такого подключения в HTML-коде:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
...

Затем идет скрипт инициализации для данного плагина. Общая картина будет выглядеть таким образом:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script>
  $('input, textarea').placeholder();
</script>

Плагин

1	jquery.placeholder.js

делает в HTML-документе выборку по двум HTML-элементам -

1
input

1
textarea

. А затем применяет к ним метод

1
placeholder()

- все просто.

HTML-форма с placeholder

Ниже привожу пример HTML5-формы, в которой применен атрибут

1	placeholder

в полях ввода, реализованных через элемент

1
input

. А также в элементе

1
textarea

<form action="#">
  <h1>zoo keeper application form</h1>
  <p>Please complete the form. Mandatory fields are marked as a <span>*</span></p>

  <!-- CONTACT DETAILS  -->
  <fieldset>
    <legend>contact details</legend>
    <label for="name">name <span>*</span></label>
    <input type="text" name="name" title="Your full name here" placeholder="John Resig" autofocus required><br>
    <label for="telephone">telephone <span>*</span></label>
    <input type="tel" name="telephone" title="Input your phone number here" placeholder="9(989)600-30-20" required><br>
    <label for="email">email <span>*</span></label>
    <input type="email" name="email" title="Your email required" placeholder="test@mail.ru" required>
  </fieldset>

  <!-- PERSONAL INFORMATION  -->
  <fieldset>
    <legend>personal information</legend>
    <label for="age">age <span>*</span></label>
    <input type="number" title="Your real age, please" name="age" min="10" max="90" value="29" step="1" required><br>
    <label for="gender">gender</label>
    <select name="gender" id="gender" size="1">
      <option value="female">female</option>
      <option value="female">male</option>
    </select><br>
    <label for="message">When did you first know you wanted to be a zoo-keeper?</label>
    <textarea name="message" id="message" cols="30" rows="10" placeholder="I have a dream ..."></textarea>
  </fieldset>

  <!-- FAVORITES ANIMALS  -->
  <fieldset>
    <legend>pick your favorite animals</legend>
    <label for="zebra"><input type="checkbox" value="zebra">zebra</label>
    <label for="elephant"><input type="checkbox" value="elephant">elephant</label>
    <label for="cat"><input type="checkbox" value="cat">cat</label>
    <label for="wildebeest"><input type="checkbox" value="wildebeest">wildebeest</label>
    <label for="anaconda"><input type="checkbox" value="anaconda">anaconda</label>
    <label for="pingeon"><input type="checkbox" value="pingeon">pingeon</label>
    <label for="human"><input type="checkbox" value="human" checked="checked">human</label>
    <label for="crab"><input type="checkbox" value="crab">crab</label>
  </fieldset>

  <input type="submit" value="send">
</form>

Проверка поддержки placeholder в IE8

JS-скрипты подключены и создана HTML-разметка. Для тестирования работы плагина

1	jquery.placeholder.js

воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута

1
placeholder

- это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:

Галочками отмечены поля, в которых сработал плагин

1	jquery.placeholder.js

- если бы не он, там было бы пусто. Отлично - плагин работает и его можно применять в деле, на готовом проекте!

July 11, 2014gearmobile Reading time ~6 minutes

Bourbon + Sass - краткое знакомство

Библиотека миксинов (mixin) под препроцессор Sass под названием Bourbon - вот о чем будет сегодняшний краткий обзор.

Данная статья не могла не появиться по нескольким причинам. Первая - я являюсь большим поклонником препроцессора Sass и библиотеки миксинов Compass под него. Библиотека Bourbon является аналогом Compass, просто она меньше по размеру и возможностям. Но это не значит, что она хуже - она обладает некоторыми возможностями, которых нет в Compass.

Помимо этого, существует прекрасная сравнительная статья Sass-гуру Hugo Giraudel, посвященная этим двум библиотекам под один препроцессор. Оригинал статьи находиться здесь - Sass Frameworks: Compass or Bourbon?, а посильный перевод этой статьи размещен здесь - Что выбрать - Compass или Bourbon?. В этой статье Юг Жиродель (Hugo Giraudel) приводит преимущества использования библиотеки Bourbon и сопутствующих ему пакетов, таких как Neat для создания адаптивной CSS-сетки (grid).

Однако, после прочтения вышеназванной статьи один вопрос остается открытым - а как установить библиотеку Bourbon? Что можно в ней делать и как это делать? На эти вопросы я постараюсь ответить самому себе (и возможно - вам, уважаемый читатель).

Установка библиотеки Bourbon

Инсталляцию библиотеки миксинов Bourbon я буду производить под операционной системой Linux Mint 17 Cinnamon, просто потому что мне так интереснее. Под OS Windows процесс ничем не отличается от того, который будет описан здесь. Единственное условие - на момент установки Bourbon в системе уже должны стоять и нормально работать Ruby + Sass.

Установка библиотеки сводиться к одной вещи - установке пакета

bourbon

под Ruby. Выполняется это одной командой:

$ sudo gem install bourbon

Проверяю, какая версия этой библиотеки “попала” ко мне:

$ bourbon -v
  Bourbon 4.0.2

Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.

Создание проекта Bourbon

Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем

bourbon

$ cd ~/Projects/
$ mkdir bourbon
$ cd bourbon/

… и запускаю там команду:

$ bourbon install
  Bourbon files installed to bourbon/

Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.

В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:

@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3/transition";
@import "compass/css3/border-radius";

В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.

Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда -

bourbon

) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки

1
bourbon

, то увидим такую картину:

$ ls -l bourbon/
  drwxr-xr-x 2 addons
  -rw-r--r-- 1 _bourbon-deprecated-upcoming.scss
  -rw-r--r-- 1 _bourbon.scss
  drwxr-xr-x 2 css3
  drwxr-xr-x 2 functions
  drwxr-xr-x 2 helpers
  drwxr-xr-x 2 settings

Видим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет

css3

Содержимое папки Bourbon

Видим здесь готовые миксины для создания самых различных CSS3-эффектов -

1	border-radius

1
gradient

1
transform

1
transition

и так далее. Ну, теперь все понятно, не правда ли?

Включение библиотеки Bourbon в проект

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

@import

. Для этого создаю структуру папок и файлов будущего проекта (однако, Compass это может делать одной командой!):

$ mkdir sass
$ mkdir css
$ touch sass/style.scss
$ touch css/style.css
$ touch index.html

… и помещаю одну строку в таблице стилей

1	style.scss

@import "bourbon/bourbon";

Мониторинг изменений в проекте Bourbon

Чтобы автоматически отслеживать изменения в файле таблиц стилей

1	style.scss

и выполнять компиляцию в CSS-стили, запускаю команду мониторинга:

$ sass --watch sass/style.scss:css/style.css

Использование библиотеки Bourbon

Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.

Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.

Bourbon - создаем кнопки

Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.

Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:

1 simple
1 pill
1 shiny

Поэтому в HTML-коде создаю кнопку:

<button class="simple" type="button"></button>

… и прописываю для нее миксин в таблице стилей

1	style.scss

.simple{
  @include button;
}

Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов

pill

1
shiny

. При этом можно передать в качестве аргумента фоновый цвет создаваемой кнопки:

.pill{
  @include button(pill);
}

.shiny{
  @include button(shiny, #ff9900);
}

Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле

style.css

- вы будете поражены однозначно!

Bourbon - создаем треугольники

Кто из внимательных читателей может на память создать треугольник на чистом CSS? Конечно, там нет ничего сложного, но уверен - время у вас все равно уйдет на то, чтобы вспомнить все тонкости этого процесса - обнулить ширину и высоту, задать ширину и цвет границы, убрать ее с трех остальных сторон и так далее.

А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину

triangle

передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:

@include triangle(2em, #ff9900, up);

Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.

Заключение

На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!

July 10, 2014gearmobile Reading time ~11 minutes

Слайдер liSlidik

На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.

Имя этого плагина запоминающиеся - liSlidik и проживает он здесь - liSlidik - jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.

Однако, я хотел разобраться с плагином liSlidik - понять, как его подключать, настраивать и управлять. Поэтому все же появился обзор этого слайдера, который будет представлен ниже.

Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.

Установка плагина liSlidik

Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце - js-файл с инициализацией скрипта и его настройками:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.8.min.js"></script>
<script src="js/liSlidik.js"></script>
<script src="js/settings.js"></script>
</body>

Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке - liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов - liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения - это кому как нравиться.

HTML-разметка для liSlidik

Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична - в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:

<ul id="slider" class="slider">
  <li><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
</ul>

Единственный важный момент при создании HTML-разметки заключается в том, что для элемента

ul

необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik - иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента

1
ul

понадобиться для последующей стилизации слайдера на HTML-странице.

Инициализация скрипта liSlidik

Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:

$(document).ready(function(){
  $('#slider').liSlidik();
});

Минимальная стилизация скрипта liSlidik

Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!

Минимальная CSS-стилизация слайдера liSlidik:

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    position: absolute;
    top: 0;
    left: 0;
    img{
      vertical-align: top;
    }
  }

Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств

width

1
height

являются произвольными и зависят от конкретных условий - ставить нужно вместо них то, что необходимо. Это же относится и к

1
margin: 20px auto;

, которое было применено здесь для “красоты”.

Вот теперь слайдер liSlidik готов к работе. Более того - он работает! Это минималистичный слайдер, без каких-либо кнопок управления:

Скрипт liSlidik работает

Кнопки управления для liSlidik

Скрипт liSlidik имеет в своем составе полный набор органов управления создаваемым им слайдером. Начну с малого и приступлю к созданию кнопок перемотки взад-вперед для слайдшоу. Стоит сразу сказать, что все органы управления показом слайдшоу в скрипте liSlidik не создаются автоматически - их нужно создавать вручную (данный факт мне также не совсем понравился):

<!--  arrows  -->
<a data-slidik="slider" class="next" href="#">Next</a>
<a data-slidik="slider" class="prev" href="#">Prev</a>

HTML-разметка для кнопок перемотки создается через элемент

, у которого обязательным атрибутом должен быть

1
data-slidik="slider"

, где

1
slider

- это имя идентификатора нашего слайдера. Классы

1
class="next"

1
class="prev"

присутствуют для тех же целей, что и в элементе

1
ul

- на них “вешаются” CSS-стили:

/*  ARROWS  */
.next,
.prev{
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 2;
  top: 95px;
  background-color: #000;
  @include border-radius(50%);
  @include squish-text;
  @include single-transition(background-color, .2s, ease-in);
}
.next{
  left: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}
.prev{
  right: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}

Смотрим результат подключения кнопок перемотки в liSlidik:

Плагин liSlidik c кнопками перемотки

Пагинация в слайдере liSlidik

Подключение пагинации в скрипте liSlidik выполняется аналогично - нужно вручную создать блочный элемент

div

с атрибутом

1
data-slidik="slider"

и классом

1
class="dotted"

(который также обязателен в данном случае!):

<!--  pagination  -->
<div data-slidik="slider" class="dotted"></div>

Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса

dotted

является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):

/*  PAGINATION  */
.dotted{
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 3;
  @include pie-clearfix;
  .dottedItem{
    cursor: pointer;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    background-color: lighten(#000,30%);
    text-align: center;
    @include border-radius(50%);
    @include single-transition(background-color, .2s, ease-in);
    &:hover,&:focus{
      background-color: lighten(#000,40%);
    }
    &.cur{
      background-color: lighten(#000,50%);
    }
  }
}

Присутствующее в коде выше имя класса

.cur

обозначает активный элемент, который можно стилизовать на свой выбор. Еще один странный момент, связанный со слайдером liSlidik - внимательно посмотрите на снимок работающего скрипта:

Скрипт liSlidik c пагинацией

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

Заголовок слайдера liSlidik

Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента

div

, для которого прописывается атрибут

1
data-slidik="slider"

с обязательным именем класса

1
class="caption"

<!--  caption  -->
<div data-slidik="slider" class="caption"></div>

И произвольные CSS-стили для него:

/*  CAPTION  */
.caption{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 6px 0;
  text-indent: 1em;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.5);
}

Текст для показа на странице скрипт liSlidik берет из содержимого атрибута

alt=

для элемента

1
img

. Поэтому не забудьте его прописать в своей HTML-разметке!

Скрипт liSlidik c заголовком

Миниатюры в скрипте liSlidik

Плагин liSlidik имеет возможность создания миниатюр в виде галлереи изображений, которая выступает в роли пагинации. На странице демо-примеров показан вариант такого слайдшоу. Однако, у меня не было желания разбираться с вопросом построения

1	thumnnails

в этом примере.

Заключение

Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта - liSlidik - jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:

<ul id="slider" class="slider">
  <li class="show"><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
  <!--  arrows  -->
  <a data-slidik="slider" class="next" href="#">Next</a>
  <a data-slidik="slider" class="prev" href="#">Prev</a>
  <!--  pagination  -->
  <div data-slidik="slider" class="dotted"></div>
  <!--  caption  -->
  <div data-slidik="slider" class="caption"></div>
  <!--  previews  -->
  <!-- <div data-slidik="slider" class="thumbs"></div> -->
</ul><!--  SCRIPTS  -->

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    border: 2px solid #000;
    position: absolute;
    top: -2px;
    left: -2px;
    &.show{
      display: block;
      z-index: 2;
    }
    img{
      vertical-align: top;
    }
  }
  /*  ARROWS  */
  .next,
  .prev{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 95px;
    background-color: #000;
    @include border-radius(50%);
    @include squish-text;
    @include single-transition(background-color, .2s, ease-in);
  }
  .next{
    left: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  .prev{
    right: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  /*  PAGINATION  */
  .dotted{
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 3;
    @include pie-clearfix;
    .dottedItem{
      cursor: pointer;
      float: left;
      margin: 0 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      font-size: 12px;
      background-color: lighten(#000,30%);
      text-align: center;
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in);
      &:hover,&:focus{
        background-color: lighten(#000,40%);
      }
      &.cur{
        background-color: lighten(#000,50%);
      }
    }
  }
  /*  CAPTION  */
  .caption{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    padding: 6px 0;
    text-indent: 1em;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    color: rgba(255,255,255,.5);
  }
}

На этом все.

July 07, 2014gearmobile Reading time ~6 minutes

Слайдер bxSlider

Обзор еще одного слайдера под библиотеку jQuery под названием bxSlider.

Данный слайдер обладает полным набором возможностей, адаптивный и легко устанавливается в проекте. Адрес проживания слайдера bxSlider - The Responsive jQuery Content Slider.

Конкретно какими возможностями обладает bxSlider:

полностью адаптивный
может быть горизонтальным, вертикальным
может содержать в себе изображения, видео или HTML-контент
поддержка функций touch/swipe
для анимаций используются CSS transitions
маленький размер файла, легко видоизменяется и настраивается
поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
большое число настроек

Установка слайдера bxSlider

Установка bxSlider ничем не отличается от установки ему подобных скриптов для создания carousel. Скачиваем с сайта архив - в нем есть все необходимое для подключения и работы. Помимо этого, там есть несколько дополнительных файлов типа

1	jquery.easing.1.3.js

1
jquery.fitvids.js

. Но нет библиотеки jQuery, которую автор рекомендует подключать в проект через CDN. Я подключу jQuery локально, версии 1.11.1.

В HTML-файле перед закрывающим тегом body произвожу подключение скриптов в таком порядке:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/bxslider.js"></script>

Файл

1	jquery.bxslider.min.js

беру из скачанного архива, файл

1
bxslider.js

- произвольного имени, для настроек плагина bxSlider.

head

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

1
jquery.bxslider.css

и тогда получим “чистый” слайдер, который можно видоизменять по своему с помощью CSS:

<head>
  <meta charset="utf-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  ...
 </head>

Плагин bxSlider подключен и готов к работе. Осталось создать HTML-разметку для него.

HTML-разметка для слайдера bxSlider

Внутри тега

body

создаю разметку для будущего слайдера. Она проста и семантична, представляет из себя обычный маркированный список, в котором каждый элемент

1
li

является слайдом. Внутри

1
li

может размещаться изображение, видео или любой другой HTML-контент. Контейнер

1
ul

должен иметь класс с произвольным именем:

<ul class="slider">
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
</ul>

Инициализация скрипта bxSlider

В созданном ранее js-файле

1	bxslider.js

произвожу инициализацию плагина bxSlider. Важно заметить, что строка инициализации должна быть обязательно заключена в “обертку”

1
$(document).ready()

, иначе слайдер не будет работать:

$(document).ready(function(){
  $('.slider').bxSlider();
});

Смотрю готовый результат:

Запущенный слайдер bxSlider

Слайдер bxSlider запущен и работает - есть кнопки пагинации и перемотки, изображения крутятся при нажатии на них. Пробую отключить таблицу стилей

1	jquery.bxslider.css

и смотрю результат. Действительно, слайдер bxSlider получается “голым”, но рабочим:

Чистый слайдер bxSlider

Стилизация слайдера bxSlider

Произведу небольшую стилизацию слайдера bxSlider. Для этого необходимо воспользоваться плагином Firebug под браузер Mozilla Firefox, чтобы инспектировать DOM-дерево и находить нужные HTML-элементы с их классами. Как можно было понять из базовой HTML-разметки, все элеметы управления слайдером генерируются скриптом автоматически.

Стилизация слайдера bxSlider с помощью CSS-правил (в данном примере это SCSS) может быть такой:

$asidePos: 50px;
$color: #778899;

.bx-wrapper{
  margin: 10px auto;
  width: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 5px #ccc;
  position: relative;
  .bx-viewport{
    box-shadow: 0 0 5px #ccc;
  }
  /*  Скрывать пагинацию  */
  .bx-pager{
    display: none;
  }
  /*  Кнопки перемотки  */
  .bx-prev,
  .bx-next{
    position: absolute;
    top: 92px;
    width: 20px;
    height: 20px;
    background-color: $color;
    @include squish-text;
    @include border-radius(50%);
    @include single-transition(background-color, .1s, ease-in-out);
    &:hover,&:focus{
      outline: none;
      background-color: darken($color,5%);
    }
    &:active{
      background-color: darken($color,10%);
    }
  }
  .bx-prev{
    left: -$asidePos;
  }
  .bx-next{
    right: -$asidePos;
  }
  img{
    vertical-align: top;
  }
}

И посмотрим результат наших трудов. Уже гораздо лучше, однако:

Стилизованный слайдер bxSlider

Настройка слайдера bxSlider

Плагин bxSlider имеет большое количество настроек, которые легко подключать в коде. Разнообразные (и многочисленные) примеры создания слайдера приведены на странице - Examples. Эти примеры можно и стоит изучить (хотя бы слегка, для будущего).

В этой статье давайте я воссоздам один из приведенных на странице Examples примеров. Пусть это будет слайдер с автоматической прокруткой и кнопками управления прокруткой - запуско и остановкой. Такой готовый пример размещен здесь - Auto show with start / stop controls. Я просто сделаю свой собственный дубликат, со своими стилями.

Для этого в SCSS-коде добавляю такие строки:

/*  auto controls  */
.bx-controls-auto{
  margin: 5px 0 0;
  @include pie-clearfix;
  .bx-controls-auto-item{
    display: inline-block;
    float: left;
    .bx-start,
    .bx-stop{
      display: block;
      @include squish-text;
      @include single-transition(background-color, .1s, ease-in-out);
    }
    .bx-start{
      @include arrow-right(7px,lighten($color,20%));
    }
    .bx-stop{
      width: 14px;
      height: 14px;
      margin: 0 0 0 5px;
      background-color: lighten($color,20%);
    }
  }
}

HTML-разметку на странице я не меняю, как вы могли заметить. Блок

1	.bx-controls-auto

генерируется скриптом bxSlider автоматически.

Файл настроек

1	bxslider.js

подправляю, чтобы он выглядел таким образом:

$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    autoControls: true
  });
});

Смотрю результат в браузере:

Слайдер bxSlider с автоматической прокруткой

Отлично! Появились кнопки запуска и остановки показа слайдшоу; сам слайдер стартует автоматически, при открытии страницы в окне браузера.

Заключение

Плагин bxSlider мне однозначно понравился. Семнатичная простая разметка, использование произвольного имени класса (а не идентификатора), автоматическое генерирование HTML-элементов слайдера, большое количество настроек, хорошие эффекты, простота подключения.

Все эти преимущества однозначно сделали плагин bxSlider номером один в моей копилке.

Zencoder

Frontend Developer Notebook

Библиотека Animate.css

Подключение Animate.css

Добавление CSS-классов из Animate.css

Использование jQuery c Animate.css

Управление задержкой анимации

Полный код примера на Animate.css

Кросс-браузерный placeholder

Кросс-браузерные заплатки для HTML5

Подключение плагина jquery.placeholder.js

HTML-форма с placeholder

Проверка поддержки placeholder в IE8

Bourbon + Sass - краткое знакомство

Установка библиотеки Bourbon

Создание проекта Bourbon

Включение библиотеки Bourbon в проект

Мониторинг изменений в проекте Bourbon

Использование библиотеки Bourbon

Bourbon - создаем кнопки

Bourbon - создаем треугольники

Заключение

Слайдер liSlidik

Установка плагина liSlidik

HTML-разметка для liSlidik

Инициализация скрипта liSlidik

Минимальная стилизация скрипта liSlidik

Кнопки управления для liSlidik

Пагинация в слайдере liSlidik

Заголовок слайдера liSlidik

Миниатюры в скрипте liSlidik

Заключение

Слайдер bxSlider

Установка слайдера bxSlider

HTML-разметка для слайдера bxSlider

Инициализация скрипта bxSlider

Стилизация слайдера bxSlider

Настройка слайдера bxSlider

Заключение