Javascript and jQuery script for creating a animation out of Media Encoder image sequence exports

image_cycler.js

$(function() {

	// Main function for creatng the animation loop
	function createImgAnimation(imgInfo){
		// Pad zero's for Adobe Media Encoder output filenames
		Number.prototype.pad = function(size) {
		  var s = String(this);
		  while (s.length < (size || 2)) {s = "0" + s;}
		  return s;
		}
		let numb = imgInfo.skipFrames;
		let fileBase = imgInfo.urlBase+"/"+imgInfo.fileNameBase;
		let lengthPad = (imgInfo.imageAmt).toString().length;

	    function fadeInLastImg(){
	    	let conURL_prev = fileBase+(numb-imgInfo.skipFrames).pad(lengthPad)+"."+imgInfo.fileType; // Fix load flicker
			let conURL = fileBase+(numb).pad(lengthPad)+"."+imgInfo.fileType;
			$("."+imgInfo.targetClass+"").css("background-image","url("+conURL_prev+"), url("+conURL+")");
	   		numb+=imgInfo.skipFrames;
	   		if(numb>imgInfo.imageAmt){
	   			numb = imgInfo.skipFrames;
	   		}
	    };
	    _intervalId = setInterval( function() {
	        fadeInLastImg();
	    }, imgInfo.speed);
	};

	// Create the animation...
	// /targetClass is the item you want to cycle images
	// urlBase is a folder name / URL
	// fileNameBase is the name of each image before the 0's start
	// fileType is the image extension
	// speed in ms for the loop
	// skipFrames will change the framerate and save bandwidth
	createImgAnimation({
		targetClass: "imageCycle",
		urlBase: "lolz",
		fileNameBase: "lolz",
		fileType: "jpg",
		imageAmt: 701,
		speed: 300,
		skipFrames: 6
	});

	// Example targeting <div class="imageCycle" style="backround-image: url('lolz/lolz000.jpg');"> </div>

});