Блог

Я пытаюсь получить страницу, которая нравится.Он заменяет изображения каждые 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']
*/
  

?>

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

Чтобы получить эффект от этого, просто отправьте большее количество изображений, чем то, что вы на самом деле хотите отобразить. В вашем списке изображений отправьте, например, 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>
  

вы запускаете его каждую секунду, измените 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);
      });