Jquery casse-têtel'image jQuery et PHP RO- casse-tête
J'ai un script php qui renvoie le nom de l'image aléatoire jpg à partir d'un dossier. C'est bien parce que je n'ai pas besoin de renommer les images du tout; Je les dépose juste dans le dossier et le randomizer fonctionne. En ce moment, j'appelle le script comme ceci - http://mydomain.com/images/rotate.php - et sur un simple rechargement de page web, il échange les images. Mais j'aimerais que cela fonctionne avec jQuery en ce sens que je voudrais que l'image permute dans une nouvelle image sur un intervalle d'environ dix secondes, puis les fondre et les fondre.
Modifier 23/01/10:
Cela fonctionne en échangeant dans un spacer.gif. Il pourrait y avoir une solution plus élégante, mais cela fonctionne pour moi. Munch pensé à elle, par le biais d'une idée par 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);
Et voici 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);
}
}
?>
Le hasard Les chiffres ou les horodatages sur l'URL ne font aucune différence .... – markratledge
Je pense que cette méthode a du mérite, si vous essayez de supprimer les animations 'fadeOut' /' fadeIn' et essayez d'échanger la source toutes les 10 secondes avec une URL avec des suffixes en constante évolution, firebug montre-t-il que l'image est en train de recharger? Peut-être qu'au lieu d'aller directement de rotate.php à rotate.php, essayez de le "décharger" d'abord en passant de rotate.php à spacer.gif to rotate.php – MidnightLightning
C'est une bonne idée pour un spacer.gif Quel serait le code pour cela? Un spacer gif noir pourrait être une transistion agréable: fondu de couleur en noir, fondu en couleur et pourrait résoudre le problème d'appeler une nouvelle image de rotate.php chaque fois sans hav ing pour utiliser une sorte d'horodatage. – markratledge