• 2428
  • 0
  • Автор: Blueberry
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Blueberry – отличная разработка marktyrrell, которая позволяет быстро создать слайдер из нескольких изображений на Вашем сайте.

1. В самом начале нам необходимо скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. .
2.Распаковываем архив в корневую папку сайта .
3.Далее,в main.tpl необходимо активировать плагин подключаем библиотеку jquery и сам плагин:

Код:
<script src="ljquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
4.Здесь мы указали путь до этих файлов.
5.Теперь мы активируем сам слайдер таким способом:
Код:
<script>
$(window).load(function() {
$('.blueberry').blueberry({
interval: 5000,
duration: 500,
lineheight: 1,
hoverpause: true,
pager: true,
keynav: true
});
});
</script>
Разработчик оставил нам не большую возможность изменить параметры отображения слайдера и картинок.

interval – Интервал смены изображений. Указывается в милисекундах.
duration – Длительность перехода/эффекта смены изображений. Указывается в милисекундах.
lineheight – Высота отображения изображений. Указывается в пикселях.
hoverpause – Остановка слайдера при наведения курсора мышки на изображение. Отключить: false;
pager – Отключить/включить отображение навигации изображение под слайдером в виде кружков. Отключить: false;
keynav – Возможность менять изображений с помощью кнопок навигации на клавиатуре.

Вот мы и разобрались с основными настройками. Теперь нам надо создать сам слайдер на странице сайта. Делается это довольно просто:
Код:
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
</div>
<!-- blueberry -->
Мы создали блок с присвоенным классом blueberry и внутри него в теге li разместили все изображения (адрес их местонахождения), который мы хотим задействовать в слайдере. В данном примере их 3.

Нам даётся возможность полностью настроить отображение внешнего вида слайдера с помощью подключаемого файла стиля
blueberry.css, который расположен в архиве. Откройте его и Вы с легкостью сможете изменить размер слайдера, его расположение, цвет фона и т.п. По умолчанию мы задали белый цвет фона, ширину изобржений в 500px и размещение его по центру страницы:
Код:
.blueberry { 
max-width: 500px;
background: #fff;
padding: 20px;
margin: 10px auto;
}
Теперь всё готово! Открываем страницу и любуемся нашим новым слайдером, который украсит сайт!

Можешь почитать и вот эту статейку "инклюд в NG"

mistakes

Это тоже интересно

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

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element