Циклическое слайдшоу на jQuery E-mail
Рейтинг пользователей: / 0
ХудшийЛучший 
Автор: Corak   
06.12.2009 00:44

Нашел в сети прикольную реализацию сабжа. Основана она на Cycle, плагине для jQuery. Служит он для реализации всяких штук с зацикливанием всяких HTML блоков. О нем я возможно напишу в следующий раз. Ссылка интересующимся. Но вернемся к нашему слайдшоу.

Тут вы можете взять скачать пример. Или посмотреть демо.

Настройка скрипта

Первое, что понадобиться это вставить следующий код внутрь тэга <head>

<head>
    <!-- Stylesheets-->
    <link rel="stylesheet" type="text/css" href="/css/presentationCycle.css" />

    <!-- Scripts -->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='js/presentationCycle.js'></script>
</head>

Затем определяем контейнер для Cycle.




<div id="presentation_container" class="pc_container">

    <div class="pc_item">
        <div class="desc">
            <h1>Description title</h1>
            You can put your description in here.
        </div>
        <img src="/images/slide1.jpg" alt="slide1" />
    </div>

    <!-- ... repeat the previous item -->

</div>

<div id="presentation_container" class="pc_container"> будет передаваться в Cycle как контейнер для блоков html, которые необходимо будет прокручивать. Внутри него определяются несколько блоков  <div class="pc_item">. Они и являются отдельными слайдами, которые необходимо прокручивать. 

И последний шаг - дописываем следующий код:

<script type="text/javascript">
    presentationCycle.init();
</script>

Настройка внешнего вида

Теперь рассмотрим внутренности файла js/presentationCycle.js

С нем мы задаем структуру для Cycle. Детали опустим, они выходят за рамки данной заметки. 

Первый интересный нам кусок кода находиться на 18 строке:

//progressbar options
barHeight: 14,
barDisplacement: 20,
barImgLeft: "images/pc_item_left.gif",
barImgRight: "images/pc_item_right.gif",
barImgCenter: "images/pc_item_center.gif",
barImgBarEmpty: "images/pc_bar_empty.gif",
barImgBarFull: "images/pc_bar_full.gif",

Высота полосы определяется в пикселях, это необходимо для правильной работы скрипта. Высота должна быть такой же, как и у изображений из папки images. Изображения содержат как пустую версию элемента, так и заполненную. Это сделано для более быстрой загрузки страницы.

Изображения должны быть одинаковой высоты для правильного позиционирования полосы. Также следует убедиться, что та же высота установлена в скрипте.

barDisplacement является суммой padding-а и margin-а.

Для внесения изменений в настройки нет необходимости менять сам Javascript файл. Просто после задания контейнера для Cycle можно вставить код с изменением настроек. Пример:

//Настройки полосы прокрутки
 
presentationCycle.barHeight = 10; //тут изменяем высоту полосы
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //а тут меняем изображение
 
presentationCycle.init(); //запуск скрипта

Для настройки параметров цикла, надо задать следующие переменные:

 
//настройки прокрутки
slideTimeout: 8000, // интервал смены слайда
containerId: "presentation_container", // контейнер в котором содержаться сменяющиеся изображения
//настройки для Cycle
cycleFx: 'scrollHorz', // тип эффекта
cycleSpeed: 600, // скорость смены слайда

Вот собственно и все. 
Обновлено 07.12.2009 00:32
 

Добавить комментарий


Защитный код
Обновить