Уроки Карусель изображений
10 декабря 2015
3104
карусель изображений, jquery

Карусель изображений

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Почти на каждом сайте можно встретить слайдер или карусель, которые эффективно вписываются в функционал сайта, а также являются главным составляющем, в плане интерфейса проекта. Сегодня мы поговорим о плагине карусели изображений, который был разработан одним из веб программистов Брайоном Осборном «Brian Osborne». О разработчике, а также о плагине, Вы можете ознакомиться на официальном сайте, который указан в источниках материала данного урока. 

 

Введу Вас в курс по данному плагину, в какой последовательности мы будем его изучать. Для начала ознакомимся полноценно с двумя пунктами меню на официальном сайте: обзор «overview» и опции и конфигурация «options & configuration». Затем перейдем уже к изучению нашего скрипта, разбивая на шаги: HTML, CSS, JQUERY. Кстати, пока мы не перешли к первому шагу, помимо карусели изображений, у нас также имеются различные слайдеры, к примеру стильный слайдер на jQuery. Ну это я так, как говорится, - для обзора!

 

Первый шаг. Знакомство с официальным сайтом.

 

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

 

  • Горизонтальное и вертикальное ориентирование
  • Управление каруселью с помощью клавиш
  • Поддержка кликабильности центрального изображения по ссылке, а боковых для перехода по навигации карусели
  • Присутствие API, которое может быть использовано для перемещения карусели
  • Не требуется много кода HTML и CSS для интеграции
  • Использование большого количества изображений при загрузке браузером
  • Скорость, тип мультипликации, прозрачность, положение карусели, расстояние все можно настроить в одном в файле
  • Поддержка пропорциональности изображений
  • Исчезновение изображений при новом круге
  • Бесконечное круговое вращение
  • Поддержка всеми браузерами FireFox, Chrome, IE7 (даже устаревшими)

 

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

Теперь давайте, перейдем к рассмотрению ее кода и сразу начнем с JavaScript.

 

JavaScript.

 

<!-- note: should work with jQuery 1.4 and up -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<script type="text/javascript" src="/jquery.waterwheelCarousel.min.js">
<script type="text/javascript">
  $(document).ready(function() {
    $("#carousel").waterwheelCarousel({
      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
  });
</script>

 

Как мы видим, подключаем библиотеку jquery.min.js, после уже сам плагин карусели и скрипт, в котором будем хранить настройки.

 

CSS.

 

<style type="text/css">
  #carousel {
    width:800px;
    height: 300px;
    display: relative;
  }
  #carousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
  }
</style>

 

Устанавливаем для карусели ширину равную 800 пикселей и высоту 300 пикселей, используем при этом позиционирование relative.

 

HTML.

 

<div id="carousel">
<img src="/image1.jpg" alt="Image 1" />
<img src="/image2.jpg" alt="Image 2" />
<img src="/image3.jpg" alt="Image 3" />
<img src="/image4.jpg" alt="Image 4" />
<img src="/image5.jpg" alt="Image 5" />
</div>

 

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

 

Опция Описание Тип Значение (по умолчанию)
startingItem номер изображения в центре при открытии галереи integer 0
separation расстояние между изображениями карусели integer 150
separationMultiplier коэффициент изменения расстояния для дальних от центра картинок integer 0.6
horizonOffset расхождение крайних изображений по вертикали integer 0
horizonOffsetMultiplier перекрытие крайних изображений по вертикали integer 0.7
sizeMultiplier размер изображений по краям integer 0.7
opacityMultiplier прозрачность изображений по краям integer 0.8
horizon выравнивание изображений по вертикали. 0 для авто integer 0
flankingItems количество изображений, выводимых по обе стороны от главного integer 3
speed скорость ротации изображений в миллисекундах integer 300
animationEasing эффекты анимации string 'linear'
quickerForFurther ускорение движения в центр при клике по боковым картинкам boolean true
edgeFadeEnabled скрытие картинок, достигших края. Иначе они двинутся из центра boolean false
linkHandling 0 - переход кликом по ссылке c любого изображения, 1 - запрет перехода, 2 - переход кликом по ссылке только c центрального изображения integer 2
autoPlay время в миллисекундах между ротацией, 0 - только по клику, отрицательное значение - смена направления ротации integer 0
orientation расположение карусели 'horizontal' или 'vertical' string 'horizontal'
activeClassName название класса, чтобы в настоящее время назначать на пункт в положении центра string 'carousel-center'
keyboardNav использование клавиш boolean false
keyboardNavOverride при активации клавиш, имеется возможность управления ими boolean true
imageNav клик по любому изображению перемещает его в центр boolean true
preloadImages предварительная подготовка изображений да/нет boolean true
forcedImageWidth выравнивание ширины integer 0
forcedImageHeight выравнивание высоты integer 0
movingToCenter движение в центр карусели function empty
movedToCenter движение из центра карусели function empty
clickedCenter активная ссылка в центре function empty
movingFromCenter изображение начало движение относительно положения центра function empty
movedFromCenter изображение закончило движение относительно положения центра function empty

 

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

 

Переходим к API функциям.

 

Используя данную карусель, мы должны задать ей переменную, в которой будем хранить инициализацию функции вызова, это позволит нам обращаться к ней с помощью скрипта. К примеру, пропишем:

 

var carousel = $('#carousel').waterwheelCarousel();

 

Как видим, в переменной carousel, мы храним обращение к функции вызова waterwheelCarousel(), что позволяет нам обращаться к самому плагину. Исследуя функции данной карусели, можно выделить из них три.

 

Функция Описание
next() вращает карусель к следующему изображению
pev() вращает карусель к предыдущему изображению
reload(options) перезагружает карусель. используется в том случае, когда были добавлены новые изображения или внесены в настройки какие-либо изменения

 

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

 

 

Второй шаг. HTML.

 

Как обычно, подключаем сначала все стандартное, а именно библиотеку jquery.min.js, сам плагин скрипта waterwheelCarousel.js, наш скрипт настроек carousel.js и файл стилей demo.css.

 

<link type="text/css" rel="stylesheet" href="css/demo.css">	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.waterwheelCarousel.js"></script>
<script src="js/carousel.js"></script>

 

Теперь, перейдем к коду HTML, в котором мы прописываем блочный элемент div и задаем ему идентификатор carousel.

В контейнер помещаем теги img, соответственно, с картинками и ссылками.

 

<div id="carousel">
<a href="http://roothelp.ru" target="_blank">
<img width="350" height="665" alt="Первая картинка" src="img/1.png">
</a> 
<a href="http://roothelp.ru" target="_blank">
<img width="350" height="665" alt="Вторая картинка" src="img/2.png">
</a> 
<a href="http://roothelp.ru" target="_blank">
<img width="350" height="665" alt="Третья картинка" src="img/3.png">
</a>
<a href="http://roothelp.ru" target="_blank">
<img width="350" height="665" alt="Четвертая картинка" src="img/4.png">
</a>
<a href="http://roothelp.ru" target="_blank">
<img width="350" height="665" alt="Пятая картинка" src="img/5.png">
</a>	
</div>

 

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

 

Третий шаг. JQUERY.

 

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

 

$(document).ready(function() {
$("#carousel").waterwheelCarousel({
startingItem: 1, 
separation: 280, 
separationMultiplier: 0.7,
horizonOffset: 0,
horizonOffsetMultiplier: 1,
sizeMultiplier: 0.7,
opacityMultiplier: 0.9,
horizon: 0, 
flankingItems: 2,
speed: 1000,
animationEasing: 'linear', 
quickerForFurther: true,
linkHandling: 2, 
autoPlay: 1500, 
orientation: 'horizontal', 
imageNav: true,
preloadImages: false, 
forcedImageWidth: 0, 
forcedImageHeight: 0, 
});
});

 

 

Четвертый шаг. CSS.

 

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

 

body{
	background: -moz-linear-gradient(#000, #FFF);
	background: -ms-linear-gradient(#000, #FFF);
	background: -o-linear-gradient(#000, #FFF);
	background: -webkit-linear-gradient(#000, #FFF);
	background-repeat: no-repeat;
	min-height: 900px;
	max-height: 2000px;
}
#carousel {
	width:100%;
	height:140px;
	position:relative;
}
#carousel img {
	display: hidden;
	cursor:	auto; 
}

 

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

 





Роман КраутерИсточник материала »