JavaScript слайд-шоу для сайта на Drupal
Такой элемент веб-дизайна как слайд-шоу способен существенно преобразить сайт, сделав его не только более привлекательным и современным, но и более информативным. Так, в качестве изображений веб-мастер может поместить различные полезные рекламные материалы, которые пригодятся посетителям сайта, или коллекцию личных фотографий для демонстрации своего портфолио. Таким образом, в одном блоке страницы можно разместить сразу несколько объектов и сэкономить место на сайте.
В данной статье подробно рассмотрен вопрос создания элементарного слайд-шоу с использованием JavaScript и его использования на сайте под управлением CMS Drupal.
Шаг 1: подготовка изображений
Перед созданием слайд-шоу следует, прежде всего, позаботиться о наличии нужного количества изображений, желательно одинакового размера. В противном случае, данный элемент сайта будет смотреться некрасиво, также возможно возникновение проблем с версткой (некоторые блоки могут "съехать").
Для создания нескольких изображений одинакового размера можно воспользоваться любым графическим редактором, например, GIMP или пресловутым Photoshop. Пользователю следует создать новый файл желаемого размера и использовать его в качестве шаблона, перемещая в него изображения, которые будут использоваться в слайд-шоу. Во избежание путаницы, картинки рекомендуется называть в том порядке, в котором они в дальнейшем будут выводиться на сайте.
Затем изображения следует загрузить на сайт. Если Вы используете CMS Drupal, картинки, опять же во избежание путаницы, рекомендуется поместить в папку с активной темой (sites/all/themes/ваша тема/images), хотя если Вы поместите их в другой каталог, это ни на что не повлияет.
Читать далее...
Шаг 2: реализация предварительной загрузки изображений
Для оптимизации работы слайд-шоу рекомендуется позаботиться о предварительной загрузке изображений. При помощи небольшого скрипта можно добиться того, чтобы все картинки помещались в кэш браузера сразу после загрузки сайта - это ускорит их отображение. Для этого следует открыть главную страницу сайта в текстовом редакторе (в Drupal это page. tpl. php) и поместить между тегами и следующий код:
Здесь пути до изображений, обозначенные как "image1. src", "image2. src" и т. д. следует заменить на собственные.
Если необходимо включить в слайд-шоу больше пяти картинок, то их следует добавить перед тегом следующим образом: var image6=new Image() image6. src="sites/all/themes/theme/images/slideshow-06. jpg"
То есть заменить путь и порядковый номер изображения в двух строчках.
Шаг 3: добавление первого изображение
Чтобы добавить первое изображение, которое будет отображаться при загрузке сайта, следует открыть в текстовом редакторе главную страницу и поместить между тегами и в нужном месте следующий код:
Для задания другого размера можно поэкспериментировать с атрибутами width (ширина) и height (высота):
Атрибут name позволит в дальнейшем управлять отображением слайд-шоу средствами JavaScript.
Шаг 4: создание слайд-шоу
Наконец, для реализации эффекта слайд-шоу на главной странице сайта следует поместить после предыдущего куска кода (но обязательно перед тегом следующий скрипт:
Здесь переменная var step=1 отвечает за шаг, который будет учитываться при смене изображений. По умолчанию он равен единице, поэтому картинки будут отображаться по порядку. Если установить шаг, равный двум, то при количестве картинок, равном пяти, мы получим вывод изображений в случайном порядке (1, 3, 5, 2, 4, 1).
Условие if (step<5) определяет максимальное количество отображаемых рисунков, равным пяти, а затем слайд-шоу повторяется.
Изменить время, в течение которого показывается каждая картинка, можно, подкорректировав значение в строчке setTimeout("slideit()", 3000), то есть заменив 3000 на собственное число.
Закрыть текст.
