var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-13211647-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })();

AnimateImage 1.0 Released

AnimateImage version 1.0 is released.

Auto apply to 'img' elements

* AnimateImage is applied to ‘img’ elements automatically. You do not need to write ‘script’ elements and JavaScript codes.


AnimateImage is a JavaScript code which displays multiple images continuously like animated GIF.

* For more information, see AnimateImage Official Site.

Changes from Previous Version (0.9)

Auto Apply to ‘img’ Elements

AnimateImage has been applied automatically to ‘img’ elements that have ‘data-files’ attribute. The syntax of ‘img’ elements is below.

<img src="" data-files=""
  title="" alt="" id="" class="" style=""
  data-delay="" data-repeat="" data-rewind=""
  data-pauseAtFirst="" data-pauseAtLast="" data-showBlank="" data-cycleDelay="" />

You need to specify undefined attributes with custom data-* attributes in ‘img’ element. ‘src’ and ‘data-files’ attributes are required in AnimateImage, and ‘data-files’ attribute is specified with only file name.

<img src="images/0.png" data-files="[0-9].png" />

There are the following differences between Auto Apply (‘img’ elements) and existing method (JavaScript).

Auto Apply (‘img’ elements)
  • Improved readability by not writing ‘script’ elements and JavaScript codes
  • No need for JavaScript codes. It is also available in where JavaScript is limited.
  • ‘img’ elements are always displayed even if JavaScript is disabled or JavaScript errors occur (equivalent of ‘noscript’ elements)
  • Animation behavior (start/stop/replay) is controllable
  • Handling ‘img’ elements in JavaScript (to get, create, modify, insert, etc.)
  • Common settings can be changed

* FYI: The two sample codes below are almost equivalent.

<p><img src="images/0.png" data-files="[0-9].png" /></p>
<p><script type="text/javascript">animateImage('images/[0-9].png');</script></p>
<noscript><p><img src="images/0.png" /></p></noscript>

Handling ‘img’ Elements in JavaScript

Added the following properties.

‘img’ element specified with Image object. Use it to specify created ‘img’ element. (‘img’ element will be created if omitted)
options.output (ImageAnimator.output)
Whether to output ‘img’ element
‘img’ element that is created by AnimateImage, or specified with options.imgElem
Sample code: How to Specify Created ‘img’ Elements
var imgElem = new Image();
imgElem.src = 'images/0.png';
animateImage('images/[0-9].png', { imgElem: imgElem });
Sample code: How to Get/Modify/Insert ‘img’ Elements
var animator = animateImage('images/[0-9].png', { output: false });
animator.imgElem.setAttribute('longdesc', 'long description');

Removal of Automatically-Generated ID

AnimateImage has identified animation images with object instance instead of ‘id’ attribute. So now automatically-generated IDs are not added when ‘’ is omitted.

Removal of Image Size Restriction when Using Blank Image

Removed the restriction that animation images had been fixed to the size of the first image when using blank image (options.showBlank = true). Now blank image is displayed in the size of the first image but other images are displayed in their own size.


  • v1.0, 2012-08-24
  • Free license (for personal & non-commercial, donate to support)
  • Optimized and compressed code
  • v1.0, 2012-08-24
  • Commercial license ($5.00)
  • Uncompressed code with comments
  • Paid support (technical questions, customization, etc.)

Past Releases

Post Tagged with

Leave a Reply

Your email address will not be published.