jQuery e php imagem rotater quebra-cabeça
Pergunta
Jquery quebra-cabeça
Eu tenho um script php que retorna o nome da imagem jpg aleatória da partir de uma pasta. É bom porque eu não tenho para renomear as imagens em todos; Eu só deixá-los na pasta e as obras selecção aleatória. Agora, eu chamar o script como este - http://mydomain.com/images/rotate.php -. e em uma simples recarga página web, ele troca as imagens
Mas eu gostaria de tê-lo trabalhar com jQuery em que eu gostaria de ter a troca de imagem em uma nova imagem em um intervalo de dez segundos ou mais, e também de fade-los in e fade-los.
Editar 1/23/10:
Isso funciona, trocando em uma spacer.gif. Pode haver uma solução mais elegante, mas isso funciona para mim. Munch descobri-lo, por meio de uma idéia por 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);
E este é 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);
}
}
?>
Solução
A desvantagem que vejo a fazê-lo como este é que haverá um período de carga para a nova imagem e a animação pode ser um pouco peculiar por causa disso. Pode ser benéfico ter duas partes para esse arquivo onde um caminho é retornado se um valor R $ _GET é igual a uma coisa, e a imagem é devolvido se que o valor $ _GET não está definido ou é igual a qualquer outra coisa. Dessa forma, você pode pré-carregar uma série de imagens e haveria uma animação mais suave entre as imagens.
Dito isto, parece-me que algo como isso deve 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);
});
O tempo torna tão navegador acho que está recebendo uma nova imagem.
Spacer.gif
Para fazer isso com um espaçador preto, eu recomendo envolvendo sua imagem em uma div e dando o div uma cor # 000 fundo para combinar o espaçador:
#image-wrap{background-color:#000;}
Não faria isso para que a imagem realmente desbotada em preto, em vez de desaparecendo à sua atual cor de fundo, mudar para preto, e desaparecendo de volta no js seria muito semelhante ao 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);
Mantendo o tempo lá provavelmente não é necessário, mas hey, é um outro guarda segura contra o navegador cache a "imagem".
Outras dicas
Uma vez que o script php está retornando a fonte da nova imagem, você pode ser melhor evitar o uso load()
e usar uma simples chamada ajax que swaps fonte da imagem.
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);
Algo como este trabalho poder, assumindo que o seu script PHP simplesmente retorna a URL da imagem:
$(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:. Adicionado parâmetro aleatório
EDIT:? No seu PHP, faz algo como isso ajuda
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Expires data in the past
Como sobre a definição da função swapImage()
fora do bloco $(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" />
$("#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....
});
})
Verifique cada função em JQ cada
Eu atualizei o script eu acho que deve funcionar porque você está esperando por uma imagem a carga, mas ele não tem uma fonte ...
verificar isso> <img onerror="alert('there was an error') />"
Se você obter o erro que significa que a fonte não existe. btw você não deve usar o #image se você estiver planejando usar várias imagens como pode haver uma identificação única no seu html caso contrário você terá conflitos
espero que isso ajude
A configuração está faltando a etapa de dizer jQuery não para armazenar em cache o pedido AJAX. Há um 'cache' parâmetro que pode ser adicionado a uma chamada de AJAX à força -lo para agarrar uma nova cópia:
$.ajax({
url: 'http://mydomain.com/images/rotate.php',
cache: false,
success: function(src){
img.attr({src: src});
}
});