Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 31 - марта Диалоги и lightbox
4706 - 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;
}
Теперь всё готово! Открываем страницу и любуемся нашим новым слайдером, который украсит сайт!

Можешь почитать и вот эту статейку "Меняем фон или шапку сайта по времени года"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [11]
  • Гости: [11]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.336сек
  • Потребление памяти: 5.166 Mb 
  •   Яндекс.Метрика