JQuery и PHP изображение вращателя головоломки - PullRequest
Новая
       28

JQuery и PHP изображение вращателя головоломки

4 голосов
/ 11 января 2010

JQuery Puzzle

У меня есть скрипт php, который возвращает имя случайного изображения jpg из папки. Это хорошо, потому что мне совсем не нужно переименовывать изображения; Я просто бросаю их в папку, и рандомизатор работает. Прямо сейчас я называю скрипт следующим образом - http://mydomain.com/images/rotate.php - и при простой перезагрузке веб-страницы он меняет изображения.

Но я бы хотел, чтобы это работало с jQuery, так как я хотел бы, чтобы изображение менялось в новом изображении с интервалом в десять секунд или около того, а также постепенно увеличивало и уменьшало их. *

Изменить 1/23/10:

Это работает путем замены в spacer.gif. Там может быть более элегантное решение, но это работает для меня. Мунк понял это с помощью идеи MidnightLightning: 

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000);

И это rotate.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);
    }
}

?>

Ответы [ 6 ]

4 голосов
/ 18 января 2010

Недостатком такого подхода является то, что для нового изображения будет период загрузки, и из-за этого анимация может быть немного странной. Может быть полезным иметь две части в этом файле, где путь возвращается, если значение $ _GET равно одной вещи, и изображение возвращается, если это значение $ _GET не установлено или равно чему-то другому. Таким образом, вы можете предварительно загрузить серию изображений, и между изображениями будет плавная анимация.

Сказав это, мне кажется, что-то подобное должно работать. 

$(document).ready(function(){
   function swapImage(){
      var time = new Date();
      $('#image').fadeOut(1000)
       .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
       .fadeIn(1000);
   }

   var imageInterval = setInterval('swapImage()',10*1000); 
});

Время заставляет браузер думать, что оно получает новое изображение.

spacer.gif

Чтобы сделать это с черной проставкой, я бы порекомендовал обернуть ваше изображение в div и присвоить div цвет фона # 000 в соответствии с проставкой: 

#image-wrap{background-color:#000;}

Это сделало бы так, что изображение фактически стало блеклым, а не блекло к вашему текущему цвету фона, изменилось на черный и снова исчезло. Js было бы очень похоже на выше: 

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000);

Хранение времени там, вероятно, не является необходимым, но, эй, это еще одна надежная защита от браузера, кэширующего "изображение".

2 голосов
/ 11 января 2010

Поскольку ваш php-скрипт возвращает источник нового изображения, вам лучше не использовать load() и использовать простой вызов ajax, который меняет источник изображения. 

var img=$('#image');//cache the element

function refreshNotification(){
  $.ajax({
    url: 'http://mydomain.com/images/rotate.php',
    success: function(src){
      img.attr({src: src});
    }
  });
}

setInterval(refreshNotification, 10000);
1 голос
/ 22 января 2010

Как насчет определения функции swapImage() вне блока $(document).ready()? 

<script type="text/javascript" scr="path/to/jquery.js"></script>
<script type="text/javascript">
function swapImage(){
    var time = new Date();
    $('#rotate').fadeOut(1000)
     .attr('src', 'rotate.php?'+time.getTime())
     .fadeIn(1000);
}
$(document).ready(function(){
  var imageInterval = setInterval('swapImage()',5000);
});
</script>

<img src="rotate.php" id="rotate" />
1 голос
/ 11 января 2010

Примерно так может работать, если предположить, что ваш PHP-скрипт просто возвращает URL-адрес изображения: 

$(document).ready(function(){
    window.setInterval(switchImage, 10000);

    function switchImage() {
        var rn = Math.floor(Math.random() * 100000)
        $.get('http://mydomain.com/images/rotate.php', 
              { n: rn }, 
              receiveNewImage);
    }

    function receiveNewImage(src) {
        $('#image').fadeTo(1000, 0.0, function() { switchAndFadeIn(src); } );
    }
    function switchAndFadeIn(newSrc) {
        $('#image').attr('src', newSrc).fadeTo(1000, 1.0);
    }
});

РЕДАКТИРОВАТЬ: Добавлен случайный параметр.

РЕДАКТИРОВАТЬ: в вашем PHP, что-то вроде этого помогает? 

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Expires data in the past
0 голосов
/ 19 января 2010

В вашей настройке отсутствует шаг, при котором jQuery запрещает кэшировать запрос AJAX.Есть параметр 'cache' , который можно добавить к вызову AJAX, чтобы заставить его получить новую копию: 

$.ajax({
  url: 'http://mydomain.com/images/rotate.php',
  cache: false,
  success: function(src){
    img.attr({src: src});
  }
});
0 голосов
/ 11 января 2010 
$("#image").each(function({
$(this).fadeOut(function() { 

$(this).attr("src", "http://mydomain.com/images/image.jpg"); 
$(this).load(function() { $(this).fadeIn(); }); // this should be on the bottom....
}); 
})

Проверьте каждую функцию на JQ Каждую

Я обновил скрипт, думаю, он должен работать, потому что вы ждете загрузки изображения, но у него нет источника ... проверить это> <img onerror="alert('there was an error') />" если вы получаете сообщение об ошибке, это означает, что источник не существует. Кстати, вы не должны использовать #image, если вы планируете использовать несколько изображений, так как в вашем html может быть один уникальный идентификатор, иначе вы получите конфликты

надеюсь, это поможет

...