Продолжение обзора фреймворка Foundation, в котором приступим к практической части и научимся создавать кнопки на этом фреймворке.

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

Итак, в [первой части знакомства с Foundation][1] я с вами установил фреймворк Foundation c поддержкой Sass/Compass под операционной системой Linux Mint 17 и подготовил его к работе. Давайте откроем созданный утилитой foundation индексный файл index.html и рассмотрим его содержимое. “Шапка” head этого HTML-документа не представляет из себя что-то особенное, кроме двух строк:

<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>

В первой строке производится подключение файла CSS-стилей app.css, который служит для создания пользовательских CSS-правил. Другими словами, фреймворк Foundation представляет из себя набор готовых CSS-стилей (на то он и фреймворк). Но не всегда готовые CSS-стили отвечают конкретным требованиям дизайна страницы. Чтобы изменить или переопределить готовые CSS-стили фреймворка Foundation, служит таблица стилей app.css - именно туда нужно вносить свои собственные CSS-правила.

Вторая строка - это подключение библиотеки Modernizr и больше тут сказать нечего.

Если заглянуть в самый конец HTML-документа, то увидим три строки подключения js-скриптов перед закрывающим тегом </body>:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>

Ситуация здесь почти такая же, как и с “шапкой” head документа. Подключается библиотека jQuery (куда же без нее?), коллекция готовых js-скриптов от Foundation foundation.min.js для создания разнообразных меню, табов и тому подобное. Скрипт app.js служит для тех же целей, что и таблица стилей app.css - для внесения пользовательских изменений.

Между тегами <body></body> размещено содержимое документа в виде CSS-сетки Grid, к которой я вернусь немного позже. Сейчас я произвожу очистку этого содержимого, чтобы писать в нем свой собственный HTML-код.

Кнопки на Foundation

Создание кнопок на фреймворке Foundation занятие малоутомительное. Для этой цели используется тег a, которому присваивается имя готового CSS-класса .button. Помимо этого, имеются три или четыре группы классов, с помощью которых можно создавать различные варианты кнопок - разного цвета, формы и назначения.

Кнопки, созданные на Foundation c помощью предопределенных классов, имеют полностью готовый вид, вплоть до CSS-свойства transition.

Обычная кнопка на Foundation

Как я уже упоминал выше, для создания кнопки под Foundation достаточно присвоить тегу a имя готового класса .button. Давайте так и сделаем:

<a href="#" class="button">read more</a>

Обычная кнопка на Foundation

Все очень просто. Готовый результат можно посмотреть в браузере. Я же перейду к более интересному вопросу создания различных модификаций (вариантов) стандартной кнопки .button.

Кнопки разных размеров

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

  • .tiny - крошечная кнопка
  • .small - маленькая кнопка
  • .medium - средняя кнопка
  • .large - большая кнопка

В качестве примера приведу ниже HTML-код создания таких кнопок:

<a href="#" class="button tiny">tiny</a>
<a href="#" class="button small">small</a>
<a href="#" class="button medium">medium</a>
<a href="#" class="button large">large</a>

Кнопки разных размеров на Foundation

Как видно из приведенного выше кода, используется мультиклассовость - добавление к классу .button любого из классов размера кнопки - .tiny, .small, .medium, .large. Смешение CSS-правил обоих классов дает в результате нужный вид кнопки. Впрочем, все это должно быть известно из основ CSS.

Скругленные кнопки на Foundation

В фреймворке имеются два готовых класса для создания скругленной формы у кнопки. Первый класс - .radius задает радиус скругления углов у кнопки. Второй радиус .round создает круглую кнопку.

  • .radius - радиус ускругления углов у кнопки
  • .round - круглая кнопка

HTML-код создания таких кнопок показан ниже:

<a href="#" class="button radius">radius</a>
<a href="#" class="button round">round</a>

Скругленные кнопки на Foundation

Информационные кнопки на Foundation

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

  • .secondary - обычная кнопка
  • .success - кнопка, информирующая об успешном выполнении задачи
  • .alert - кнопка предупреждения о чем-либо

HTML-код для создания информационных кнопок:

<a href="#" class="button secondary">secondary</a>
<a href="#" class="button success">success</a>
<a href="#" class="button alert">alert</a>

Информационные кнопки на Foundation

Другие варианты кнопок

Есть еще два класса для создания двух состояний кнопки. Первый класс .disabled делает кнопку неактивной с помощью CSS-свойства cursor: default;. Второй класс .expand заставляет кнопку занимать всю ширину блока-родителя и становиться просто огромной!

  • .disabled - кнопка делается неактивной
  • .expand - кнопка на всю ширину блока-родителя

HTML-код двух описанных выше кнопок:

<a href="#" class="button disabled">disabled</a>
<a href="#" class="button expand">expand</a>

Другие варианты кнопок на Foundation

Тонкая настройка кнопок в Foundation

Помимо возможности использования готовых классов с предустановленными CSS-значениями, в фреймворке Foundation можно изменять значения по умолчанию из готового файла настроек. Данный файл называется _settings.scss и располагается в папке scss.

В этом файле собраны настройки в виде переменных Sass для всех компонентов фреймворка Foundation, но в данном случае нам необходимы переменные, отвечающие за настройку кнопок. Данные переменные находятся в секции файла, начинающейся со строки BUTTONS:

$include-html-button-classes: $include-html-classes;

// Настройка величины padding кнопок
// $button-tny: rem-calc(10);
// $button-sml: rem-calc(14);
// $button-med: rem-calc(16);
// $button-lrg: rem-calc(18);

// Настройка блочной модели и нижнего margin кнопки
// $button-display: inline-block;
// $button-margin-bottom: rem-calc(20);

// Настройка шрифта надписей кнопок
// $button-font-family: $body-font-family;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
// $button-font-tny: rem-calc(11);
// $button-font-sml: rem-calc(13);
// $button-font-med: rem-calc(16);
// $button-font-lrg: rem-calc(20);
// $button-font-weight: $font-weight-normal;
// $button-font-align: center;

// Настройка эффекта hover
// $button-function-factor: -20%;

// Настройка границ кнопок
// $button-border-width: 0px;
// $button-border-style: solid;
// $button-bg: $primary-color;
// $button-border-color: scale-color($bg, $lightness: $button-function-factor);

// Настройка радиуса скругления кнопок
// $button-radius: $global-radius;
// $button-round: $global-rounded;

// Настройка прозрачности кнопки с классом disabled
// $button-disabled-opacity: 0.7;

В принципе, элементарных знаний CSS должно быть достаточно, чтобы понять предназначение всех этих переменных. Поэтому давайте ради примера выполним пару изменений, чтобы увидеть результат. Для этого находим в файле _settings.scss строку BUTTONS (за поиск в Sublime Text отвечает сочетание клавиш Ctrl+F) и раскомментируем строки с теми переменными, которые нам необходимы.

Пусть это будут строки:

$button-tny: rem-calc(10);
$button-font-color: #fff;

… в которых изменим значение переменных по умолчанию на:

$button-tny: rem-calc(12);
$button-font-color: #ddd;

Если теперь заглянуть в инспектор свойств Firebug, то увидим, что padding для кнопки с классом .tiny увеличился; а также изменился цвет шрифта надписи с белого #fff на серый #ddd.

Создание кнопок с помощью Sass

Рассмотренный выше способ редактирования значений переменных для тонкой настройки кнопок хорош. Но все-таки он утомителен и времязатратен - это нужно открыть файл _settings.scss, найти в нем Sass-переменные, раскомментировать их и изменить их значение.

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

Допустим, в нашей HTML-разметке имеется ссылка:

<a class="readmore">Read More</a>

Чтобы превратить ее в кнопку на Foundation, нужно в файле app.css прописать следующее:

.readmore{
  @include button;
}

В результате получим готовую кнопку! Чтобы иметь более тонкую настройку при создании кнопки, нужно передать миксину button переменные в качестве аргументов:

.readmore{
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

Например, таким образом:

.readmore{
  @include button($bg: #778899, $radius: true);
}

Кнопка с помощью миксина на Foundation

На этом все.


Обзор слайдера Elastislide типа Carousel, созданного под библиотеку jQuery.

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

Подключение скрипта Elastislide

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

<ul id="elastic" class="elastislide-list">
  <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 1"></a></li>
  <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 2"></a></li>
  <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 3"></a></li>
  <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 4"></a></li>
  <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 5"></a></li>
</ul>

Обязательное условие - нужно применить к списку идентификатор (с произвольным именем) и класс elastislide-list, на который будут “вешаться” CSS-стили. А так видим, что HTML-разметка минималистская, все отлично.

Переходим на официальную страницу Elastislide и скачиваем оттуда архив с исходниками (кнопка “Download Source”).

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

Из распакованного архива потребуются не все файлы, а только некоторые из них.

Подключаем JS-файлы

Из папки JS распакованного архива забираем все три js-файла и подключаем их следующим образом:

  • файл modernizr.custom.17475.js подключаем в head HTML-документа:
<script src="js/modernizr.custom.17475.js"></script>
  • файлы jquery.elastislide.js, jquerypp.custom.js, jquery-1.8.2.min.js подключаем в теле HTML-документа, перед закрывающим тегом </body>:
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>

Конечно, библиотеку jQuery можно подключать не локально, а через любой из CDN’ов - это кому как нравиться. На оф. сайте в качестве примера так и делается. jQuery используется версии 1.8.2 - я ее тоже использовал; более поздние версии не проверял на работоспособность с Elastislide.

  • там же создаем еще один js-файл, в котором инициализируем скрипт Elastislide и пропишем настройки для него (если они понадобятся):
<script type="text/javascript">
  $('#elastic').elastislide();
</script>

Подключение CSS-стилей

Остался еще один файл, который нужно подключить в проект - это готовые CSS-стили “от автора”, чтобы слайдер Elastislide заработал. Забираем из папки CSS распакованного архива CSS-файл elastislide.css и подключаем его в head HTML-документа:

<link rel="stylesheet" type="text/css" href="css/elastislide.css" />

Остальные два файла custom.css и demo.css в папке CSS нам не нужны - они созданы автором скрипта для презентационных целей в примерах.

Итоговая картина подключения JS-скриптов, CSS-файла и HTML-разметки будет выглядеть следующим образом:

<head>
  <meta charset="utf-8">
  <title>Elastislide</title>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css">
  <script src="js/modernizr.js"></script>
</head>

<body>

  <ul id="elastic" class="elastislide-list">
    <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 1"></a></li>
    <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 2"></a></li>
    <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 3"></a></li>
    <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 4"></a></li>
    <li><a href="#"><img src="http://placehold.it/200x100" alt="Elastic 5"></a></li>
  </ul>

  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/jquerypp.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>

  <!-- Кастомный скрипт для Elastislide -->
  <script type="text/javascript">
    $('#elastic').elastislide();
  </script>

</body>

Как результат успешного подключения всех файлов смотрим на картинку:

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

Дальше уже можно смело редактировать файл elastislide.css для того, чтобы “подогнать” его под текущий дизайн страницы.

На этом все.


Данная статья посвящена обзору еще одного js-плагина для создания slideshow из картинок - jCarousel.

Автором данного скрипта является Jan Sorgalla. Хотя мне эти имя и фамилия ни о чем не говорит, но они запоминающиеся. Название данного плагина я запомнил по имени его автора раньше, чем по имени самого скрипта.

Скрипт jCarousel по популярности в списке плагинов типа carousel занимает второе место после скрипта slick - jQuery Plugins. Кто вдруг не знает, термин carousel (карусель) является общим описанием плагинов и скриптов подобного типа.

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

Особенности jCarousel

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

Вторая особенность плагина - он имеет модульную структуру. То есть, имеется основная составляющая скрипта jCarousel - jquery.jcarousel-core.min.js, которая на то и является основной, что предоставляет базовые возможности для создания слайдшоу.

Если необходимо к слайдшоу добавить возможность прокрутки, то нужно скачать и подключить модуль jquery.jcarousel-control.min.js. Для включения возможности пагинации необходим еще один модуль - jquery.jcarousel-pagination.min.js.

Для автоскролинга потребуется модуль jquery.jcarousel-autoscroll.min.js.

В проекте перечисленные выше модули подключаются последовательно, в таком порядке (первые два пункта строго обязательны, остальные могут добавляться, убираться и перемещаться между собой произвольно):

  • библиотека jQuery - jquery-1.11.1.min.js
  • основной модуль jCarousel Core - jquery.jcarousel-core.min.js
  • модуль прокрутки - jquery.jcarousel-control.min.js
  • модуль пагинации - jquery.jcarousel-pagination.min.js
  • модуль автоскроллинга - jquery.jcarousel-autoscroll.min.js

Справедливости стоит сказать, что можно не заморачиваться с отдельными модулями и подключить все одним файлом, по типу “все включено” - jquery.jcarousel.min.js:

  • библиотека jQuery - jquery-1.11.1.min.js
  • плагин jCarousel со всеми его возможностями - jquery.jcarousel.min.js

Страница для скачивания плагина jCarousel одним файлом (Full Download) или отдельными его модулями (Separate Downloads) расположена здесь - jCarousel Dist. Можно получить как “Production Version” (compressed), так и “Development Version” (uncompressed).

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

Плагин требует для своей работы библиотеку jQuery версии не ниже 1.7 - это также стоит учесть.

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

Создаем набросок HTML-страницы и производим подключение плагина jCarousel. Для чистоты и наглядности буду применять подход модульности плагина. Как и любой другой плагин подобного рода, его управление производится через отдельный js-файл произвольного имени, в котором прописываются параметры скрипта. Я создал для этой цели js-файл simple.js и выполнил подключение таким образом:

<head>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.jcarousel-core.min.js"></script>
  <script src="js/simple.js"></script>
 </head>

Шкурка style.css служит для стилизации слайдера jCarousel на HTML-странице, то есть в этом файле будут писаться CSS-стили для всех элементов слайдера jCarousel.

Базовая разметка слайдера jCarousel

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

<div class="jcarousel">
  <ul>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 1" alt="" /></li>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 2" alt="" /></li>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 3" alt="" /></li>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 4" alt="" /></li>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 5" alt="" /></li>
    <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 6" alt="" /></li>
  </ul>
</div><!--  end jcarousel  -->

То есть, должен присутствовать блок-обертка с классом class="jcarousel" (имя класса может быть произвольным), внутри которого должен находиться еще один блок-обертка. И затем только идут элементы с картинками. HTML-структура, надо сказать, несколько громоздкая по стандартам сегодняшнего времени.

К обязательной базовой HTML-разметке “прилагаются” не менее обязательные CSS-стили:

.jcarousel {
  position: relative;
  overflow: hidden;

  ul{
    width: 20000em;
    position: relative;

    li{
      float: left;
    }
  }
}

Код выше - это конечно не совсем CSS-код. Это SCSS, но наглядность (как мне кажется) от этого только выигрывает из-за ярко выраженного nesting, присущего Sass. По крайней мере, ничего не стоит за 5-10 секунд вручную перевести этот SCSS в обычный CSS, если кого вдруг это не устраивает.

В данном примере я воспользовался сервисом Placehold.it для быстрой и удобной генерации картинок в создаваемом слайдшоу.

Для активации слайдера в файле настроек simple.js скрипта jCarousel нужно прописать его инициализацию:

$(function() {
  // Инициализация слайдера

  $('.jcarousel').jcarousel({
    // Базовые настройки скрипта пишутся здесь

  });
});

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

Создание кнопок прокрутки в jCarousel

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

Какой уважающий себя слайдер картинок может существовать без кнопок перемотки изображений взад-вперед? Конечно - никакой! Поэтому потребуется их создать.

Для этого ниже блока со слайдером дописываю две ссылки с классами class="jcarousel-prev" и class="jcarousel-prev":

<div class="wrap_jcarousel">
  <div class="jcarousel">
    <ul>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 1" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 2" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 3" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 4" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 5" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 6" alt="" /></li>
    </ul>
  </div><!--  end jcarousel  -->
  <!--  CONTROLS  -->
  <a class="jcarousel-prev" href="#">Prev</a>
  <a class="jcarousel-next" href="#">Next</a>
</div><!--  end wrap_jcarousel  -->

Блок слайдера, элементы прокрутки (и другие будущие элементы управления слайдером) я поместил внутрь одного общего блока-обертки class="wrap_jcarousel", которому придал несложные CSS-стили:

.wrap_jcarousel{
  width: 600px;
  margin: 10px auto;
  position: relative;

Кнопки перемотки внутри HTML-разметки созданы, однако необходимо прикрутить к ним действия с помощью js-скрипта. Для этого сначала подключаю модуль прокрутки jquery.jcarousel-control.min.js в HTML-документе:

<head>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.jcarousel-core.min.js"></script>
  <script src="js/jquery.jcarousel-control.min.js"></script>
  <script src="js/simple.js"></script>
  </head>

… а затем в файле настроек simple.js активирую возможность прокрутки слайдера, добавив базовые js-строки:

$(function() {
  $('.jcarousel').jcarousel({
      // Базовые настройки скрипта пишутся здесь

  });

  // Инициализация прокрутки слайдера

  $('.jcarousel-prev').jcarouselControl({
      target: '-=1'
  });

  $('.jcarousel-next').jcarouselControl({
      target: '+=1'
  });
});

После стилизации элементов управления и блока-обертки class="wrap_jcarousel" слайдер jCarousel может принять следующий вид:

Слайдер jCarousel с кнопками прокрутки

Попробуем прокрутить картинки взад и вперед с помощью кнопок - все работает!

Добавление пагинации в jCarousel

Для добавления пагинации в слайдере нужно создать в HTML-разметке дополнительный блок с классом class="jcarousel-pagination":

<div class="wrap_jcarousel">
  <div class="jcarousel">
    <ul>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 1" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 2" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 3" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 4" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 5" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 6" alt="" /></li>
    </ul>
  </div><!--  end jcarousel  -->
  <!--  CONTROLS  -->
  <a class="jcarousel-prev" href="#">Prev</a>
  <a class="jcarousel-next" href="#">Next</a>
  <!--  PAGINATION  -->
  <p class="jcarousel-pagination"></p>
</div><!--  end wrap_jcarousel  -->

Больше ничего в него добавлять не нужно - плагин сам сгенерирует его содержимое. Нам только необходимо подключить соответствующий модуль jquery.jcarousel-pagination.min.js для пагинации в слайдере:

<head>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.jcarousel-core.min.js"></script>
  <script src="js/jquery.jcarousel-control.min.js"></script>
  <script src="js/jquery.jcarousel-pagination.min.js"></script>
  <script src="js/simple.js"></script>
</head>

… а затем активировать его в файле настроек simple.js:

$(function() {

  // Инициализация слайдера

  $('.jcarousel').jcarousel({
      // Базовые настройки скрипта пишутся здесь

  });

  // Инициализация прокрутки слайдера

  $('.jcarousel-prev').jcarouselControl({
      target: '-=1'
  });

  $('.jcarousel-next').jcarouselControl({
      target: '+=1'
  });

  // Инициализация пагинации слайдера

  $('.jcarousel-pagination').jcarouselPagination({
      item: function(page) {
          return '<a href="#' + page + '">' + page + '</a>';
      }
  });

});

Для стилизации пагинации с данном случае потребуется плагин Firebug под Mozilla Firefox для инспекции генерируемых скриптом jCarousel элементов. Примерный вид слайдера после применения некоторых CSS-стилей может быть таким:

Слайдер jCarousel с пагинацией

Проверим работу пагинации и “пощелкаем” на кнопках с циферками - все работает!

Добавление автопрокрутки в jCarousel

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

Первое - подключить модуль автопрокрутки jquery.jcarousel-autoscroll.min.js:

<head>
  <meta charset="utf-8">
  <title>Слайдер jCarousel</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.jcarousel-core.min.js"></script>
  <script src="js/jquery.jcarousel-control.min.js"></script>
  <script src="js/jquery.jcarousel-pagination.min.js"></script>
  <script src="js/jquery.jcarousel-autoscroll.min.js"></script>
  <script src="js/simple.js"></script>
</head>

Второе - активировать автопрокрутку в файле настроек simple.js:

$(function() {

  // Инициализация слайдера

  $('.jcarousel').jcarousel({
      // Базовые настройки скрипта пишутся здесь

  });

  // Инициализация прокрутки слайдера

  $('.jcarousel-prev').jcarouselControl({
      target: '-=1'
  });

  $('.jcarousel-next').jcarouselControl({
      target: '+=1'
  });

  // Инициализация пагинации слайдера

  $('.jcarousel-pagination').jcarouselPagination({
      item: function(page) {
          return '<a href="#' + page + '">' + page + '</a>';
      }
  });

  // Автопрокрутка слайдера

  $('.jcarousel').jcarouselAutoscroll({
      interval: 3000,
      target: '+=1',
      autostart: true
  });

});

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

Дополнительные украшательства для jCarousel

Что еще можно сделать для созданного слайдера jCarousel? Можно добавить стили для неактивной кнопки прокрутки изображений и для активной кнопки пагинации. Активность и неактивность этих кнопок можно отслеживать в помощью js-строк и “вешать” на нужные состояния кнопок соответствующие CSS-классы.

Для этого файл simple.js преобразую таким образом:

$(function() {

  // Инициализация слайдера

  $('.jcarousel').jcarousel({
      // Базовые настройки скрипта пишутся здесь

  });

  // Прокрутка слайдера


  // Кнопка PREV

  $('.jcarousel-prev')
  // Триггер класса inactive

  .on('jcarouselcontrol:active', function() {
      $(this).removeClass('inactive');
  })
  .on('jcarouselcontrol:inactive', function() {
      $(this).addClass('inactive');
  })
  // Инициализация кнопки PREV

  .jcarouselControl({
      target: '-=1'
  });

  // Кнопка NEXT

  $('.jcarousel-next')
  // Триггер класса inactive

  .on('jcarouselcontrol:active', function() {
      $(this).removeClass('inactive');
  })
  .on('jcarouselcontrol:inactive', function() {
      $(this).addClass('inactive');
  })
  // Инициализация кнопки NEXT

  .jcarouselControl({
      target: '+=1'
  });

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

  $('.jcarousel-pagination')
  // Триггер класса active

  .on('jcarouselpagination:active', 'a', function() {
      $(this).addClass('active');
  })
  .on('jcarouselpagination:inactive', 'a', function() {
      $(this).removeClass('active');
  })
  // Инициализация пагинации

  .jcarouselPagination({
      item: function(page) {
          return '<a href="#' + page + '">' + page + '</a>';
      }
  });

  // Автопрокрутка слайдера

  $('.jcarousel').jcarouselAutoscroll({
      interval: 3000,
      target: '+=1',
      autostart: true
  });

});

… а в style.scss добавлю строки:

/*  PREV NEXT BUTTONS  */
.jcarousel-prev,
.jcarousel-next{
  position: absolute;
  top: 200px;
  ...
  &.inactive{
    cursor: default;
  }
}
...
/*  PAGINATION  */
.jcarousel-pagination{
  background-color: transparent;
  position: absolute;
  ...
    &.active{
      opacity: .7;
    }
  }

Теперь при автоматической прокрутке изображений активная кнопка пагинации будет выделяться цветом. А при достижении конца прокрутки кнопка прокрутки становится неактивной, что визуально отмечается изменением вида курсора мыши при его наведении на кнопку.

Заключение jCarousel

В заключение можно сказать, что на странице примеров Examples есть богатый материал для дополнительных экспериментов. В частности, интерес представляет адаптивная Responsive Carousel, которая изменяет количество картинок внутри блока в зависимости от ширины окна браузера.

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

<div class="wrap_jcarousel">
  <div class="jcarousel">
    <ul>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 1" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 2" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 3" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 4" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 5" alt="" /></li>
      <li><img src="http://placehold.it/600x400/778899/fff&text=Slide 6" alt="" /></li>
    </ul>
  </div><!--  end jcarousel  -->
  <!--  CONTROLS  -->
  <a class="jcarousel-prev" href="#">Prev</a>
  <a class="jcarousel-next" href="#">Next</a>
      <!--  PAGINATION  -->
  <p class="jcarousel-pagination"></p>
</div><!--  end wrap_jcarousel  -->
@import "compass/reset";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/typography/links/hover-link";
@import "compass/typography/text/replacement";

$nav_width: 30px;
$nav_height: $nav_width;

.wrap_jcarousel{
  width: 600px;
  margin: 10px auto;
  position: relative;
  border: 10px solid rgba(0,0,0,.5);
  @include border-radius(10px);
  @include box-shadow(rgba(0,0,0,.3) 2px 2px 10px);
  .jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
    ul{
      width: 20000em;
      position: relative;
      li{
        float: left;
        img{
          vertical-align: top;
        }
      }
    }
  }

  /*  PREV NEXT BUTTONS  */
  .jcarousel-prev,
  .jcarousel-next{
    position: absolute;
    top: 200px;
    display: block;
    width: $nav_width;
    height: $nav_height;
    background-color: #778899;
    @include border-radius(50%);
    @include squish-text;
    @include box-shadow(rgba(0,0,0,.8) 0 0 4px inset);
    &:hover{
      background-color: darken(#778899,10%);
    }
    &.inactive{
      cursor: default;
    }
  }
  .jcarousel-prev{
    left: -50px;
  }
  .jcarousel-next{
    right: -50px;
  }

  /*  PAGINATION  */
  .jcarousel-pagination{
    background-color: transparent;
    position: absolute;
    bottom: 10px;
    left: 10px;
    a{
      text-decoration: none;
      text-align: center;
      line-height: 20px;
      color: #fff;
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: rgba(0,0,0,.8);
      @include border-radius(50%);
      margin-left: 5px;
      &:first-child{
        margin-left: 0;
      }
      &:hover{
        background-color: rgba(0,0,0,.6);
      }
      &.active{
        opacity: .7;
      }
    }
  }
}
$(function() {

// Инициализация слайдера

$('.jcarousel').jcarousel({
  // Базовые настройки скрипта пишутся здесь

});

// Прокрутка слайдера


// Кнопка PREV

$('.jcarousel-prev')

// Триггер класса inactive

.on('jcarouselcontrol:active', function() {
  $(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
  $(this).addClass('inactive');
})

// Инициализация кнопки PREV

.jcarouselControl({
  target: '-=1'
});

// Кнопка NEXT

$('.jcarousel-next')

// Триггер класса inactive

.on('jcarouselcontrol:active', function() {
  $(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
  $(this).addClass('inactive');
})

// Инициализация кнопки NEXT

.jcarouselControl({
  target: '+=1'
});

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

$('.jcarousel-pagination')

// Триггер класса active

.on('jcarouselpagination:active', 'a', function() {
  $(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
  $(this).removeClass('active');
})

// Инициализация пагинации

.jcarouselPagination({
  item: function(page) {
    return '<a href="#' + page + '">' + page + '</a>';
  }
});

// Автопрокрутка слайдера

$('.jcarousel').jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});

});

На этом все - удачного кодинга!


Данная статья посвящена обзору слайдера jqFancyTransitions - его установке, настройке и стилизации.

Слайдер jqFancyTransitions основан на библиотеке jQuery (впрочем, как и подавляющее большинство слайдеров подобного типа). Эффекты, применимые к данному слайдеру, можно посмотреть на домашней странице проекта - jqFancyTransitions.

Их достаточное количество - wave, zipper, curtain, curtain alternate, fountain top, random top, left top, right bottom. Слайдер jqFancyTransitions предоставляет стандартный набор органов управления слайдшоу - кнопки перемотки взад-вперед, пагинация и показ заголовка картинки.

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

Установка jqFancyTransitions

Для подключения слайдера jqFancyTransitions в рабочий проект необходимо выполнить стандартные операции:

  • подключить библиотеку jQuery
  • подключить плагин jqFancyTransitions
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jqFancyTransitions.1.8.min.js"></script>

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

Естественно, подключать jQuery можно разными путями - локально или через разнообразные CDN, это уж кому как нравиться.

Затем создаем разметку для слайдера jqFancyTransitions в HTML-документе:

<div id="slider">
  <img src="http://placehold.it/400x300/c8c8c8/fff" alt="Mascot 1" />
  <img src="http://placehold.it/400x300/b8b8b8/fff" alt="Mascot 2" />
  <img src="http://placehold.it/400x300/a8a8a8/fff" alt="Mascot 3" />
  <img src="http://placehold.it/400x300/989898/fff" alt="Mascot 4" />
  <img src="http://placehold.it/400x300/888888/fff" alt="Mascot 5" />
  <img src="http://placehold.it/400x300/787878/fff" alt="Mascot 6" />
</div>

Как видим, разметка чрезвычайно минималистична - блок-обертка с обязательным идентификатором id (если использовать класс вместо идентификатора, плагин jqFancyTransitions работать не будет) и набор изображений img.

В данном примере я воспользовался сервисом Placehold.it для быстрого и удобного способа эмуляции картинок в проекте.

Минималистичность HTML-разметки для работы плагина jqFancyTransitions - с точки зрения HTML-семантики просто прекрасно; а вот с точки зрения web-разработчика - не очень, так как придется в дальнейшем воспользоваться плагином Firebug под Mozilla Firefox, чтобы решить проблему стилизации слайдера jqFancyTransitions.

Настройка jqFancyTransitions

Как любой слайдер подобного рода, jqFancyTransitions имеет набор опций для настройки своей работы. Можно управлять скоростью показа картинок, выбрать нужный эффект перехода, отобразить или скрыть элементы управления slideshow.

Полный список настроек представлен ниже:

effect: , // wave, zipper, curtain ( волны, застежка, занавес)
width: 500, // ширина панели
height: 332, // высота панели
strips: 20, // количество полос
delay: 5000, // задержка между сменой изображений в ms
stripDelay: 50, // задежка между эффектами в ms
titleOpacity: 0.7, // прозрачность подписи (title)
titleSpeed: 1000, // время показа подписи в ms
position: alternate, // top, bottom, alternate, curtain
direction: fountainAlternate, // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // кнопки навигации prev и next
links: false // показ картинок как ссылок

Настройка плагина jqFancyTransitions производится в отдельном js-файле с произвольным именем, который также подключается в проект после библиотеки jQuery и плагина jqFancyTransitions.

В моем случае я создал js-файл с именем script:

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jqFancyTransitions.1.8.min.js"></script>
<script src="js/script.js"></script>

… и наполнил его первоначальным содержимым:

$(document).ready(function(){
    $(#slider).jqFancyTransitions({
      width: 400,
      height: 300,
      navigation: true
    });
});

То есть, я задал для обертки с идентификатором #slider высоту и ширину через параметры height: 300, width: 400; также задал, что данный слайдер должен иметь органы управления - пагинацию и кнопки перемотки слайдшоу - navigation: true.

Отлично! Уже сейчас наш плагин должен работать:

Слайдер jqFancyTransitions - первый запуск

Видим, что плагин jqFancyTransitions создал слайдшоу из шести картинок размером 400x300px, как я и прописывал в HTML-разметке.

Помимо этого, плагином были сгенерированы кнопки перемотки взад-вперед (prev и next), пагинация (номера 1,2,3,4,5,6 внизу слайдера) и заголовок изображения (title).

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

Стилизация jqFancyTransitions

Для придания слайдеру jqFancyTransitions необходимого внешнего вида я воспользуюсь своим любимым Sass/Compass. Также для задачи стилизации слайдера потребуется плагин Firebug - незаменимая штука для web-разработчика.

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

Чтобы было понятно, о чем идет речь, давайте взглянем на снимок окна браузера с запущенным плагином Firebug, который я сделал для данного примера. Посмотрим на вкладку HTML - там есть элементы, которые первоначально не присутствуют в нашей HTML-разметке:

Слайдер jqFancyTransitions под прицелом Firebug

Убираю кнопки перемотки и заголовок изображения. Для этого с помощью Firebug нахожу имена идентификаторов этих элементов и прописываю для них правила:

#ft-prev-slider,
#ft-next-slider,
#ft-title-slider {
  display: none;
}

Пагинацию изображений #ft-buttons-slider перемещаю вверх и влево:

#ft-buttons-slider{
  position: relative;
  top: -40px;
  right: 5px;
  padding-top: 0 !important;
  ...

Здесь стоит обратить внимание на последнее правило обнуления верхнего padding - для него потребовалось суровая мера в виде !important, чтобы переопределить внутренние стили, задаваемые самим плагином jqFancyTransitions для данного HTML-элемента.

Для кнопок пагинации .ft-button-slider задаю размер, фоновую заливку и расстояние между ними:

.ft-button-slider{
  text-decoration: none;
  font-size: 12px;
  color: darken(#fff,10%);
  background-color: $color;
  margin-left: 10px;
  @include text-shadow(rgba(0,0,0,.5) 1px 1px 0);

Чтобы выделить активную кнопку в пагинации, создаю для генерируемого плагином jqFancyTransitions класса .ft-button-slider-active правила:

.ft-button-slider-active{
  background-color: darken($color,10%);
  color: #fff;
}

Начиная с версии 1.7 плагин jqFancyTransitions позволяет создавать из изображений слайдера ссылки. То есть, картинки, мелькающие в виде slideshow, одновременно являются ссылками.

Чтобы сделать так, достаточно в HTML-разметке дописать теги ссылок:

<div id="slider">
  <img src="http://placehold.it/400x300/c8c8c8/fff" alt="Mascot 1" />
    <a href="http://localhost:7788/third/"></a>
  <img src="http://placehold.it/400x300/b8b8b8/fff" alt="Mascot 2" />
    <a href="http://localhost:7788/third/"></a>
  <img src="http://placehold.it/400x300/a8a8a8/fff" alt="Mascot 3" />
    <a href="http://localhost:7788/third/"></a>
  <img src="http://placehold.it/400x300/989898/fff" alt="Mascot 4" />
    <a href="http://localhost:7788/third/"></a>
  <img src="http://placehold.it/400x300/888888/fff" alt="Mascot 5" />
    <a href="http://localhost:7788/third/"></a>
  <img src="http://placehold.it/400x300/787878/fff" alt="Mascot 6" />
    <a href="http://localhost:7788/third/"></a>
</div>

… а в файле настроек script.js плагина jqFancyTransitions добавить строку links: true:

$(document).ready(function(){
  $(#slider).jqFancyTransitions({
    width: 400,
    height: 300,
    navigation: true,
    links: true
  });
});

Можно немного приукрасить слайдер, изменив эффект смены изображений с zipper на curtain - effect: 'curtain' и уменьшив задержку по времени при смене изображений delay: 2000:

$(document).ready(function(){
  $(#slider).jqFancyTransitions({
    width: 400,
    height: 300,
    navigation: true,
    effect: curtain,
    delay: 2000,
    links: true
  });
});

Дополнительные CSS3-украшательства можно добавить по вкусу, желанию и необходимости.

Готовый слайдер jqFancyTransitions

Примерный результат создания слайдера jqFancyTransitions может выглядеть таким образом:

Готовый слайдер jqFancyTransitions

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

<div class="wrapper">
  <div id="slider">
    <img src="http://placehold.it/400x300/c8c8c8/fff" alt="Mascot 1" />
      <a href="http://localhost:7788/third/"></a>
    <img src="http://placehold.it/400x300/b8b8b8/fff" alt="Mascot 2" />
      <a href="http://localhost:7788/third/"></a>
    <img src="http://placehold.it/400x300/a8a8a8/fff" alt="Mascot 3" />
      <a href="http://localhost:7788/third/"></a>
    <img src="http://placehold.it/400x300/989898/fff" alt="Mascot 4" />
      <a href="http://localhost:7788/third/"></a>
    <img src="http://placehold.it/400x300/888888/fff" alt="Mascot 5" />
      <a href="http://localhost:7788/third/"></a>
    <img src="http://placehold.it/400x300/787878/fff" alt="Mascot 6" />
      <a href="http://localhost:7788/third/"></a>
  </div>
</div>
<!-- end wrapper -->
@import "compass/reset";
@import "compass/css3/text-shadow";
@import "compass/css3/box-shadow";

$color: #778899;

.wrapper{
  margin: 50px auto;
  width: 420px;
  #slider{
    border: 10px solid rgba(0,0,0,.5);
    @include box-shadow(rgba(0,0,0,.8) 2px 2px 10px);
    #ft-prev-slider,#ft-next-slider,#ft-title-slider{
      display: none;
    }
  }
  #ft-buttons-slider{
    position: relative;
    top: -40px;
    right: 5px;
    padding-top: 0 !important;
    .ft-button-slider{
      text-decoration: none;
      font-size: 12px;
      color: darken(#fff,10%);
      background-color: $color;
      margin-left: 10px;
      @include text-shadow(rgba(0,0,0,.5) 1px 1px 0);
      &:first-child{
        margin-left: 0;
      }
      &:focus,&:active{
        outline: none;
      }
      &:hover{
        color: lighten($color,40%);
        background-color: lighten($color,10%);
      }
    }
    .ft-button-slider-active{
      background-color: darken($color,10%);
      color: #fff;
    }
  }
}
$(document).ready(function(){
  $(#slider).jqFancyTransitions({
    width: 400,
    height: 300,
    navigation: true,
    effect: curtain,
    delay: 2000,
    links: true
  });
});

На этом все - удачного кодинга!


До вчерашнего дня у меня на ноутбуке под Linux Mint “Qiana” стояли два незаменимых для меня пакета для кодинга - Sass + Compass.

Оба пакета были не самой свежей версии, но стабильной. Однако, с недавних пор к ним прибавилось еще два пакета - Susy 2 и Breakpoint. Но Susy 2 для своей работы требует фреймворк Compass версии 1.0.0.

Поэтому, пришла пора обновить Compass и под Linux Mint. Под Windows 7 у меня уже давно стоит Compass-1.0.0.alpha.19 + Sass-3.3.8 (Maptastic Maple) + Susy-2.1.2 + Breakpoint-2.4.2.

Под эту систему процесс инсталляции Compass v1.0.0 замудреный и описан в этой статье - “Медиа-запросы Breakpoint в Sass”.

Но работать под Windows мне не нравиться, поэтому поставил для себя задачу перейти на Compass версии 1.0.0.alpha.19 на Linux.

На момент написания статьи Compass и Sass у меня под Linux Mint “Qiana” были следующих версий:

$ sass -v
Sass 3.2.19 (Media Mark)
$ compass -v
Compass 0.12.6 (Alnilam)

Произвожу “зачистку” системы командами:

$ gem uninstall compass
$ gem uninstall sass

Установка Compass alpha-версии производится командой:

$ gem install compass --pre

Но вот беда, под Linux Mint “Qiana” эта команда выдает ошибку:

...
Unable to install gem - Failed to build gem native extension - cannot load such file — mkmf (LoadError)
...

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

И о чудо - на StackOverflow нашелся такой вопрос и готовое решение на него. Правда, вопрос там относился к проблеме запуска Ruby определенной версии - v 3.2.9 под Ubuntu 12.04, но это дела не меняет. Ошибка одна и таже и решение мне подошло однозначно.

На удивление, решение оказалось простым - нужно всего лишь установить в системе developer-версию Ruby - ruby1.9.1-dev.

На момент установки Compass версии alpha.19 у меня имелся следующий Ruby:

$ ruby -v
ruby 1.9.3p194 (2012-04-20 revision 35410) [i686-linux]

Ставлю developer-версию Ruby (вот оно - решение!):

$ sudo apt-get install ruby1.9.1-dev

И затем снова пробую установить Compass alpha-версии:

$ sudo gem install compass --pre
Building native extensions.  This could take a while...
Fetching: rb-inotify-0.9.5.gem (100%)
Fetching: rb-kqueue-0.2.3.gem (100%)
Fetching: listen-1.1.6.gem (100%)
Fetching: json-1.8.1.gem (100%)
Building native extensions.  This could take a while...
Fetching: compass-1.0.0.alpha.19.gem (100%)
...

На этот раз установка пошла успешно и Compass 1.0.0.alpha.19 появился в моей системе:

$ sudo compass -v
Compass 1.0.0.alpha.19

Препроцессор Sass подтянулся автоматом, в качестве зависимости:

$ sass -v
Sass 3.3.8 (Maptastic Maple)

Отлично! Теперь настала очередь сладкой парочки Susy 2 + Breakpoint:

$ sudo gem install susy
Fetching: susy-2.1.2.gem (100%)
Successfully installed susy-2.1.2
...
$ sudo gem install breakpoint
Fetching: sassy-maps-0.4.0.gem (100%)
Fetching: breakpoint-2.4.2.gem (100%)
Successfully installed sassy-maps-0.4.0
Successfully installed breakpoint-2.4.2
...

Ну вот и все, проблема установки Compass 1.0.0.alpha.19 под Linux Mint “Qiana” успешно решена! Можно продолжать с удобством кодить под Linux.

Для полного счастья нужно еще разобраться с установкой Photoshop под Linux - тогда жизнь будет полной.

Удачного кодинга!