pw10n/gist:abc4a6425379a625cd99

## gistfile1.phtml
<!--
First iteration of animating jpg images found in image folder.
This is hosted on a shared host so limited to certain technologies for simplicity.

Some thoughts on where this could go next:
 - break out imgFrames to separate php as an api allowing selectable ranges, etc
 - use mjpeg instead of animating jpg frames on client
-->
<!doctype html>
<html>
  <head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
      var imgFrames=<?php echo json_encode(scandir("img"));?>;
      var curFrame=2;
      var images=new Array();
      var totalFrames=imgFrames.length-2;
      var id=0;

      var remaining=totalFrames;

      for(i=2; i<imgFrames.length; ++i){
        images[i]=new Image();
        images[i].onload = function(){
          --remaining;
          $("#animateCmd").text("Loading "+Math.round(((totalFrames-remaining)/totalFrames)*100) + "%");
          if (remaining <= 0){
            $("#animateCmd").empty();
            id=setInterval(animateFrame, 100);
          }
        }
        images[i].src="img/"+imgFrames[i];
      }

      function animateFrame() {
        $("#animate").attr("src","img/"+imgFrames[curFrame++]);
        if(curFrame >= imgFrames.length){
          curFrame=2;
          clearInterval(id);
          $("#animateCmd").html('<a href="#" id="replay">Restart</a>');
          $("#replay").click(function() {
            id=setInterval(animateFrame, 100);
            $("#animateCmd").empty();
          });
        }
      }

    </script>
  </head>
  <body>
    <img id="animate"/>
    <div id="animateCmd">Loading...</div>

    <!-- Add tracker -->

  </body>
</html>
	<!--
	First iteration of animating jpg images found in image folder.
	This is hosted on a shared host so limited to certain technologies for simplicity.

	Some thoughts on where this could go next:
	- break out imgFrames to separate php as an api allowing selectable ranges, etc
	- use mjpeg instead of animating jpg frames on client
	-->
	<!doctype html>
	<html>
	<head>
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript">
	var imgFrames=<?php echo json_encode(scandir("img"));?>;
	var curFrame=2;
	var images=new Array();
	var totalFrames=imgFrames.length-2;
	var id=0;

	var remaining=totalFrames;

	for(i=2; i<imgFrames.length; ++i){
	images[i]=new Image();
	images[i].onload = function(){
	--remaining;
	$("#animateCmd").text("Loading "+Math.round(((totalFrames-remaining)/totalFrames)*100) + "%");
	if (remaining <= 0){
	$("#animateCmd").empty();
	id=setInterval(animateFrame, 100);
	}
	}
	images[i].src="img/"+imgFrames[i];
	}

	function animateFrame() {
	$("#animate").attr("src","img/"+imgFrames[curFrame++]);
	if(curFrame >= imgFrames.length){
	curFrame=2;
	clearInterval(id);
	$("#animateCmd").html('<a href="#" id="replay">Restart</a>');
	$("#replay").click(function() {
	id=setInterval(animateFrame, 100);
	$("#animateCmd").empty();
	});
	}
	}

	</script>
	</head>
	<body>
	<img id="animate"/>
	<div id="animateCmd">Loading...</div>

	<!-- Add tracker -->

	</body>
	</html>