Auto AnimateImage is WordPress plugin that applies AnimateImage script to your site automatically.
Auto AnimateImage是WordPress插件,可将 AnimateImage脚本自动应用于您的网站。
AnimateImage displays multiple images continuously like animated GIF.
AnimateImage像动画GIF一样连续显示多个图像。
All you have to do is write img
element like below, and the image will be animated automatically.
您所要做的就是编写如下的 img code>元素,图像将自动设置动画。 p>
code> pre>
As you know, animated GIF is the most common animation format, but it supports up to
如您所知,动画GIF 是最常见的动画格式,但最多支持
only 256 colors.
仅256色。
There are some alternative animation formats such as APNG, APNG ,
wikipedia.org/wiki/MNG" rel="nofollow">MNG, JNG
wikipedia.org/wiki/MNG“ rel =” nofollow“> MNG , JNG
, Motion JPEG and 运动JPEG 和
SVG_animation" rel="nofollow">SVG Animation.
SVG_animation“ rel =” nofollow“> SVG动画。
However they are currently not widely supported by Web browsers.
但是,当前它们不受Web浏览器的广泛支持。
That is why AnimateImage is the most appropriate method for animated images.
这就是为什么AnimateImage是最适合动画图像的方法的原因。 p>
Auto AnimateImage Features
自动AnimateImage功能 h4>
ul>
AnimateImage Features
AnimateImage功能 h4>
- Displays multiple images continuously like animated GIF.
- 像动画GIF一样连续显示多个图像。
It supports sequential/arbitrary filenames.
它支持顺序/任意文件名。 li>
- Supports any image formats supported by Web browsers, such as GIF, GIF ,
http://en.wikipedia.org/wiki/Portable_Network_Graphics" rel="nofollow">PNG,
http://en.wikipedia.org/wiki/Portable_Network_Graphics“ rel =” nofollow“> PNG ,
>JPEG, JPEG XR (HD Photo), JPEG XR(高清照片),
//en.wikipedia.org/wiki/BMP_file_format" rel="nofollow">BMP, TIFF//en.wikipedia.org/wiki/BMP_file_format“ rel =” nofollow“> BMP
, TIFF , WebP and WebP 和
/wiki/SVG" rel="nofollow">SVG.
/ wiki / SVG“ rel =” nofollow“> SVG 。
Thereby transparent animation with more than 256 colors is available.
从而可以使用具有超过256种颜色的透明动画。 li>
- Many animation options are available, such as animation delay, repeat count, rewind, pause and blank image
- 许多动画选项可用,例如动画延迟,重复计数,快退,暂停和空白图像 li>
img
elements with data-files
attribute are animated automatically.具有 data-files code>属性的-
img code>元素会自动设置动画。No need for writing JavaScript.
无需编写JavaScript。 li>
- Animations are controllable by writing JavaScript.
- 通过编写JavaScript可以控制动画。
You can start/stopeplay them at any time.
您可以随时启动/停止/重放它们。 li>
- Standalone script with 5.6 KB file size, without using JavaScript libraries such as jQuery
- 文件大小为5.6 KB的独立脚本,无需使用jQuery之类的JavaScript库 li>
- Supports Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera and their older versions
- 支持Internet Explorer,Mozilla Firefox,Google Chrome,Safari,Opera及其旧版本 li>
ul>
How to Install
如何安装 h4>
See Installation.
请参见安装。 p>
How to Use
使用方法 h4>
All you have to do is write img
elements with data-files
attribute, and the images will be animated automatically.
您要做的就是编写具有 data-files code>属性的 img code>元素,然后图像将被自动设置动画。You can animate multiple images with sequential number, zero-padded sequential number, sequential alphabet and arbitrary filenames.
您可以使用序列号,零填充序列号,序列字母和任意文件名为多幅图像设置动画。 p>
code> pre>
AnimateImage supports many animation options such as animation delay, repeat count, rewind, pause and blank image.
AnimateImage支持许多动画选项,例如动画延迟,重复计数,快退,暂停和空白图像。
You can specify them with data-*
attributes like below.
您可以使用如下的 data-* code>属性来指定它们。 p> title="" alt="" id="" class="" style=""
title =“” alt =“” id =“” class =“” style =“”
data-delay="" data-cycleDelay=""
data-delay =“” data-cycleDelay =“”
data-repeat="" data-rewind=""
data-repeat =“” data-rewind =“”
data-pauseAtFirst="" data-pauseAtLast=""
data-pauseAtFirst =“” data-pauseAtLast =“”
data-showBlank="" data-blankClassName=""
data-showBlank =“” data-blankClassName =“”
data-blankPath="" data-stretchBlank="" />
data-blankPath =“” data-stretchBlank =“” />
code> pre>
See Code Examples for more information.
有关更多信息,请参见代码示例。 p>
Support Me
支持我 h4>
- To keep my motivation, put rating stars and vote compatibility (works/broken) via the right sidebar
- 为保持动力,请通过右侧的栏添加评分明星和投票兼容性(有效/无效) li>
- If you have any questions, view support forum or post a new topic
- 如有任何疑问,请查看支持论坛或发布新主题 li>
- See Localization if you can translate the plugin into your language
- 如果您可以将插件翻译成您的语言,请参见本地化 li>
- I would be grateful if you would donate to support plugin development
- 如果您愿意捐赠以支持插件开发 li>,我将不胜感激。
- Contact me if you have any feedback
- 与我联系,如果您有任何反馈意见 li>
ul>
Any comments will be very helpful and appreciated.
任何评论都将非常有帮助和赞赏。
Thank you for your support!
谢谢您的支持! p>
Links
链接 h4>
ul>
Code Examples
代码示例 h3>
Example 1: Sequential Filenames
示例1:顺序文件名 h4>
code> pre>
Example 2: Arbitrary Filenames
示例2:任意文件名 h4>
code> pre>
Example 3: Format String in Directory Name
示例3:目录名称中的格式字符串 h4>
code> pre>
* data-files
attribute is specified with filename or relative path to directory, including format string.
* data-files code>属性是使用文件名或目录的相对路径(包括格式字符串)指定的。 p>Example 4: title/alt Attributes
示例4:title / alt属性 h4>
code> pre>
* alt
attribute with the value of title
attribute will be added if not specified.
如果未指定,将添加具有 title code>属性值的 * alt code>属性。 p>Example 5: id/class Attributes
示例5:id / class属性 h4>
code> pre>
* class
attribute will be added if not specified.
如果未指定,将添加
* class code>属性。 default class
attribute value is "animation"
.
class code>的默认属性值为“动画” code>。 p>Example 6: delay/cycleDelay Options
示例6:delay / cycleDelay选项 h4>
code> pre>
* In default, delay
option is 500
ms and cycleDelay
option is 0
ms.
*默认情况下, delay code>选项为 500 code> ms, cycleDelay code>选项为 0 code> ms。 p >
>
Example 7: repeatewind Options
示例7:重复/快退选项 h4>
code> pre>
* In default, repeat
option is -1
(infinite iteration) and rewind
option is false
.
*默认情况下, repeat code>选项为 -1 code>(无限迭代),而 rewind code>选项为 false code>。 p>
Example 8: pauseAtFirst/Last Options
示例8:pauseAtFirst / Last选项 h4>
code> pre>
* In default, pauseAtFirst
option is false
and pauseAtLast
option is false
.
*默认情况下, pauseAtFirst code>选项为 false code>,而 pauseAtLast code>选项为 false code>。 p>Example 9: showBlank/blankClassName/blankPath/stretchBlank Options (Blank Image)
示例9:showBlank / blankClassName / blankPath / stretchBlank选项(空白图片) h4>
code> pre>
* In default, showBlank
option is false
and blankClassName
option is "blank"
.
*默认情况下, showBlank code>选项为 false code>,而 blankClassName code>选项为“ blank” code>。 p >
>
Example 10: Arbitrary Attributes
示例10:任意属性 h4>
width="100" height="100" longdesc="long description" />
width =“ 100” height =“ 100” longdesc =“详细说明” />
code> pre>
Example 11: Arbitrary CSS Properties
示例11:任意CSS属性 h4>
style="border: solid; border-top: dotted; border-bottom: dashed" />
Localization
style =“ border:solid; border-top:点缀; border-bottom:虚线” />
本地化 h3>
code> pre>
You can localize the plugin with Poedit.
您可以使用 Poedit 对插件进行本地化。
Here is how to translate the plugin into your language.
这是将插件翻译成您的语言的方法。 p>
- Download Poedit and install it
- 下载Poedit 并安装 li>
- Run Poedit and select your language
- 运行Poedit并选择您的语言 li>
- Input your name and mail address (optional)
- 输入您的姓名和邮件地址(可选) li>
- Open “auto-animateimage/languages/animateimage.pot” file
- 打开“ auto-animateimage /语言/animateimage.pot”文件 li>
- Select original string and input its translation
- 选择原始字符串并输入其翻译内容 li>
- Save the file as “animateimage-[LANG].po”
- 将文件另存为“ animateimage- [LANG] .po” li>
ol>
“[LANG]” is a language code.
“ [LANG]”是一种语言代码。
For instance, “de_DE” is for German, “sv_SE” is for Swedish, “pt_BR” is for Portuguese spoken in Brazil.
例如,“ de_DE”用于德语,“ sv_SE”用于瑞典语,“ pt_BR”用于在巴西说葡萄牙语。
If you want to know your language code, see WordPress in Your Language.
如果您想知道您的语言代码,请参阅您所用语言的WordPress 。
If you need more information, see Translating WordPress.
如果您需要更多信息,请参阅翻译WordPress 。 p>
I would be grateful if you would send me any translation files.
如果您能发给我任何翻译文件,我将不胜感激。
Here are the available translations included in the latest plugin.
这是最新插件中包含的可用翻译。 p>
ul>
If you have any questions, feel free to contact me.
如有任何疑问,请随时与我联系。 p>