Меняющаяся картинка в шапке сайта

Описание небольшого php-скрипта, который позволяет организовать на вашем сайте автоматическую смену картинок в шапке.

Это весьма интересный эффект, который сделает ваш сайт более динамичным, ибо при каждой загрузке в шапке будет автоматом появляться новая картинка. Делается это при помощи небольшого php-скрипта.

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

Чтобы все заработало, нужно скрипт сохранить в виде PHP-файла с именем random.php.

Затем подготовить ряд картинок одного размера, и положить в ту же папку, где лежит сам файл скрипта. Пусть для примера это будет папка images. Картинки, кстати, можно сохранять в любом формате, хоть jpg, хоть gif, хоть png.

Вот код самого php-скрипта:

<?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>

В файле стилей CSS мы пропишем это дело в виде фона к соответствующему блоку. Раз у нас это «шапка» (header), то вот туда и воткнем:

#header {
background: url(images/random.php) no-repeat;
width: 800px;
height: 150px;
}

Здесь заданы ширина и высота блока 800х150 пикселей. Соответственно и картинки все должны быть такого же размера.

В правиле background мы указали не совсем обычный URL — вместо привычной ссылки на картинку, мы дали ссылку непосредственно на наш файл random.php. То есть в нужном месте на странице будет подставляться не сама картинка, а этот php-скрипт, который уже в свою очередь подставит там случайную картинку. Все просто! :)

Далее мы в коде самой страницы напишем:

<div id="header"></div>

И этого достаточно. Конечно же непременным условием должна быть поддержка работы PHP на вашем хостинге. Но сейчас это есть практически у всех хостеров, даже на самых дешевых тарифах.

UPD от 01.04.2011: Есть более современный способ сделать подобную фишку на jQuery. Об этом я написал в статье Фото галерея с плавно меняющимися картинками.

Enjoy!

Автор: Игорь Квентор
www.websovet.com