Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 31 - марта Диалоги и lightbox
3594 - 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"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [5]
  • Гости: [3]
  • Поисковики: [2] Яндекс, Яндекс
  • Были сегодня : [5] Google, Яндекс, Яндекс, redflame, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 1.421сек
  • Потребление памяти: 4.960 Mb 
  •   яндекс.ћетрика