Улучшенная динамическая смена изображений

Дэн Бенджамин (Dan Benjamin) уже давно является основателем техники динамической смены изображений, которую используют большое количество веб-разработчиков. Новый метод имеет значительное преимущество над старым. Все очень подробно расписано. Если знаешь английский, то читай оригинал.

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

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

Минусы первого метода динамической замены

Реализовать этот метод было легко, но он мог работать только напрямую с картинкой — не было способа связать изображение с собственным адресом, и не было способа присвоить изображению собственный атрибут alt. Графический файл просто менялся на другой при каждой загрузке страницы, и всё. Хуже того — тэг IMG был статичным, из-за чего все файлы должны были иметь одинаковый размер. В конце концов получился метод случайного показа, но он не блистал гибкостью.

Новый способ смены изображений меняет все эти недостатки. Он по-прежнему выбирает случайную картинку из директории, но в данном случае стало возможным связывать любую из них со своим собственным адресом. Также стало возможным создавать свои атрибуты alt и title для каждого изображения. Теперь вместо того, чтобы отправлять картинку напрямую в браузер, новый скрипт генерирует тэги a href и img на ходу, в зависимости от выбора графического файла.

Компромисс

Конечно, всегда приходится идти на уступки. Если старый способ был лёгким в управлении (просто закачать или удалить файл из папки с картинками на сервере), то новый способ имеет конфигурационный файл. К счастью, благодаря возможностям PHP, конфигурационный файл достаточно прост в использовании, что делает добавление и удаление картинок лёгким процессом.

Работаем

Можешь посмотреть работающий пример прямо здесь. Перезагрузи страницу несколько раз и смотри как меняются картинки. Подведи курсор мыши на каждую картинку, чтобы увидеть изменение адреса. Если просмотреть исходник, то можно увидеть изменения в атрибутах alt и title.

Требования

Хостинг-провайдер должен поддерживать PHP (лучше всего PHP версии 4.2 и выше, но данный метод должен работать с более старыми версиями). Большинство веб-хостов поддерживают PHP, даже те, которые работают на платформах Windows. Если сомневаешься, то спроси какая версия PHP установлена на сервере.

Старый скрипт можно было использовать как в статичных HTML-страницах, так и в PHP-страницах, а вот новая версия должна вызываться только из PHP-файла. Это означает, что страницы должны заканчиваться расширением .php (не .html).

Файл конфигурации

Я обещал, что конфигурационный файл будет легко настроить, и благодаря возможности PHP загружать и понимать INI-файлы, сделать это проще простого. Кто знаком со старыми версиями Windows, знают об этом формате — тоже самое что и файлы win.ini и system.ini.

Конфигурационный файл, содержащий картинки, может выглядеть так:

[ALA]
src   = img/ala.jpg
alt   = ALA Logo
url   = http://alistapart.com/
title = A List Apart

[Scientist]
src   = img/scientist.png
alt   = Pic of a scientist
url   = http://hivelogic.com/
title = Hivelogic

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

Следующие строки нужны для обозначения атрибутов src, alt, url и title. Значение src должно указывать на местоположение картинки на сервере также как и в стандартном HTML-документе (относительный или абсолютный путь). Потом эти значения собираются с помощью PHP-скрипта, чтобы создать заполненные тэгиa href и img.

Но как быть с элементами тэгов height и width? К счастью нет необходимости указывать их вручную. Данный скрипт достаточно умён для того, чтобы выяснить это на ходу, после выбора картинки.

Итак, если скрипт выбрал картинку Scientist, то он создаст следующие img тэги исходя из информации в конфигурационном файле:

<a
href="http://hivelogic.com/"
title="Hivelogic"
>
<img
src="img/scientist.jpg"
alt="Pic of a scientist"
/>
</a>

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

Реализация динамической замены

Можешь просмотреть скрипт rotator.php и пример конфигурационного файла, или скачай всё вместе в zip файле. Zip-архив тоже содержит файл index.php для демонстрации PHP-кода, рассмотренного ниже.

После того как ты создал (или изменил) конфигурационный файл, сохрани его с именем images.ini и загрузи на веб-сервер. Следует поместить файл в одну папку со страницами, которые будут показывать картинки (вместо папки с картинками). Другими словами файл должен находится рядом с index.php

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

Затем загружай сам скрипт. Данный PHP-скрипт, названный rotator.php, должен быть загружен в одно место с вашими страницами, рядом с index.php

Теперь нужно вставить кусочек кода в уже существующую страницу (которая имеет расширение .php, так?) чтобы присоединить скрипт; это станет началом показа картинок в любом месте вашей страницы. Просто пропишите следующею линию кода в самом верху PHP-страницы:

<?php include('rotator.php'); ?>

Наконец, всё готово к показу случайных картинок. Чтобы всё заработало, вставь строчку PHP-кода точно в то место, где должен быть img тэг (код самой картинки). Таким образом, если страница выглядит так:

<p>Here is a picture of a scientist:</p>
<a
href="http://hivelogic.com/"
title="Hivelogic"
>
<img
src="img/scientist.jpg"
alt="Pic of a scientist"
/>
</a>

нужно внести изменения, чтобы она выглядела так:

<p>Here is a picture of a scientist:</p>
<?php showImage(); ?>

Если появится желание, то можно скопировать этот код еще раз в любое другое место на странице. Изображения должны всегда быть разными — если графических файлов достаточно много, то не возникнет проблем с появлением одинаковых картинок на одной странице в одно и то же время.

Разные файлы конфигурации для разных страниц

Укажи имя альтернативного конфигурационного файла когда вызывается функция showImage. Таким образом вместо того чтобы использовать вышеуказанный способ, код может выглядеть вот так:

<p>Here is a picture of a scientist:</p>
<?php showImage('myprecious.ini'); ?>

Где myprecious.ini будет альтернативным конфигурационным файлом, показывающим совсем другой набор картинок. Можно так делать на любой странице или даже несколько раз на одной и той же странице.

Что если мне не нужны ссылки?

Можно просто показывать картинки без ссылок. Для этого оставь пустым url значение картинки в конфигурационном файле. Если URL не найден, то скрипт выдаст тэг img без a href тэгов.

Элементы ID или CLASS для картинки

Да, я рассчитывал, что тебе это может пригодиться. Если появилась такая необходимость, просто добавь тэги id и class в конфигурационный файл, вот так:

id    = specialImageID
class = specialImageClass

Если скрипт найдёт эти тэги, то он добавит их автоматически. Эти тэги необязательны.

Всё, готово

Как только ты вставишь код в свою PHP-страницу, перезагрузи её несколько раз, чтобы увидеть эффект. Ну вот и всё, готово! В зависимости от настроек кеша (cache) и поведения браузера, может придётся подождать несколько мгновений перед тем как картинка загрузится. Удачи!