Это весьма интересный эффект, который сделает ваш сайт более динамичным, ибо при каждой загрузке в шапке будет автоматом появляться новая картинка. Делается это при помощи небольшого 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);
}
}
?>
Принцип его работы довольно прост: при каждой перезагрузке страницы он будет случайно выбирать картинку из той же папки, где лежит сам. Чтобы все заработало, нужно скрипт сохранить в виде PHP-файла с именем random.php. Затем подготовить ряд картинок одного размера, и положить в ту же папку, где лежит сам файл. У нас это пусть будет папка header, вложенная в общую папку с картинками images.Картинки можно сохранять в любом виде, хоть jpg, хоть gif или даже bmp.
В листе стилей CSS мы пропишем это дело в виде фона к соответствующему блоку. Раз у нас это “шапка” (header), то вот туда и воткнем:
#header {
background: url(images/header/random.php) no-repeat;
width: 800px;
height: 150px;
}
Здесь заданы ширина и высота блока 800х150 пикселей. Соответственно и картинки все должны быть такого же размера. В правиле background мы указали не совсем обычный URL — вместо привычной ссылки на картинку, мы дали ссылку непосредственно на наш файл random.php. То есть в нужном месте на странице будет подставляться не сама картинка, а этот php-скрипт, который уже в свою очередь подставит там случайную картинку. Все просто! :)
Далее мы в коде самой страницы напишем:
<div id="header"></div>
И этого достаточно. Конечно же непременным условием должна быть поддержка работы PHP на вашем хостинге. Но сейчас это есть практически у всех хостеров даже на самых дешевых тарифах.
Пример работы данного скрипта можно посмотреть здесь:
Чтобы увидеть новую картинку, просто обновите страницу.
Enjoy!
Спасибо!!! Прикольно, как-то попробую
Вот-вот, и не надо мучиться с выбором, ту или эту картинку поставить. Пусть все работают! Спасибо, мне пригодится!
Дерзайте! :)
спасибо, полезная весч:)
Упс! Только сегодня заметил, что Опера некорректно отображает рамку у кода, помещая туда лишь первый “абзац”. Код, конечно же, нужно скопировать целиком, от знака <?php до знака ?>
Ох уж эта Ооопера… (матерится в пол голоса)…
Игорь, у меня почему-то иначе получается, Опера показывает код целиком и на белом фоне, а все остальное на черном орнаментальном. А Мозилла (FF) как раз выделяет рамкой кусочек. Посмотрите, пожалуйста.
А вот эта ссылка на скриншот странички в IE7
Удивительно, но только ругаемый браузер показывает точно. Что это, особенность WP?
Привет, Илья! А сейчас как? Просто я убрал из кода пустые строки. ВП воспринимает их как новый абзац, поэтому и чудит так.
Вот теперь все три браузера показывают одинаково верно.
И сколько еще неожиданностей может быть?
Как-то чем дальше, тем опаснее. Показалось,
что WP поможет преодолеть малую грамотность в области WEB, а что-то чем больше узнаю, тем меньше уверенности.
:) Вордпресс, как и любой другой CMS движок, любит преподносить сюрпризы. Оттого и существуют целые форумы поддержки, на которых обсуждается куча траблов и глюков. Однако все решаемо, не стоит волноваться.
Вопрос к программистам:
я таким образом делаю картинки рядом с сылкой при наведении на нее. (a:hover {background:url(’images/title/title.php’) right center no-repeat; padding:23px 65px 12px 0;text-decoration:underline;color: #00f617;})
Чего нужно добавить в код, что бы у всех ссылок были разные картинки?
sanek, это вопрос не к программистам, а к верстальщикам. Указанный вами кусок кода реализует для всех ссылок отображение одинковой картинки при наведении мыши. Чтобы картинки были разные, нужно добавить разные имена классов перед тэгом a. И, соответственно, в каждом правиле прописать свою картинку. Например:
.ssylka1 a:hover {background: url(адрес картинки 1) и т.д.}
.ssylka2 a:hover {background: url(адрес картинки 2) и т.д.}
.ssylka2 a:hover {background: url(адрес картинки 2) и т.д.}
В тексте для нужной ссылки пишете <span class=”ssylka(номер)”> ссылка</span>
про это-то я знаю. Вот мой тестовый сайт drupal.pistoletmakarova.ru (не пугайтесь названия, скоро адрес будет vashe-hobbi.com как доделаю все)
На главной странице и во всех разделах у меня ссылки на посты при наведении показывают картинку. Хочу чтоб были разные :-). Каждой ссылке присваивать class - у меня много постов, надо автоматом.
Вот тут уже ничего не посоветую. Возможно есть варианты на Java-скриптах.
Да по-любому есть какой-нибудь скрипт, только его фик найдешь.
Ладно, спасибо за поддержку.
Спасибо большое! Все работае! я сам делал так:
1.Создать рнр файл и прописать там код <?php img srs={THEME}/images/header.jpg ?>
(если хочешь млжно хоть до 1000)
потом просто присоединяем куда нужно
Скажите, пожалуйста, а что делать в случае если во всех браузерах скрипт работает нормально (при переходе на другую страницу меняется картинка), а в Опере - чтобы поменялась картинка необходимо страницу именно обновлять, а не просто переходить на другую страницу. Как это исправить?
Тема все еще актуальна. Очень нужен совет!
Валентина, увы я не программист, и как изменить скрипт для того, чтобы Опера не кэшировала картинки, я не знаю.
Вот что надо сделать! выводить на страницу таким образом:
<?phpecho "<div id='header'
style='background: url(images/header/random.php?p=".rand().") no-repeat; width: 800px; height: 150px;'></div>";
?>
Может кому пригодится)
Ваш сайт съел куски кода!
Код поправил :) Да, возможен и такой вариант, но только в том случае, если в шапке ничего кроме фона не будет. Если же захочется добавить туда текст заголовка или описания, то код заметно усложнится.
У меня вопросик! А можно как то сделать так чтобы картинка все таки менялась скажем каждые 5-10 секунд, а не за счет обновления страницы!
Виктор, можно. Для этого уже существуют готовые решения на jQuery в виде слайдера. Если интересно, могу в ближайших постах рассказать об этом подробнее с примерами
Спасибо!
1. Можно ли сделать так чтоб первой грузилась определенная картинка, а дальше уже рандомно.
2. Про готовые решения на jQuery - да интересно.
Я думаю, что можно. Но как это сделать я не знаю :) Я лишь использую готовые решения.
Игорь, подскажите, у меня такой глюк в Интернет Эксплорере не отображается основной рисунок шапки, а только фон , как это исправить ?
Дмитрий, дело в том, что у вас картинка в формате png, которую ИЕ не распознает.
А что надо сделать? Преобразовать ее в jpg? Мне дизайнер делал я в фотошопе не разбираюсь, чтобы сохранить качество
Да, проще переделать ее в jpg
Добрый день всем. К сожалению нечего не получается, не пойму в чем дело. Браузер IE, картинки в jpg. Может в random.php что-то надо изменять?
что бы енто работало на компе должен быть установлен сервер?
Верно!
Игорь,
при использовании в “body” “background-image” картинка не появляется тоже по причине не установленного сервера? Если “да”, то на что еще может влиять сервер.
Нет, Павел, не из-за сервера. Скорее всего картинка прописана с ошибкой. Как выглядит полностью правило для добавления картинки-фона в css?
Игорь,
Наверное я не правильно обьяснил причину.
Если записать так:
background: #FFFFC0 url(image/motorkoleso.jpg) no-repeat scrol top center;
то-есть одной строкой, то нет ни цвета фона ни картинки.
А если так:
background-color: #FFFFC0;
background-image: url(image/motorkoleso.jpg);
background-repeat: no-repeat;
background-attachment: scrol;
background-position: top center;
то все на месте.
В одной, ну очень умной(оснований не верить нет), книжке прочитал, что без разницы, как записывать. Вот и встал в ступор. :(
Попробуйте в первом варианте убрать слово scrol. Оно там лишнее. Лучше потом добавить еще одно правило:
background-attachment: scrol;
Игорь,
убрал “scrol” и все стало на свои места, даже не требуется добавлять отдельной строкой “background-attachment: scrol;”. Видимо IE по умолчанию “scrol” принимает.
“Оченно” интересует, как у рамочек блоков сделать углы закругленные. Может где на Вашем сайте есть тема?
Павел, вот здесь есть похожая фишка http://www.websovet.com/vydelenie-ssylok-a-lya-kruglyj-marker
Принцип тот же
Игорь,спасибо. Буду пробовать закруглять.
Вопрос по меняющейся картинке. Этот же принцип можно применять к любому блоку в контейнере, и не только к картинкам, но и к тексту?
КАК СОЗДАТЬ PHP файл,в корне сайта укоза запихнул рандом.php.txt. и убрал .txt и не хочет убераться…..ПОМОГИТЕ ПЛЗ КАК СОЗДАТЬ PHP или дайте ссылку чтобы скачать этот файл со скриптом!!!!!!ПЛЗ!!!!
Павел, на счет текста не уверен. Как я уже говорил: я не программист и только использую готовые решения.
Антон, совершенно не понял ваших телодвижений. Код дан в статье. Используйте.
Ур-рр-ааа!!!!! У меня заработало!!!!!
Игорь, СПАСИБО за ПОМОЩЬ!!!!!
Чичас начну другое ченить осваивать.
Вэлкам, Павел! :)