Cycle (цикл) – это скрипт, позволяющий легко отображать множество изображений в презентациях. Этот скрипт поддерживает многие эффекты, а также циклы html-элементов.
Цикл презентаций (Presentation Cycle) – это один из вариантов функционала Cycle. Вместо создания списка цифр, на которые надо нажимать, Presentation Cycle создает панель управления, которая показывает, когда появится следующий слайд.
В этой статье я расскажу вам, как организовать сценарий подобного типа на вашей веб-странице, а также раскрою некоторые тонкости создания элементов цикла и панели управления.
Как показано на странице примера, скрипт создает панель управления автоматически, и пользователю не приходится добавлять никаких html-кодов.
В зависимости от настроек скрипта он может оперативно подстраиваться под различное количество слайдов в презентации.
Особенности скрипта
• Цикл элементов
• Корректируемое время анимации
• Создание панели управления, на которой также отображается стадия презентации
• Работа с современными Интернет-браузерами
Создание скрипта
Сначала загружаем компоненты файла на ваш сервер (или на локальный сервер, если вы работаете в тестовом режиме).
Создаем новую html-страничку, а в секции <head> пишем следующее:
<head>
<!—Стили страницы-->
<link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
<!-- Скрипты -->
<script type='text/javascript' src='http://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>
А теперь пора заняться созданием массива для хранения html-элементов, которые будут задействованы в цикле.
<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>
По умолчанию этот массив будет называться “presentation_container” – это следует из настроек скрипта и стилей страницы, которые установлены по умолчанию.
Элементы классом ниже называются “pc_item”, также в соответствии с настройками по умолчанию.
Загрузили все файлы и картинки? Тогда займемся скриптом.
Перед массивом, в котором будут храниться элементы цикла, пишем следующее:
<script type="text/javascript">
presentationCycle.init();
</script>
Вот и все, что нам требуется для того, чтобы все работало – настройки, разумеется, по умолчанию.
Далее я расскажу вам, как организовать конфигурацию скрипта в соответствии с вашими предпочтениями.
Работа над внешним видом программы
Я начну с того, что объясню вам, как настроить отображение картинок, которые генерируются панелью управления.
Файл Javascript цикла презентаций содержит следующий код, который отвечает за изображения, используемые скриптом (строка 18)
//настройки панели управления
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 – комбинированная переменная, которая состоит из внутреннего содержания панели и ее обрамления.
Сменить настройки можно с помощью нижеприведенного кода, при этом вносить изменения в файл Javascript не придется. Вставьте код после создания массива элементов цикла.
presentationCycle.barHeight = 10; //не по умолчанию
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //использование другого изображения
presentationCycle.init(); //запуск скрипта
Настроить цикл можно следующим образом:
//настройки слайда
slideTimeout: 8000,
containerId: "presentation_container",
//настройки цикла
cycleFx: 'scrollHorz',
cycleSpeed: 600,
slideTimeout – время, которое потребуется для перехода к следующему слайду.
containerId – массив, в котором хранятся элементы цикла.
cycleFx – эффект цикла, который используется в скрипте.
cycleSpeed – скорость анимации.
Для добавления текста в слайды я применил элементами <div> - вы можете пользоваться любыми другими элементами, в чем заключается большое преимущество Cycle.