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

    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

    Post Tagged with

Leave a Reply

Your email address will not be published.