Код не работает: обмен фотографиями с использованием Jquery

Question

Я пытаюсь получить страницу как. Она заменяет изображения каждые 10 секунд, используя jquery.

Я поставил свой код ниже. (Исходный код: http://blog.tremaynechrist.co.uk/post/2011/04/17/Photofy-New-Animated-Photo-Swap-Plugin-for-JQuery.aspx)

<script type="text/javascript">
      $(document).ready(function () {
          var getData = setInterval(function()
         {
             //$('#displayData').load('anyphpfile.php?randval='+ Math.random());

          var myOptions = {
            url:'anyphpfile.php?randval='+ Math.random(),

            success: function(data) {

                $('#postDiv').html(data);
            },
            error:  function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest);
                  alert(textStatus);
                  alert(errorThrown); 
            }             
          }
          $("#facesPhotoWrapper").photofy(myOptions);
          }, 1000);
      });
      var imageList = [];
/*imageList = ['http://blog.tremaynechrist.co.uk/Downloads/Faces/1.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/2.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/3.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/4.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/5.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/6.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/7.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/8.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/9.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/10.jpg'
];*/
</script>

$dbhost2 = "localhost";
$dbuser2 = "root";
$dbpassword2 = "";
$db2 = "extjs_image";
$connection2 = mysql_connect($dbhost2,$dbuser2,$dbpassword2) or die (mysql_error());
mysql_select_db($db2,$connection2);  


$qry = "SELECT * FROM tbl_images ORDER BY RAND() LIMIT 5 ";         
$result = mysql_query($qry);

$myarray=array();
$str="[";

while ($row = mysql_fetch_assoc($result)){

     $str .= "'images/".$row['image']."',";
}
$str = substr($str,0,-1);
$str .="]";
/*['images/1_01.jpg','images/1_21.jpg','images/1_11.jpg','images/1_10.jpg','images/1_25.jpg'['images/1_01.jpg','images/1_21.jpg','images/1_11.jpg','images/1_10.jpg','images/1_25.jpg']
*/

?>

Answer 1

Photofy в настоящее время не предназначен для обновления изображений в реальном времени.Это в основном потому, что вы никогда не будете оставаться на странице в течение длительного времени, поэтому изображения могут измениться при загрузке страницы.Однако мне интересно добавить эту опцию в Photofy позже по линии.

Чтобы получить эффект этого, просто отправьте большее количество изображений, чем то, что вы действительно хотите отобразить.Например, в вашем imageList отправьте 27 изображений.Теперь ограничьте отображаемое значение, установив для imagecount значение 9.

Вы по-прежнему можете рандомизировать, какие изображения отправляются в Photofy при каждой загрузке страницы.Просто получите ваш php-код, чтобы вернуть файл javascript, содержащий массив.

var imageList = ['/Downloads/Faces/1.jpg','/Downloads/Faces/2.jpg','/Downloads/Faces/3.jpg']; //etc

Так что теперь вы можете сделать ...

<div id="photofyWrapper"></div>

<script type="text/javascript" src="ImageListGenerator.php"></script>
<script type="text/javascript">
var myOptions = {
images: imageList,
imagecount: 9
};
$("#photofyWrapper").photofy(myOptions);
</script>

Answer 2

он запускается каждую секунду, измените 1000 на 10000

ОБНОВЛЕНИЕ:

просто поместите сгенерированный контент, прежде чем устанавливать параметры

var getData = setInterval(function()
         {
             //$('#displayData').load('anyphpfile.php?randval='+ Math.random());
          // generated content here
         var imageList = [];
         imageList = ['http://blog.tremaynechrist.co.uk/Downloads/Faces/1.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/2.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/3.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/4.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/5.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/6.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/7.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/8.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/9.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/10.jpg'
]; 

          var myOptions = {
            url:'anyphpfile.php?randval='+ Math.random(),
            // here set the imagelist
            images: imageList,
            success: function(data) {

                $('#postDiv').html(data);
            },
            error:  function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest);
                  alert(textStatus);
                  alert(errorThrown); 
            }             
          }
          $("#facesPhotoWrapper").photofy(myOptions);
          }, 1000);
      });