Хаки и Скрипты Next Generation CMS : Диалоги и lightbox, Интерфейс, Слайдшоу и анимация : Простои ,легкий и быстрый слайдер

irbees2008 Опубликовано - 31 - марта Диалоги и lightbox

Автор: 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;
}

Теперь всё готово! Открываем страницу и любуемся нашим новым слайдером, который украсит сайт!

Можешь почитать и вот эту статейку "HTML тег area "

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

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