shakakira / JSGif-2

Javascript image looper to replace GIFs with image sequences. This is to remove GIF color compression.

Home Page:http://www.harlanhaskins.com/cinemagraph

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JSGif

A template project, using HTML5 Boilerplate, has been included with the default values.

This is JSGif. With it, you can use Javascript to loop through a sequence of images (up to 1000 total) just like a gif, without the color compression.

All one needs to do is somewhere in their HTML have an image attribute with an ID, optionally have a checkbox attribute with an ID that determines whether or not to reverse the loop at the end, include these lines:

<script src="js/imageLooper.js"></script>
<script type = "text/javascript">
	window.numberOfImages = 100;
	window.folder = 'loopImages/'
	window.imagePrefix = 'image_'
	window.fileExtension = 'png';
	window.imageId = 'currentFrame';
	window.reverseBoxId = 'reverseCheckBox';
	var pictureArray = imageStringArray();
	//if you don't want to use buttons to start the loop, make sure you call 		the startLoop() function somewhere.
	//startLoop();
</script>

And change the variables based on your data. These values are all the defaults.

For example, I have a sequence with 217 images, each named dog_###.jpg, in the folder pancakes/, and I want the images looped in an image with the id snails.

I would write this:

<script src="js/imageLooper.js"></script>
<script type = "text/javascript">
	window.numberOfImages = 217;
	window.folder = 'pancakes/'
	window.imagePrefix = 'dog_'
	window.fileExtension = 'jpg';
	window.imageId = 'snails';
	window.reverseBoxId = 'reverseCheckBox';
	var pictureArray = imageStringArray();
	//if you don't want to use buttons to start the loop, make sure you call 		the startLoop() function somewhere.
	//startLoop();
</script>

If you want to start the loop, call startLoop(), if you want to stop, call stopLoop().

About

Javascript image looper to replace GIFs with image sequences. This is to remove GIF color compression.

http://www.harlanhaskins.com/cinemagraph