2010-01-11 12 views
4

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

?> 

Répondre

4

L'inconvénient que je vois à le faire comme c'est qu'il y aura une période de chargement pour la nouvelle image et l'animation peut être un peu bizarre à cause de cela. Il peut être avantageux d'avoir deux parties dans ce fichier où un chemin est renvoyé si une valeur $ _GET est égale à une chose, et l'image est retournée si cette valeur $ _GET n'est pas définie ou si elle est égale à quelque chose d'autre. De cette façon, vous pouvez précharger une série d'images et il y aura une animation plus fluide entre les images.

Cela dit, il me semble que quelque chose comme ça devrait fonctionner.

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

Le temps fait en sorte que le navigateur pense qu'il obtient une nouvelle image.

Espaceur.gif

Pour ce faire avec une entretoise noire, je vous recommande l'emballage de votre image dans un div et donnant la div une couleur d'arrière-plan # 000 pour correspondre à l'entretoise:

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

Il ferait si l'image réellement disparu au noir, plutôt que la décoloration à votre couleur d'arrière-plan en cours, changeant au noir et à la décoloration de retour dans les js seraient très semblables à ce qui précède.

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

Garder le temps là-bas iSN probablement » t nécessaire, mais bon, c'est un autre garde- inst du navigateur en mettant en cache "l'image".

+0

Le hasard Les chiffres ou les horodatages sur l'URL ne font aucune différence .... – markratledge

+0

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

+0

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

1

Quelque chose comme cela pourrait fonctionner, en supposant que votre script PHP retourne simplement l'URL l'image:

$(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: paramètre aléatoire ajouté.

EDIT: Dans votre PHP, est-ce que quelque chose comme ça aide?

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

Apparemment, cela devrait fonctionner correctement, mais ce n'est pas le cas. Rien ne montre. Pas même avec une URL d'une image statique au lieu de l'URL du script PHP. Merci de votre aide; Je ne peux pas penser à quoi d'autre à essayer ... – markratledge

+0

Vous ne recevez même pas une erreur? Utilisez-vous Firebug pour le débogage? La requête AJAX est-elle réellement exécutée? Est-ce que cela renvoie le type de valeur attendu? –

+0

Yup, aurait dû offrir plus de détails; trop tard. Ce matin ça marche un peu; caractères indésirables dans mon en-tête. Il fait apparaître et disparaître une image, et Firebug montre le déclenchement de la requête Get. Doit avoir quelque chose avec l'URL retournée de l'image? Maintenant, je me rends compte que l'URL de l'image est toujours la même - http://mydomain.com/images/rotate.php - mais l'image est différente. Quand je vais à ttp: //mydomain.com/images/rotate.php directement dans mon navigateur, j'obtiens une image différente chaque (non-jQuery) recharger. Donc, c'est quelque chose qui doit faire une différence que je n'ai pas réalisé au début ... Merci pour l'aide. – markratledge

2

Depuis votre script php retourne la source de la nouvelle image, vous pourriez être mieux éviter d'utiliser load() et utiliser un simple appel ajax qui échange la source de l'image.

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

On dirait que cela devrait fonctionner, mais ce n'est pas le cas. Rien ne montre. Pas même avec une URL d'une image statique au lieu de l'URL du script PHP. Merci de votre aide; Je ne peux pas penser à quoi d'autre à essayer ... – markratledge

+0

assurez-vous de le tester en utilisant www.mydomain.com 'il y a quelque chose dans le script qui se plaint ... ou essayez d'éliminer le domaine pare et utilisez 'images/rotate.php' à la place utilisez' \ 'pour remplacer le' http: // mydomain.com/'qui est si vous êtes sur un répertoire plus profond ... et vous pourriez avoir besoin de – Val

+0

Cela semble être une solution facile. Qu'est-ce qui est exactement renvoyé par l'appel ajax? Est-ce juste la source d'une image ou une balise ''? Une fois que le swap a été fait, qu'est-ce que firebug dit est le src de l'image affectée? – czarchaic

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

Vérifiez chaque fonction sur JQ Each

J'ai mis à jour le script je pense que cela devrait fonctionner parce que vous attendez une image à charger, mais il ne dispose pas d'une source .. vérifier ceci><img onerror="alert('there was an error') />" si vous obtenez l'erreur, cela signifie que la source n'existe pas. BTW vous ne devriez pas utiliser le #image si vous prévoyez d'utiliser plusieurs images comme il peut y avoir un identifiant unique sur votre html sinon vous obtiendrez des conflits

espérons que cette aide

+0

On dirait que cela devrait fonctionner, mais ce n'est pas le cas. Rien ne montre. Pas même avec une URL d'une image statique au lieu de l'URL du script PHP. Merci de votre aide; Je ne peux pas penser à quoi d'autre à essayer ... – markratledge

+0

Toujours ne peut pas obtenir ce travail, et il ne jette pas l'erreur, non plus. Suis en utilisant un seul #image. Comment se passe-t-il cette fois pour l'intervalle Fadein/Out? – markratledge

+0

'$ (this) .fadeOut (1000, function() {' paramètre de vitesse est avant le rappel ... http: //docs.jquery.com/Effects/fadeOut, par conséquent, vous obtiendrez une erreur – Val

0

Votre installation ne dispose pas de l'étape indiquant à jQuery de ne pas mettre en cache la requête AJAX. Il y a un 'cache' parameter qui peut être ajouté à un appel AJAX pour le forcer à prendre une nouvelle copie:

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

Firebug montre ce tir Obtenir des demandes, mais l'image n'est pas affichée, seulement le code brut de l'image. Il fait pivoter l'image, mais l'image ne s'affiche pas, seule la source. – markratledge

+0

Oh oui; cela ne fonctionnera pas, car AJAX obtient les données de l'image, qui sont le résultat de l'appel AJAX, pas l'URL de l'image, ce que je poussais dans l'attribut 'src' (cheville ronde, trou carré ; ne fonctionnerait jamais, indépendamment d'un changement aléatoire). Étant donné le temps qu'il faut pour y réfléchir, je pense que l'idée de Munch de ne pas utiliser AJAX, mais en utilisant un suffixe aléatoire pourrait être la voie à suivre, si raffinée. – MidnightLightning

1

Que diriez-vous de définir la fonction swapImage() en dehors du bloc $(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" /> 
+0

C'est presque comme ça ... Firebug montre que le script se déclenche bien et j'obtiens la première image bien, alors les images suivantes ne sont pas là, mais je reçois l'image manquante "?" (qui s'estompe en dedans et en dehors) et qui est plus qu'avant. Raison de l'image manquante est l'URL de l'image dans Firebug a l'heure ajoutée, c'est-à-dire rotate.php1264184509211 Mais supprimer l'horodatage ne fonctionne pas non plus. Firebug montre le rechargement en cours, mais avec juste rotate.php comme URL, et rien ne se passe. – markratledge

+0

si c'est rotation.php1234567890 qui devrait être rotate.php? 1234567890 – robertbasic

+0

Le "?" dans l'URL ne fait pas de différence .... – markratledge