jQuery y PHP imagen giratoria del rompecabezas

Question

Jquery rompecabezas

Tengo un script PHP que devuelve el nombre de la imagen jpg al azar de entre una carpeta. Es bueno porque yo no tengo que cambiar el nombre de las imágenes en absoluto; Yo sólo soltarlos en la carpeta y funciona de la aleatoriedad. En este momento, yo llamo el guión como este - http://mydomain.com/images/rotate.php -. y en una simple recarga de la página web, se intercambia las imágenes

Pero me gustaría tener que trabajar con jQuery en el que me gustaría tener la imagen de intercambio en una nueva imagen en un intervalo de diez segundos más o menos, y también se desvanecen en y se desvanecen a cabo.

Editar 1/23/10:

Esto funciona mediante el canje en una spacer.gif. Puede haber una solución más elegante, pero esto funciona para mí. Munch lo descubrió, a modo de una idea de 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); 

Y esto es 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);
    }
}

?>

Answer 1

La desventaja que veo a hacerlo así es que habrá un periodo de carga de la nueva imagen y la animación puede ser un poco peculiar debido a ella. Puede ser beneficioso tener dos partes a ese archivo en el que se volvió un camino si un valor de $ _GET es igual a una cosa, y se devuelve la imagen si ese valor $ _GET no está ajustado o es igual a otra cosa. De esa manera se podría carga previamente una serie de imágenes y no habría una animación más suave entre las imágenes.

Una vez dicho esto, me parece que algo como esto debería funcionar.

$(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); 
});

El tiempo hace que el navegador piensa que se está haciendo una nueva imagen.

Spacer.gif

Para hacer esto con un espaciador negro, lo recomiendo envolver su imagen en un div y dar el div un color de fondo # 000 para que coincida con el espaciador:

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

Sería lo hacen para que la imagen en realidad se desvaneció a negro, en lugar de la decoloración de su color de fondo actual, cambiando a negro, y la decoloración de vuelta en el js serían muy similar a la anterior:.

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); 

Mantener el momento en que probablemente no es necesario, pero bueno, es otra segura con la guardia en contra de la memoria caché del navegador la "imagen".

Answer 2

Desde su script php está volviendo la fuente de la nueva imagen, que podría ser la mejor manera de evitar el uso de load() y el uso de una simple llamada de Ajax que intercambie fuente de la imagen.

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);

Answer 3

Algo como esto podría funcionar, si se asume que su script PHP simplemente devuelve la URL de la imagen:

$(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);
    }
});

EDIT:. Añadido parámetro al azar

EDIT:? En su PHP, hace algo como esto ayuda

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Expires data in the past

Answer 4

¿Qué hay de la definición de la función swapImage() exterior del bloque $(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" />

Answer 5

$("#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....
}); 
})

Comprobar cada función en JQ cada

He actualizado el guión, creo que debería funcionar porque está esperando para una imagen para cargar, pero no tiene una fuente ... mira esto> <img onerror="alert('there was an error') />" Si se obtiene el error que significa que la fuente no existe. por cierto no se debe utilizar la #image si usted está planeando utilizar varias imágenes ya que puede haber una identificación única en su html de lo contrario obtendrá conflictos

esperanza esto ayuda

Answer 6

Su configuración es que falta el paso de contar jQuery no hagan caché de la petición AJAX. Hay una 'caché' parámetro que se puede añadir a una llamada AJAX para forzar que para tomar una nueva copia:

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