jQuery und PHP Bild Rotater Puzzle

Question

JQuery Puzzle

Ich habe ein PHP-Skript bekam, die den Namen von Zufalls JPG-Bild aus einem Ordner zurückgibt. Es ist schön, weil ich die Bilder überhaupt nicht umbenennen müssen; Ich lasse sie einfach in den Ordner und den randomizer funktioniert. Gerade jetzt, ich rufe das Skript wie folgt - http://mydomain.com/images/rotate.php -. und auf einer einfachen Web-Seite neu geladen, tauscht sie die Bilder

Aber ich mag, um es mit jQuery arbeitet, dass ich gerne würde das Bild Swap in einem neuen Bild haben, auf einem Intervall von 10 Sekunden oder so, und auch verblasst sie in und sie ausgeblendet.

Bearbeiten 1/23/10:

Dies funktioniert, indem in einem spacer.gif Swapping. Es könnte eine elegantere Lösung, aber das funktioniert für mich. Munch es herausgefunden, über eine Idee von 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); 

Und das ist 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

Der Nachteil ich sehe es so zu tun, ist, dass es eine Belastungszeit für das neue Bild sein wird, und die Animation kann ein wenig schrullig sein, weil es. Es kann von Vorteil sein, zwei Teile zu dieser Datei zu haben, wo ein Pfad, wenn ein $ _GET Wert auf eine Sache gleich zurückgeführt wird, und das Bild wird zurückgegeben, wenn die $ _GET Wert nicht gesetzt ist oder es gleich etwas anderes. So können Sie eine Reihe von Bildern Vorspannung könnten und es würde eine flüssigere Animation zwischen den Bildern sein.

Having said that, scheint es mir, dass so etwas wie dies funktionieren soll.

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

Die Zeit macht es so der Browser denkt, es ist ein neues Bild zu bekommen.

Spacer.gif

Um dies zu tun, mit einem schwarzen Spacer, ich würde empfehlen, Ihr Bild in einem div Verpackung und gab das div eine # 000 Hintergrundfarbe den Abstandhalter entsprechen:

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

Es würde es so machen, das Bild schwarz tatsächlich verblasste, anstatt zu Ihrer aktuellen Hintergrundfarbe verblasste, zu schwarz ändern und Verblassen zurück in der js wäre sehr ähnlich den oben:.

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

wahrscheinlich dort die Zeit zu halten, ist nicht notwendig, aber hey, es ist ein weiterer sicherer Schutz gegen den Browser Caching der „Bild“.

Answer 2

Da Ihr PHP-Skript ist die Quelle des neuen Bildes zurückkehrt, könnte man am besten mit load() zu vermeiden und verwendet einen einfachen Ajax-Aufruf, dass bei Swaps das Image der Quelle.

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

So etwas wie diese funktionieren könnte, vorausgesetzt, dass Ihr PHP-Skript einfach die URL des Bildes zurückgibt:

$(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:. Hinzugefügt Zufallsparameter

EDIT: In Ihrer PHP, tut so etwas wie diese Hilfe

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

Answer 4

Wie wäre es die swapImage() Funktion außerhalb des $(document).ready() Block definieren?

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

Überprüfen Sie jede Funktion auf JQ jedes

Ich habe das Skript aktualisiert ich denke, es sollte funktionieren, weil Sie für ein Bild zu laden warten, aber es hat keine Quelle ... Check this out> <img onerror="alert('there was an error') />" wenn Sie die Fehlermeldung erhalten, bedeutet es, dass die Quelle nicht existiert. btw sollten Sie nicht die #image verwenden, wenn Sie mehrere Bilder verwenden möchten, da es eine eindeutige ID auf Ihrem html sein können sonst werden Sie Konflikte bekommen

hoffe, das hilft

Answer 6

Ihre Setup fehlt den Schritt zu sagen jQuery nicht die AJAX-Request zwischenzuspeichern. Es gibt ein ‚Cache‘ Parameter dass zu einem AJAX-Aufruf zu Gewalt hinzugefügt werden kann es eine neue Kopie zu greifen:

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