Почти на каждом сайте можно встретить слайдер или карусель, которые эффективно вписываются в функционал сайта, а также являются главным составляющем, в плане интерфейса проекта. Сегодня мы поговорим о плагине карусели изображений, который был разработан одним из веб программистов Брайоном Осборном «Brian Osborne». О разработчике, а также о плагине, Вы можете ознакомиться на официальном сайте, который указан в источниках материала данного урока.
Введу Вас в курс по данному плагину, в какой последовательности мы будем его изучать. Для начала ознакомимся полноценно с двумя пунктами меню на официальном сайте: обзор «overview» и опции и конфигурация «options & configuration». Затем перейдем уже к изучению нашего скрипта, разбивая на шаги: HTML, CSS, JQUERY. Кстати, пока мы не перешли к первому шагу, помимо карусели изображений, у нас также имеются различные слайдеры, к примеру стильный слайдер на jQuery. Ну это я так, как говорится, - для обзора!
Давайте, как я предлагал выше, начнем с первого пункта меню, - обзора. Перед нами сразу же представляется демо версия карусели изображений с описанием, которое гласит о том, что данный плагин написан на JQuery и имеет ряд функциональных новшеств, таких как горизонтальное и вертикальное положение, использование эффекта лайтбокса, применения движения «водяного колеса», а также приведен список характеристик:
Как мы видим, послужной список, очень даже впечатляет! Я бы сказал, отличная карусель изображений, которую очень легко интегрировать в любой самописный проект. Причем и смотрится очень достойно!
Теперь давайте, перейдем к рассмотрению ее кода и сразу начнем с 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, после уже сам плагин карусели и скрипт, в котором будем хранить настройки.
<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.
<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 |
Вот такой огромной послужной список получился настроек для данного плагина. В принципе, понятное дело, всеми мы пользоваться не будем, так как это не имеет никакого смысла. А возьмем для нашего скрипта, который будет описан ниже, только те настройки, которые позволят нам создать простенькую карусель изображений.
Используя данную карусель, мы должны задать ей переменную, в которой будем хранить инициализацию функции вызова, это позволит нам обращаться к ней с помощью скрипта. К примеру, пропишем:
var carousel = $('#carousel').waterwheelCarousel();
Как видим, в переменной carousel, мы храним обращение к функции вызова waterwheelCarousel(), что позволяет нам обращаться к самому плагину. Исследуя функции данной карусели, можно выделить из них три.
| Функция | Описание |
|---|---|
| next() | вращает карусель к следующему изображению |
| pev() | вращает карусель к предыдущему изображению |
| reload(options) | перезагружает карусель. используется в том случае, когда были добавлены новые изображения или внесены в настройки какие-либо изменения |
Вот как бы, главные моменты и детали мы разобрали, а теперь давайте перейдем к нашему скрипту.
Как обычно, подключаем сначала все стандартное, а именно библиотеку 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, загрузить пять картинок, которые нам потребуется для тестовой работы карусели изображений.
Как бы особо тут добавить нечего, пожалуй только оформлю код, который я применял для нашего скрипта. По поводу всех настроек, Вы можете посмотреть и ознакомиться с ними в первом шаге.
$(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. Опять же, абсолютно такие же стили задействованы, как у разработчика данного плагина, за исключением и то не обязательным, а именно, для данного примера я добавил градиент.
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;
}
Вот такой получился у нас материал, надеюсь Вам был он полезен или хотя бы пришелся по вкусу. Ждите следующих уроков, постараюсь выпустить на днях! А на этом все, спасибо всем за внимание!