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

1
slideshow
из картинок - jCarousel.

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

Скрипт jCarousel по популярности в списке плагинов типа

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

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

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

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

Вторая особенность плагина - он имеет модульную структуру. То есть, имеется основная составляющая скрипта jCarousel -

1
jquery.jcarousel-core.min.js
, которая на то и является основной, что предоставляет базовые возможности для создания слайдшоу.

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

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

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

1
jquery.jcarousel-autoscroll.min.js
.

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

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

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

1
jquery.jcarousel.min.js
:

  • библиотека jQuery -
    1
    
    jquery-1.11.1.min.js
    
  • плагин jCarousel со всеми его возможностями -
    1
    
    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-файл

1
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>

Шкурка

1
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  -->

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

1
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 для быстрой и удобной генерации картинок в создаваемом слайдшоу.

Для активации слайдера в файле настроек

1
simple.js
скрипта jCarousel нужно прописать его инициализацию:

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

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

  });
});

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

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

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

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

Для этого ниже блока со слайдером дописываю две ссылки с классами

1
class="jcarousel-prev"
и
1
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  -->

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

1
class="wrap_jcarousel"
, которому придал несложные CSS-стили:

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

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

1
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>

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

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

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

  });

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

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

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

После стилизации элементов управления и блока-обертки

1
class="wrap_jcarousel"
слайдер jCarousel может принять следующий вид:

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

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

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

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

1
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  -->

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

1
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>

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

1
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

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

Первое - подключить модуль автопрокрутки

1
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>

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

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

Для этого файл

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

});

… а в

1
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.

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

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

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


До вчерашнего дня у меня на ноутбуке под 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 определенной версии -

1
v 3.2.9
под Ubuntu 12.04, но это дела не меняет. Ошибка одна и таже и решение мне подошло однозначно.

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

1
ruby1.9.1-dev
.

На момент установки Compass версии

1
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 - тогда жизнь будет полной.

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


Время от времени в Twitter, Reddit или StackOverflow возникает такой вопрос.

Почти каждый, кто работал с Sass хотя бы раз задавал его себе - что выбрать, Compass или Bourbon?

Оба проекта Compass и Bourbon являются фреймворками под Sass. Sass, как вы помните, является препроцессором CSS, не правда ли? Хорошо. Точно также, как если бы вы имели дело с jQuery или Backbone при работе в JavaScript, использование фреймворка для Sass облегчает работу с последним.

В этой статье я выскажу свое мнение по поводу использования Compass или Bourbon. Но, прежде всего, нужно сделать небольшой экскурс в историю.

История Compass и Bourbon

Compass заявляет о себе как о CSS фреймворке под Sass. Он поддерживается Chris Eppstein, одним из двух разработчиков Sass. Compass - это наполовину Ruby и наполовину Sass, он представляет из себя полный набор миксинов и инструмент под Sass. Более подробно о нем позже.

С другой стороны, Bourbon создан на Sass и для Sass великолепной командой разработчиков Thoughtbot. Если верить домашней странице проекта, Bourbon - это скорее библиотека, нежели фреймворк; простая и легковесная библиотека миксинов под Sass.

В итоге мы имеем с одной стороны Ruby/Sass фреймворк, а с другой стороны мы имеем библиотеку Sass. Совершенно разные вещи, не правда ли?

Миксины Compass и Bourbon

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

Как Compass, так и Bourbon являются огромной коллекцией миксинов для создания CSS3-эффектов; благодаря этим миксинам отпадает необходимость детально вникать в браузерные префиксы или CSS-уловки (CSS hacks).

Ниже показан пример миксина

1
box-sizing
в обоих библиотеках Compass и Bourbon. Как видим, синтаксис и результат работы одинаков:

// Compass

  .boxsizing {
    @include box-sizing(border-box);
  }

// Bourbon

.boxsizing {
  @include box-sizing(border-box);
}

Тот факт, что Compass и Bourbon имеют одинаковый синтаксис для большинства миксинов, делает переход в использовании с Compass на Bourbon и с Bourbon на Compass очень легким.

Существует одно важное различие между этими инструментами: начиная с Compass 1.0 (вышел совместно с Sass 3.3), Compass получает информацию с сайта Can I Use. Это означает, что почти всегда данный фреймворк получает самую свежую информацию по браузерным префиксам.

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

Замечание: если вы используете Autoprefixer для решения вопросов браузерных префиксов, то все вышесказанное не относится к вам.

Типографика в Compass и Bourbon

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

// Compass Vertical Rhythm
  $base-font-size: 16px;
  $base-line-height: 1.35;
  $rhythm-unit: em;

  element{
    @include adjust-font-size-to(42px);
  }

// CSS result
element{
  font-size: 2.625em;
  line-height: 1.06071em;
}

У Compass также есть возможность поддержки единиц измерения

1
rem
с откатом к
1
px
, если вы используете
1
rem
в качестве значения переменной
1
$rhythm-unit
вместо
1
em
.

Есть еще целая куча различных настроек, так что если вы являетесь поклонником типографики, Compass сможет ответить всем вашим требованиям.

Библиотека Bourbon обладает менее впечатляющим набором возможностей для работы с типографикой; однако у нее также есть все для быстрого старта разработки. В Bourbon есть не только возможность преобразования пикселей в

1
em
или
1
rem
, но также такие великолепные функции, как
1
golden-ratio()
и
1
modular-scale()
.

Несмотря на то, что эти функции не имеют прямого отношения к типографике, они отлично подходят для создания вертикального ритма в документе.

Собственно, Thoughtbot решили адресовать вопрос с типографикой другому их проекту (который может использоваться совместно с Bourbon) под названием Bitters. Более подробно о нем будет говориться в конце статьи.

CSS-сетки в Compass и Bourbon

Разве можно назвать фреймворк полноценным, если у него нет системы сеток (grid system), верно?

Фреймворк Compass имеет в составе систему Blueprint Grid, которая, насколько я знаю, не имеет ничего общего со старым фреймворком под названием Blueprint. Стоит сказать, что система Blueprint фреймворка Compass является неполноценной.

Среди всех людей, которые используют Compass и с которыми мне приходилось общаться, только один пробовал работать с Blueprint. Эта система настолько несовершенна, что Chris Eppstein решил убрать ее из Compass начиная с версии 1.0.0 (что соответствует Sass 3.3).

В тоже время библиотека Bourbon предоставляет пару миксинов, с помощью которых можно создать свою собственную сетку. Это функции

1
flex-*
(не стоит путать с моделью Flexbox) и
1
grid-width()
.

Помимо этого, у команды Thoughtbot имеется своя собственная, отдельная от Bourbon, система сеток под названием Neat, которая позиционируется как легковесный семантичный фреймворк под Sass и Bourbon.

Таким образом, библиотека Bourbon не имеет в своем составе системы сеток (grid system), но можно свободно воспользоваться для этой цели фреймворком Neat.

Если сделать краткий итог по вопросу системы сеток, то можно сказать следующее. Если необходима система сеток с тесной интеграцией Sass-фреймворка, то мое мнение - это использовать связку Bourbon + Neat. Оба проекта были созданы одними и теми же людьми; в обоих проектах была заложена одна и таже основная идея. Это можно сравнить как два кусочка одного пазла.

Примечание переводчика: автор статьи упоминает о стороннем проекте Neat (система сеток) для библиотеки Bourbon. Но почему-то ни словом не говорит о проекте Susy?

Helpers

Одной интересной вещью Sass-фреймворков являются так называемые helpers. Helpers - это предустановленные CSS-правила, которые можно использовать в таблицах стилей как есть, для сокращения времени разработки проекта.

Например, Compass имеет набор helpers для float-clearing (включая несколько способов, как это сделать) и несколько CSS-хаков для старых версий браузера Internet Explorer; сброс стилей (несколько вариантов); несколько способов замещения текста изображением и многое другое.

В Bourbon такие helpers называются add-ons, но они выполняют туже работу; правда, в Bourbon их немного меньше, чем в Compass. Стоит сказать, что команда Thoughtbot включила с состав проекта Bitters большое количество helpers. Как было уже сказано выше, Bitters является сторонним проектом, который имеет прекрасную интеграцию с Bourbon и служит для целей создания типографики в проекте.

Спрайты Compass и Bourbon

Спросите пользователя Compass, почему он из месяца в месяц и из года в год использует эту библиотеку; клянусь, что в ответ услышим что-то о системе создания спрайтов. Это та вещь, которую Compass действительно выполняет хорошо. Благодаря тому, что Compass написан на языке Ruby, он может выполнять некоторые очень интересные вещи с файловой системой. Одной из таких фишек является способность создавать спрайты из коллекции изображений, размещенных в одной папке. Замечательно, не правда ли?

// Пример создания спрайтов в Compass
  @import "icon/*.png";
  @include all-icon-sprites;

Помимо автомагического способа генерации спрайтов, Compass предоставляет пару интересных функций для доступа к файлу изображений прямо из таблицы стилей, наподобие

1
image-width()
,
1
image-height()
и даже
1
inline-image()
для преобразования файла изображения в Base64:

// Функции Compass доступа к файловой системе
.logo{
  $image: "path/to/my/logo.png";
  width: image-width($image);
  height: image-height($image);
  background: inline-image($image) no-repeat;
}

Так как Bourbon построен только на Sass, у него нет возможности доступа к файловой системе и эта библиотека не может выполнить таких вещей, какие может Compass. Поэтому, если вы ищете способ динамического создания спрайтов и не хотите заморачиваться с такими менеджерами задач, как Grunt, Gulp или Ant, то выбор для вас очевиден.

Итог

И так, что же получаем в итоге - Compass или Bourbon?

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

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

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

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

Если вы решили использовать библиотеку Bourbon, то я бы рекомендовал вам также задействовать другие проекты команды Thoughtbot: Neat в качестве системы сеток (grid system), Bitters для типографики и еще не упомянутый до этого момента Refills (который является полной альтернативой фреймворка Bootstrap) с полным набором компонентов, готовый для использования в создаваемом проекте.

Примечание переводчика: в этой статье дан сравнительный обзор двух фреймворков - Compass и Bourbon. Лично для меня было бы интереснее посмотреть практические примеры использования библиотеки Bourbon.

Оригинал статьи: Sass Frameworks: Compass or Bourbon? от автора Hugo Giraudel.


Под локальным сервером XAMPP можно создавать неограниченное количество виртуальных хостов.

Что такое виртуальный хост (Virtual Host)? Применительно в серверу XAMPP - это поддиректории, в которых размещаются отдельные сайты. То есть, имеется директория

1
htdocs
, а в ней размещены поддиректории
1
site_1
,
1
site_2
,
1
site_3
(или же так -
1
redface
,
1
football
,
1
greenpark
, название может быть любым).

В каждой из этих поддиректорий распакован и установлен движок CMS WordPress (к примеру). Вот эти поддиректории

1
site_1
,
1
site_2
,
1
site_3
и являются виртуальными хостами под локальным сервером XAMPP.

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

Настройка виртуальных хостов на XAMPP под Linux Mint почти ничем не отличается от подобной настройки под Windows, меняются только пути конфигурационных файлов. Весь процесс настройки можно свести к двум шагам:

  1. Настройка хостов в файле
    1
    
    /etc/hosts
    
  2. Настройка виртуальных хостов в файле
    1
    
    /opt/lampp/etc/extra/httpd-vhosts.conf
    

Ниже на примере расмотрим подробное описание создания одного виртуального хоста на XAMPP под Linux Mint.

Создание поддиректории виртуального хоста (Virtual Host)

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

1
redface
(имя произвольное) и обязательно разместим в ней индексный файл
1
index.html
:

$ sudo mkdir -p /opt/lampp/htdocs/redface
$ sudo touch /opt/lampp/htdocs/redface/index.html

Виртуальный хост с именем

1
redface
почти создан. Осталось “сказать” об этом локальному серверу XAMPP и операционной системе Linux Mint.

Редактирование файла /etc/hosts

Операционной системе Linux Mint нужно “сказать”, что виртуальный хост

1
redface
размещен по адресу
1
127.0.0.1
. Для этого открываем для редактирования файл
1
/etc/hosts
командой:

$ sudo nano -w /etc/hosts

… и дописываем в нем строку

1
127.0.0.1 redface.dev
:

127.0.0.1 localhost
127.0.1.1 zmk

# Virtual hosts
127.0.0.1 redface.dev

Окончание

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

Сохраняем Ctrl+O и выходим Ctrl+X из редактора

1
nano
.

Включение поддержки виртуального хоста в XAMPP

По умолчанию в настройках XAMPP отключена поддержка виртуальных хостов. Для включения такой возможности нужно отредактировать конфигурационный файл

1
httpd.conf
сервера Apache.

Для этого открываем его командой:

$ sudo nano -w /opt/lampp/etc/httpd.conf

В открытом файле

1
httpd.conf
нужно найти (в редакторе это сочетание Ctrl+W) строку
1
# Virtual hosts
и раскомментировать (снять знак решетки
1
#
) строку:

#Include etc/extra/httpd-vhosts.conf

Создание виртуального хоста в файле httpd-vhosts.conf

Открываем для редактирования файл

1
httpd-vhosts.conf
и знакомимся с его содержимым:

$ sudo nano -w /opt/lampp/etc/extra/httpd-vhosts.conf

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

1
httpd-vhosts.conf
от этого мусора.

Далее идут два блока с открывающим тегом

1
<VirtualHost *:80>
и закрывающим тегом
1
</VirtualHost>
. Данные блоки являются виртуальными хостами - их два по умолчанию, но можно добавить сколько необходимо.

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

1
<VirtualHost *:80>
/
1
</VirtualHost>
размещена служебная информация - описание виртуального хоста:

<VirtualHost *:80>
  ServerAdmin webmaster@dummy-host.example.com
  DocumentRoot "/opt/lampp/docs/dummy-host.example.com"
  ServerName dummy-host.example.com
  ServerAlias www.dummy-host.example.com
  ErrorLog "logs/dummy-host.example.com-error_log"
  CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

Жизненно необходимыми для существования виртуального хоста (Virtual Host) под XAMPP являются две строки:

  • DocumentRoot - путь размещения виртуального хоста в файловой системе
  • ServerName - доменное имя виртуального хоста

Остальные строки носят дополнительный характер:

  • ServerAdmin - e-mail адрес “администратора” хоста
  • ServerAlias - синоним доменного имени ServerName
  • ErrorLog и CustomLog - логи виртуального хоста

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

1
redface
:

<VirtualHost *:80>
  ServerAdmin         redface@mail.dev
  DocumentRoot        "/opt/lampp/htdocs/redface"
  ServerName          redface.dev
  ServerAlias         www.redface.dev
  ErrorLog            "logs/redface-error_log"
  CustomLog           "logs/redface-access_log" common
</VirtualHost>

Обратите внимание, как поменялись значения в этм блоке на конкретные, под хост

1
redface
.

Запускаем (если еще не запущен) или перезапускаем (если уже был запущен) локальный сервер XAMPP:

$ sudo /opt/lampp/lampp start
Starting XAMPP for Linux 1.8.2-5...
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

… и “вбиваем” в адресной строке браузера доменное имя созданного нами виртуального хоста

1
redface.dev
:

Virtual Host под XAMPP

ОК, все работает!

Проблемы с правами доступа на виртуальном хосте

При создании виртуального хоста (Virtual Host) под XAMPP в директории

1
htdocs
для создания или редактирования файлов потребуется изменение прав доступа. По умолчанию поддиректория, в которой располагается виртуальный хост, и все файлы внутри этого хоста имеют разрешение только на чтение.

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

$ sudo chmod g+w /opt/lampp/htdocs/redface/index.html

Изменение точки монтирования виртуального хоста

В этой статье точка монтирования виртуальных хостов (Virtual Hosts) располагалась по адресу -

1
/opt/lampp/htdocs/
. То есть, поддиректории виртуальных хостов находились внутри директории
1
htdocs
.

Однако, у локального сервера XAMPP имеется возможность переопределить местоположение виртуальных хостов внутри файловой системы Linux Mint. Например, можно расположить все хосты в домашней директории пользователя. Плюсом такого выбора является то, что нет необходимости настраивать права доступа для папок и файлов.

Вся настройка для переопределения точки монтирования виртуальных хостов (Virtual Hosts) сводится к одному действию - изменить значение строки

1
DocumentRoot
. Но, к моему сожалению, мне не удалось настроить XAMPP на своем ноутбуке подобным образом.

Все попытки переименовать значение строки

1
DocumentRoot
приводили к тому, что XAMPP не мог открыть индексную страницу.

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

P.S. от 09.09.2014

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

Так можно добавить в рабочую папку с проектами на другом диске (например, для использования на Linux и Windows отдельно):

1. Файл httpd.conf

Найти строки и заменить (Имя пользователя):

  • User (username)
  • Group (по умолчанию или username)

Не меняем:

DocumentRoot "/opt/lampp/htdocs” и Directory “/opt/lampp/htdocs"

2. Создаем мягкую ссылку:

$ sudo ln s /media/(username)/mydisk/Open Server/domains /opt/lampp/htdocs

Права на мягкую ссылку “opt/lampp/htdocs/domains” д. б. 777 ( или около того )

3. Файл httpd-vhosts.conf

#localhost
  
  <VirtualHost *:80>
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
  </VirtualHost>

  <VirtualHost *:80>
    ServerAdmin mydomain@mail
    DocumentRoot "/opt/lampp/htdocs/domains/mydomain/www"
    ServerName mydomain
    ServerAlias http://www.mydomain
  </VirtualHost>

4. Файл /etc/hosts

#Virtual hosts
  127.0.0.1 localhost
  127.0.0.1 mydomain

5. Меняем владельца файла

Меняем владельца файла

1
/opt/lampp/htdocs/xampp/lang.tmp
:

$ chown (username) /opt/lampp/htdocs/xampp/lang.tmp

Иначе

1
localhost xampp
дальше стартовой страницы может не загрузиться.

6. Перезапуск сервера

Перезапуск сервера:

$ sudo /opt/lampp/lampp restart

… и проверка в браузере:

1
http://mydomain/

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

Если каким-то образом, диск в Linux откажется монтироваться, нужно в Windows отключить быструю загрузку (Fast Boot) в параметрах электропитания.

Для тестирования IE в Linux ставится виртуальная машина (например, VirtualBox), куда устанавливаем Windows7 и любимый браузер IE. В самой Windows редактируем файл

1
hosts
также как и в Linux, с одним условием – нужно вписывать другой IP, вместо 127.0.0.1, нужно вписывать 10.0.2.2.

Вот так:

c:/windows/system32/drivers/etc/hosts
  10.0.2.2 localhost
  10.0.2.2 mydomain

Сайт через виртуальную машину будет также доступен.