Авто Масштабирование Случайного Изображения - PullRequest
Новая
       5

Авто Масштабирование Случайного Изображения

0 голосов
/ 25 мая 2011

В настоящее время я использую http://photomatt.net/scripts/randomimage для отображения случайного фонового изображения.Я хотел бы, чтобы эти изображения автоматически масштабировались (динамически?) В соответствии с шириной окна или div.Это вообще возможно?Код был бы невероятным, если бы у вас было время и возможности.:)

Заранее спасибо!

Вот текущий случайный код изображения для вашего удобства: 

<?php
// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';

// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';

$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
    foreach($exts as $ext) { // for each extension check the extension
        if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
            $files[] = $file; // it's good
            ++$i;
        }
    }
}
closedir($handle); // We're not using it anymore
mt_srand((double) microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along

header('Location: '.$folder.$files[$rand]); // Voila!

1 Ответ

0 голосов
/ 25 мая 2011

Ну, я бы, вероятно, выбрал подход javascript.

  1. Загрузите изображение за кулисы в скрытый элемент изображения.
  2. Привязка к событию onload элемента изображения, чтобы вы знали, когда оно завершено.
  3. Получите ширину / высоту изображения после его загрузки и используйте его для применения CSS / и т.д. на страницу в зависимости от того, как выглядит браузер, размера изображения и т. д.

Псевдо-код: 

var body = document.getElementsByTagName('body')[0];
var img = document.createElement('img');

img.src = 'random_image.php';
img.style.display = 'none';
img.onload = function(){
  // modify the background styles based on your own conditions
};
body.appendChild(img);

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

...