Question

I try to get the page like.It replaces images every 10 seconds,using jquery.

I put my code below.(Source Code: 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 isn’t currently designed for real-time image updates. This is basically because you never often stay on the page for large amounts of time, so images could change on page load. However I’m interested to add this option into Photofy later down the line.

To get the effect of this, just submit a greater amount of images than what you actually want to display. In your imageList, submit 27 images for example. Now limit what is shown by setting the imagecount to 9.

You can still randomise what images are sent to Photofy on every page load. Just get your php code to return a javascript file containing the array.

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

So you could now do…

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