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\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })();

AnimateImage 1.0.4 公開

AnimateImage version 1.0.4 を公開しました。



※ アニメーションする画像ファイルをアルファベットの連番やカンマ区切り値で指定している。

概要

AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript コード。

※ 詳細は AnimateImage 公式サイトを参照。

前バージョン (1.0) からの変更点

画像ファイルを指定する書式文字列の拡張

数字の連番に加えて、アルファベットの連番およびカンマ区切り値をサポート。

数字の連番
  • [0-9].png
  • [01-99].png
  • [001-999].png
アルファベットの連番
  • [a-z].png
  • [A-Z].png
カンマ区切り値
  • [foo, bar, baz].png
  • [foo.png, bar.jpg, baz.gif]

data-files 属性でディレクトリ名を指定可能に

data-files 属性はファイル名のみを受け付けていたが、ディレクトリ名を指定する場合はそのディレクトリまでのパスを指定するようにした。

<img src="parent/child/image0.png" data-files="image[0-9].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/image.png" />
<img src="parent0/child/image.png" data-files="parent[0-9]/child/image.png" />

空白画像に付加されるクラス名の指定

Animations.blankClassName
空白画像に付加される img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “blank”。
options.blankClassName
空白画像に付加される img 要素の class 名 (省略時は Animations.blankClassName)

※ 自動適用 img 要素の場合は data-blankClassName 属性を指定する。

バグ修正、IE 下位バージョン対応、エラー処理

  • 画像差し替え時 (空白画像除く) に width/height 属性が削除されてしまう問題を修正 (v1.0 のリグレッション)
  • IE8 以下で width/height 属性が勝手に更新されてしまう現象を回避。IE8 以下でないブラウザーの場合は何もしない。
  • 空の alt 属性 (alt=””) が付加される/されない問題を修正。空の title を指定すると空の alt が付加され、空の alt を指定しても空の alt が付加されていなかった。
  • src 属性の画像と data-files 属性で指定した 1 枚目の画像が異なる場合に、2 枚目の画像からアニメーションが開始していた挙動を改善。src 属性を 1 枚目の画像で上書きしてからアニメーションを開始するようにした。
  • アニメーションする画像が 1 枚しかない場合に、2 枚目の画像を表示しようとして発生していた JS エラーを修正。画像が 1 枚しかない場合はアニメーションしないようにした。

ダウンロード

animateImage.min.js
  • v1.0.4, 2012-08-27, 5.5 KB
  • 無料ライセンス (個人かつ非営利、寄付歓迎)
  • 最適化された圧縮コード
animateImage.js
  • v1.0.4, 2012-08-27, 18.8 KB
  • 商用ライセンス (500 円)
  • コメント付きの非圧縮コード
  • 有償サポート (技術的な質問やカスタマイズなど)

過去のリリース情報

Post Tagged with

コメントを残す

メールアドレスが公開されることはありません。