Слайдер jqFancyTransitions

Reading time ~11 minutes

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

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

Их достаточное количество - 

1

wave
, 
1

zipper
, 
1

curtain
, 
1

curtain alternate
, 
1

fountain top
, 
1

random top
, 
1

left top
, 
1

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>

Как видим, разметка чрезвычайно минималистична - блок-обертка с обязательным идентификатором 

1

id
(если использовать класс вместо идентификатора, плагин jqFancyTransitions работать не будет) и набор изображений 
1

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
    });
});

То есть, я задал для обертки с идентификатором 

1

#slider
высоту и ширину через параметры 
1

height: 300
, 
1

width: 400
; также задал, что данный слайдер должен иметь органы управления - пагинацию и кнопки перемотки слайдшоу - 
1

navigation: true
.

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

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

Видим, что плагин jqFancyTransitions создал слайдшоу из шести картинок размером 

1

400x300px
, как я и прописывал в HTML-разметке.

Помимо этого, плагином были сгенерированы кнопки перемотки взад-вперед (

1

prev
и 
1

next
), пагинация (номера 
1

1,2,3,4,5,6
внизу слайдера) и заголовок изображения (
1

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;
}

Пагинацию изображений 

1

#ft-buttons-slider
перемещаю вверх и влево:

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

Здесь стоит обратить внимание на последнее правило обнуления верхнего 

1

padding
- для него потребовалось суровая мера в виде 
1

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

Для кнопок пагинации 

1

.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 класса 

1

.ft-button-slider-active
правила:

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

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

1

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>

… а в файле настроек 

1

script.js
плагина jqFancyTransitions добавить строку 
1

links: true
:

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

Можно немного приукрасить слайдер, изменив эффект смены изображений с 

1

zipper
на 
1

curtain
- 
1

effect: 'curtain'
и уменьшив задержку по времени при смене изображений 
1

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
  });
});

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

Read More

Ошибка с версией Node.js

Довольно часто в своей практике сталкиваюсь с такой ошибкой, когда запускаю локально сторонний проект:```bash$ npm run start> dom-moving-...… Continue reading

Mangling Angular

Published on February 15, 2024

Constructor parameter without access modifier

Published on February 04, 2024