WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Динамическая смена изображений

Random Image Rotation
автор: October, 20 2003 Дэн Бенджамин (Dan Benjamin) и A List Apart
перевод: 30.11.2003 Максим Россомахин и Александр Качанов

Одной из задач, встающих перед современными веб-разработчиками, можно назвать создание сайтов, которые кажутся посетителям свежими и обновлёнными всякий раз, когда они посещают их.

Одно дело, если сайт, создаваемый вами, будет новостным порталом, ну, скажем, таким, на котором новости или их заголовки регулярно обновляются, выводя свежую информацию раз в час или даже чаще. Но как быть тем из нас, кто создаёт для своих клиентов сайты с относительно статичными страницами, содержимое которых меняется нечасто? Как нам обеспечить наших посетителей свежим, изменённым контентом при каждом их повторном посещении, не задействуя при этом никого, кто бы создавал этот самый контент раз в день или даже раз в час?

Даже если менять страницу немного и определенным образом, можно сотворить чудо с любым статическим сайтом. Представьте, например, главное изображение на сайте, которое изменяется всякий раз, когда посетитель перезагружает страницу. Что скажете о ссылках на товары, выполненных в виде картинок, которые волшебным образом изменяются при каждом новом просмотре страницы?

Множество сайтов использует эту технику для смены изображений, среди них:

сайт Hivelogic - динамически меняется титульное изображение
сайт SimpleBits - динамически меняется боковая фотография
сайт Cooper - всё время меняются верхняя картинка и шкурка

Поступим умнее

Существует множество скриптов, позволяющих динамически менять изображения. Большинство из них написано на JavaScript, но страдает одним существенным недостатком: для того, чтобы добавить или удалить какое-нибудь изображение в наборе, вам всякий раз менять код скрипта. Всякий раз, когда хотите что-то менять. На каждой странице. Но ведь вы не программист, вы - веб-разработчик! А добавление или изъятие изображений из набора надо сделать как-то попроще. Скажем, таким же простым, как и обыденное добавление/удаление файлов в папке веб-сервера. Верно?

Разумеется! С помощью чудесных возможностей PHP мы без труда сможем добавить нужную функцию. Не умеете программировать на PHP? Читайте дальше. Весь код уже написан, и вам не надо понимать все его части (да чего уж там - можно совсем не понимать) для работы с ним.

При написании кода я учёл даже тот случай, когда возможно появление ошибки, ну например, папка для изображений пуста - в этом случае "на лету" будет создано и выведено "изображение с ошибкой", в противном случае броузер показал бы уродливую пиктограмму незагруженного изображения.

Требования

Конечно же, для выполнения этой работы вам потребуется разместить свой сайт на хостинге, который поддерживает PHP (идеально, если это PHP версии 4.2 или новее, но это не так уж и важно). Большинство хостеров поддерживают PHP - даже те, что работают на платформе Windows. А всё потому, что PHP не только является мощным языком веб-программирования, но еще и является Open Source-технологией. Технология портирована практически на все существующие ныне платформы, используемые для хостинга, так что весьма вероятно, что ваш хост уже поддерживает PHP.

Ну, можно уже начинать?

Скорей всего, вам не придётся ничего менять в скрипте. Создайте папку на вашем веб-сервере, загрузите в неё изображения, которые собираетесь динамически менять, затем в ту же самую папку загрузите скрипт (не изменяя его). Чтобы увидеть, как работает скрипт, поместите ссылку на него в атрибут источника изображения, вот так:

<img src="/path/to/images/rotate.php" />

Вот и всё. Просто сидите и наслаждайтесь видом меняющихся картинок.

Пускаем в ход напильник

Особенностью этого скрипта является возможность указания конкретного изображения. Это может быть полезно тогда, например, когда вам необходимо привлечь внимание посетителей сайта к какому-то изображению товара, или же по каким-то причинам необходимо "заморозить" ротацию изображений. Это можно сделать, указав перед вызовом скрипта значение переменной "img" следующим образом:

<img src="/path/to/images/ rotate.php?img=my_static_image.jpg" />

Это заставит скрипт загружать файл изображения с названием "my_static_image.jpg", размещённый в папке с набором изображений для динамической замены.

Настройки

Вам может понадобиться слегка модифицировать скрипт, ну, например, в случае, если его необходимо разместить не в той же папке, где лежат изображения, или же вам надо добавить поддержку динамической работы с какими-то дополнительными типами изображений.

Первое, что нужно сделать в таком случае - указать, в какой же папке располагаются изображения, предназначенные для динамического показа. Это легко осуществить, изменив значение переменной:

$folder = '.';

Самый простой вариант - разместить скрипт в той же папке, где лежат изображения. Поскольку так и предлагается делать в обычных случаях, по умолчанию значение для переменной $folder равно "." - картинки как бы говорят скрипту "Я в той же папке, что и ты". Более продвинутые пользователи могут заменить эту точку на путь к папке с нужными файлами, просто записав, например, вот так:

$folder = '/www/example.com/images/rotate_me/';

Теперь нам надо определить типы изображений, которые должен использовать скрипт. На время написания этой статьи самыми распространёнными форматами изображений в Сети были GIF, JPEG, и PNG. По этой причине мы и указали их в качестве форматов, используемых по умолчанию:

$extList[] = 'gif';
$extList[] = 'jpg';
$extList[] = 'png';
$extList[] = 'jpeg';

Если вам нужно добавить новый тип файла - просто скопируйте одну из строк и измените её, вставив необходимое вам расширение файла.

Вот и всё! Вы закончили редактирование скрипта. Теперь вам осталось загрузить его в созданную вами папку с изображениями и сделать на него ссылку, как рассказывалось выше.

Где взять это прямо сейчас?

Вы можете скачать код PHP-скрипта прямо отсюда (Текстовый файл размером 4 килобайта - после скачивания или же сохранения в буфере обмена с последующей вставкой сохраните его у себя под именем rotate.php).

Image Rotator также имеет свою страницу на сайте Hiveware - отсюда можно скачать самую свежую версию скрипта и здесь же можно подробнее разузнать о том, как настроить динамику под ваш собственный сайт.

Наслаждайтесь!

Дэн Бенджамин

От редактора: вот тот же самый срипт для тех, кто использует на хостинге ASP и демонстрация его работы, либо другой вариант демонстрации.

Вот способ использования срипта смены изображений в css:
div#rotateImage {
      background-image : url(/scripts/rotate.php);
}

Ссылки по теме