Это весьма интересный эффект, который сделает ваш сайт более динамичным, ибо при каждой загрузке в шапке будет автоматом появляться новая картинка. Делается это при помощи небольшого 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) как раз выделяет рамкой кусочек. Посмотрите, пожалуйста.
http://s58.radikal.ru/i160/0808/63/2a18fc52bee0.gif
http://s59.radikal.ru/i164/0808/82/cb6961a7e95f.gif
Ответить
А вот эта ссылка на скриншот странички в IE7
http://s40.radikal.ru/i090/0808/25/282eeca90c17.gif
Удивительно, но только ругаемый браузер показывает точно. Что это, особенность 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>";
?>
Может кому пригодится)
Ответить
Ваш сайт съел куски кода!
http://www.softtime.ru/forum/read.php?id_forum=1&id_theme=68442
Ответить
Код поправил :) Да, возможен и такой вариант, но только в том случае, если в шапке ничего кроме фона не будет. Если же захочется добавить туда текст заголовка или описания, то код заметно усложнится.
Ответить
У меня вопросик! А можно как то сделать так чтобы картинка все таки менялась скажем каждые 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 или дайте ссылку чтобы скачать этот файл со скриптом!!!!!!ПЛЗ!!!!
Ответить
Павел, на счет текста не уверен. Как я уже говорил: я не программист и только использую готовые решения.
Антон, совершенно не понял ваших телодвижений. Код дан в статье. Используйте.
Ответить
Ур-рр-ааа!!!!! У меня заработало!!!!!
Игорь, СПАСИБО за ПОМОЩЬ!!!!!
Чичас начну другое ченить осваивать.
Ответить
Вэлкам, Павел! :)
Ответить
Спасибо! Все работает!
Ответить
Елена, не за что!
Ответить
Спасибо за статью, но в ходе установки возникли проблемы делаю все по инструкции. В место где у меня выводился просто статичный задник картинки вставляю следующий код:
до = body{background:url(’images/header_bg.jpg’) repeat-x center top;color:#333;font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;font-size:80%;text-align:center}
после body{background:url(’images/bg/random.php.jpg’) repeat-x center top;color:#333;font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;font-size:80%;text-align:center}
Естественно что файлы (картинки и php) залиты в директорию bg. Но в итоге не чего не происходит сайт загружается и все не какой картинки нет на фоне, если же написать путь просто к файлу картинки все загружается. Поэтому вопрос чем это может быть вызвано? Может проблема в скрипте и он не выводит код? Или я что-то упустил? (В самом коде не чего не менял, и сохранил в UTF-8, картинки носят имена: 1 2 3 и тд.) Заранее спасибо!
Ответить
Игорь Квентор 29.10.2010
@Safon, ошибка в адресе фона. Не images/bg/random.php.jpg, а images/bg/random.php Ссылка идет не на картинку, а на пхп файл. Не нужно добавлять в конце расширение .jpg
Ответить
Safon, Ваш код:
[code]body{
background:url(’images/bg/random.php.jpg’) repeat-x center top; color:#333;
font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;
font-size:80%;
text-align:center
}[/code]
правильно будет так:
[code]body{
background:url(images/bg/random.php) repeat-x center top;
color:#333;
font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;
font-size:80%;
text-align:center
}[/code]
….я так думаю…
Ответить
Игорь Квентор 29.10.2010
@Павел, совершенно верно!
Ответить
Здравствуйте! А как можно сделать меняющиеся картинки не в шапке сайта, а в боковой колонке?
Ответить
Игорь Квентор 16.11.2010
@Анна, здравствуйте! Точно так же. Боковая колонка, как функциональный блок, ничем не отличается от шапки
Ответить
Анна 19.11.2010
@Игорь Квентор, cпасибо!
Скажите, а что можно сделать в случае, если сайт в Мозиле отображается хорошо, а в Интернет Эксплорере подменюшки не работают в горизонтальном меню? то-есть первое подменю открывается, а все последующие при подведении к ним мышки, исчезают…
Это горизонтальное меню с подменюшками я сама сгенерировала на одном сайте и вставила к себе на сайт, ниже шапки сайта.
В мозиле все отлично работает-
Сайт пока не на хостинге, а на компьютере (localhost), поэтому показать не могу.
Ответить
Игорь Квентор 19.11.2010
@Анна, в ИЕ много чего не работает :)
Ответить
Сделала все по вашим инструкциям, но у меня ситуация, когда нужно, чтобы менялись картинки в блоке, причем ни одна, а сразу две. Можете подсказать, что нужно сделать, чтобы картинки выбирались разные? Или этот код данную возможность не реализует?
Ответить
Павел 04.12.2010
@Лидия, создаете две папки с теми картинками, которые должны отображаться и в каждую ложите скрипт, но картинки будут отображаться в случайном порядке. Не забутьте прописать путь к папкам, у каждого комплекта он будет(должен быть) свой.
Ответить
Лидия 06.12.2010
@Павел, если кладу одинаковые картинки в обе папки, то они синхронно отображаются, т.е. также, как если задвоить код.. а если разделить по папкам, то все вроде норм… но эффект не тот((
Ответить
Игорь Квентор 06.12.2010
@Лидия, попробуйте во второй папке переименовать картинки. Чтобы у одинаковых картинок были разные имена в обоих папках.
Ответить
Лидия 07.12.2010
@Игорь Квентор, Спасибо. Попробую.
Ответить
спасибо!
Ответить
как сделать чтоб картинка еще ссылкой была, причем той картинки, что грузиться?
Ответить
Игорь Квентор 11.12.2010
@тос, это вы что-то жуткое задумали. В чем смысл?
Ответить
Спасибо - сработало! :)
Ответить
А если за место картинки цитаты? Вот то что нужно.
Возможно?
Ответить
Игорь Квентор 20.05.2011
@СвятОм, думаю, что возможно. Но как это сделать - не представляю :) Я использую готовую фишку. Сам я не программист.
Ответить
У меня вопрос слегка отходивший от сабжа.
Можно ли этот PHP код применить для рандомной смены фонового (именно фона странички)рисунка на шаблоне ВордПресс с периодикой 20 сек.
Пытался сделать гифку с 5-ю рисунками, так она весит под 2 мб. как не оптимизируй.
Или дайте ссылку на подобную тему.
Спасибо за внимание!
Ответить
Игорь Квентор 01.06.2011
@Dimas, нет, не получится. Этот скрипт обновляет картинку только при перезагрузке страницы. Ссылки на что-то похожее у меня увы нет.
Ответить
Скажите, пожалуйста, какие требования для работы php скрипта? как он правильно записывается(<?php
$folder = ‘.’;
…)? И просто на компьютере он не будет работать?(всмысле если на компе сохранён)
Ответить
Игорь Квентор 09.06.2011
@Артём, Если на компе установлен и запущен сервер, то будет работать. Просто так - нет.
Ответить
Всем Привет!Помогите плз!Все сделал как написано,но картинка так и неотображаеться,помогите плз!я уже файл стайл переделал чуть чуть:
#header {
background-image: url(images/header/random.php) no-repeat;
background-repeat: no-repeat;
background-attachment: scrol;
background-position: top center;
width: 1024px;
height: 300px;
}
а все остальное так же как и написанно,незнаю че делать даж.
Ответить
Павел 27.07.2011
@Ринат,
зачем прописывать дважды одно и тоже: “no-repeat”?
Это вообще лишнее в данном случае:
background-repeat: no-repeat;
background-attachment: scrol;
background-position: top center;
Из описания к скрипту:”…картинки все должны быть такого же размера…”, то есть в твоем случае- 1024px на 300px.
Ответить
Всем привет!
В топике уже поднималась тема … повторюсь, может кто-то и решил задачу.
Нужно чтоб при переходе на конкретную страницу, появлялась конкретная фотография в шапке!
Как допилить файл random.php ?
Ответить
Зачем пилить скрипт. Можно прописать для отдельных страниц шапку как:
для первой - #header class=”eins”
для второй - #header class=”zwei”
для третьей - #header class=”drei”
и так далее…
соответственно в стилях прописать:
для первой - .eins {background-image: url(images/kartinka_1.jpg) no-repeat;}
для второй - .zwei {background-image: url(images/kartinka_2.jpg) no-repeat;}
для третьей - .drei {background-image: url(images/kartinka_3.jpg) no-repeat;}
и тому подобное…
Ответить
Ребят,не подскажете где взять php скрипт который меняет картинку на сайте в зависимости от даты,т.е. на определенную дату-определенную картинку
Ответить
Помогите пожалуста уже себе мозг сломал, Как прописать чтоб фотографии плавно менялись сами с каким-то временным интервалов поочереди (не рандомно). При этом не в шапке а просто на главной странице ? Очень прошу помочь !!!
Ответить
Игорь Квентор 22.01.2012
@Даниил, попробуйте этот вариант http://www.websovet.com/foto-galereya-s-plavno-menyayushhimisya-kartinkami
Ответить
Огромное спасибо !!!
Ответить