AnimateImage 1.0 Released

• By attosoft
• Posted in AnimateImage
• On August 24, 2012
• No Comments.

AnimateImage version 1.0 is released.

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

Introduction

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)

JavaScript

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

options.imgElem

‘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

ImageAnimator.imgElem

‘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');
document.getElementById('id').appendChild(animator.imgElem);

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 ‘options.id’ 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.

Download

animateImage.min.js

• v1.0, 2012-08-24
• Free license (for personal & non-commercial, donate to support)
• Optimized and compressed code

animateImage.js

• v1.0, 2012-08-24
• Commercial license ($5.00)
• Uncompressed code with comments
• Paid support (technical questions, customization, etc.)

Past Releases

• version 0.9
• version 0.8.3
• version 0.8 (0.8.0.3)
• version 0.7
• version 0.6.5 (0.6.5.1)
• version 0.6.4 (0.6.4.1)
• version 0.6.3
• version 0.6.2
• version 0.6.1
• version 0.6
• version 0.5 (initial release)