[wordpress插件] Auto AnimateImage自动AnimateImage

wordpress 插件 文章 2020-02-24 02:30 0 280 全屏看文

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.


All you have to do is write img element like below, and the image will be animated automatically.

您所要做的就是编写如下的 img 元素,图像将自动设置动画。


As you know, animated GIF is the most common animation format, but it supports up to

如您所知,动画GIF 是最常见的动画格式,但最多支持

only 256 colors.


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.


That is why AnimateImage is the most appropriate method for animated images.


Auto AnimateImage Features


    • Automatically applies AnimateImage script to your site
    • 自动将 AnimateImage脚本应用于您的网站

    • All you have to do is write img elements.

    • 您要做的就是编写 img 元素。

      No JavaScript, No Shortcode, No Gallery.

    • 没有JavaScript,没有简码,没有库。

    • Common options and animation styles can be customized via Settings screen
    • 可以通过“设置”屏幕 自定义常用选项和动画样式

    • Compatible widely down to even obsolete WordPress 2.7
    • 广泛兼容,甚至可以淘汰WordPress 2.7

    AnimateImage Features


      How to Install


      See Installation.


      How to Use


      All you have to do is write img elements with data-files attribute, and the images will be animated automatically.

      您要做的就是编写具有 data-files 属性的 img 元素,然后图像将被自动设置动画。

      You can animate multiple images with sequential number, zero-padded sequential number, sequential alphabet and arbitrary filenames.



      AnimateImage supports many animation options such as animation delay, repeat count, rewind, pause and blank image.


      You can specify them with data-* attributes like below.

      您可以使用如下的 data-* 属性来指定它们。


      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 =“” />

      See Code Examples for more information.


      Support Me


        • To keep my motivation, put rating stars and vote compatibility (works/broken) via the right sidebar
        • 为保持动力,请通过右侧的栏添加评分明星和投票兼容性(有效/无效)

        • If you have any questions, view support forum or post a new topic
        • 如有任何疑问,请查看支持论坛或发布新主题

        • See Localization if you can translate the plugin into your language
        • 如果您可以将插件翻译成您的语言,请参见本地化

        • I would be grateful if you would donate to support plugin development
        • 如果您愿意捐赠以支持插件开发 ,我将不胜感激。

        • Contact me if you have any feedback
        • 与我联系,如果您有任何反馈意见

        Any comments will be very helpful and appreciated.


        Thank you for your support!




          Code Examples


          Example 1: Sequential Filenames



          Example 2: Arbitrary Filenames



          Example 3: Format String in Directory Name



          * data-files attribute is specified with filename or relative path to directory, including format string.

          * data-files 属性是使用文件名或目录的相对路径(包括格式字符串)指定的。

          Example 4: title/alt Attributes

          示例4:title / alt属性






          * alt attribute with the value of title attribute will be added if not specified.

          如果未指定,将添加具有 title 属性值的

          * alt 属性。

          Example 5: id/class Attributes

          示例5:id / class属性


          * class attribute will be added if not specified.


          * class 属性。

          default class attribute value is "animation".

          class 的默认属性值为“动画”

          Example 6: delay/cycleDelay Options

          示例6:delay / cycleDelay选项


          * In default, delay option is 500 ms and cycleDelay option is 0 ms.

          *默认情况下, delay 选项为 500 ms, cycleDelay 选项为 0 ms。



          Example 7: repeatewind Options



          * In default, repeat option is -1 (infinite iteration) and rewind option is false.

          *默认情况下, repeat 选项为 -1 (无限迭代),而 rewind 选项为 false

          Example 8: pauseAtFirst/Last Options

          示例8:pauseAtFirst / Last选项


          * In default, pauseAtFirst option is false and pauseAtLast option is false.

          *默认情况下, pauseAtFirst 选项为 false ,而 pauseAtLast 选项为 false

          Example 9: showBlank/blankClassName/blankPath/stretchBlank Options (Blank Image)

          示例9:showBlank / blankClassName / blankPath / stretchBlank选项(空白图片)


          * In default, showBlank option is false and blankClassName option is "blank".

          *默认情况下, showBlank 选项为 false ,而 blankClassName 选项为“ blank”



          Example 10: Arbitrary Attributes



          width="100" height="100" longdesc="long description" />

          width =“ 100” height =“ 100” longdesc =“详细说明” />

          Example 11: Arbitrary CSS Properties



          style="border: solid; border-top: dotted; border-bottom: dashed" />


          style =“ border:solid; border-top:点缀; border-bottom:虚线” />


          You can localize the plugin with Poedit.

          您可以使用 Poedit 对插件进行本地化。

          Here is how to translate the plugin into your language.


            1. Download Poedit and install it
            2. 下载Poedit 并安装

            3. Run Poedit and select your language
            4. 运行Poedit并选择您的语言

            5. Input your name and mail address (optional)
            6. 输入您的姓名和邮件地址(可选)

            7. Open “auto-animateimage/languages/animateimage.pot” file
            8. 打开“ auto-animateimage /语言/animateimage.pot”文件

            9. Select original string and input its translation
            10. 选择原始字符串并输入其翻译内容

            11. Save the file as “animateimage-[LANG].po”
            12. 将文件另存为“ animateimage- [LANG] .po”

            “[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”用于德语,“ s​​v_SE”用于瑞典语,“ pt_BR”用于在巴西说葡萄牙语。

            If you want to know your language code, see WordPress in Your Language.


            If you need more information, see Translating WordPress.


            I would be grateful if you would send me any translation files.


            Here are the available translations included in the latest plugin.



Auto Install


    1. Access Dashboard screen in WordPress
    2. 在WordPress中访问仪表板屏幕

    3. Select [Plugins] – [Add New]
    4. 选择[插件] – [添加新]

    5. Input “AnimateImage” into text field, and click [Search Plugins]
    6. 在文本字段中输入“ AnimateImage”,然后单击[搜索插件]

    7. Click ‘Install Now’ at ‘Auto AnimateImage’
    8. 在“自动AnimateImage”上单击“立即安装”

    9. Click ‘Activate Plugin’
    10. 点击“激活插件”

    11. Write img elements with data-files attribute
    12. 使用 data-files 属性编写 img 元素

    Manual Install


      1. Download auto-animateimage.zip
      2. 下载 auto-animateimage.zip

      3. Access Dashboard screen in WordPress
      4. 在WordPress中访问仪表板屏幕

      5. Select [Plugins] – [Add New] – ‘Upload’ tab
      6. 选择[插件] – [添加新] –“上传”标签

      7. Upload the plugin zip file, and click [Install Now]
      8. 上传插件zip文件,然后单击[立即安装]

      9. Click ‘Activate Plugin’
      10. 点击“激活插件”

      11. Write img elements with data-files attribute
      12. 使用 data-files 属性编写 img 元素

      Manual Install via FTP


        1. Download auto-animateimage.zip, and unzip it
        2. 下载 auto-animateimage.zip ,并将其解压缩

        3. Upload the plugin folder to the /wp-content/plugins/ directory
        4. 将插件文件夹上传到 / wp-content / plugins / 目录

        5. Activate the plugin through the ‘Plugins’ menu in WordPress
        6. 通过WordPress中的“插件”菜单激活插件

        7. Write img elements with data-files attribute
        8. 使用 data-files 属性编写 img 元素



        Here is all available options at Auto AnimateImage Settings screen.


        You can customize common options and animation styles through the following options.


          • General

          • 一般

              • AnimateImage Script (Header or Footer)
              • AnimateImage脚本(页眉或页脚)

            • Common Options

            • 常用选项

                • Animation Delay
                • 动画延迟

                • Delay between Animation Cycles
                • 动画周期之间的延迟

                • Repeat Count
                • 重复计数

                • Rewind at the End of Animation
                • 在动画结束时倒退

                • Pause at First Image
                • 在第一张图片上暂停

                • Pause at Last Image
                • 在最后一张图片上暂停

                • Show Blank Image between Animation Cycles
                • 在动画周期之间显示空白图像

                • Stretch Blank Image to the Size of Last Image
                • 将空白图像拉伸到最后一张图像的大小

                • Output img Elements when Using JavaScript Code
                • 使用JavaScript代码时输出img元素

                • Class Name (Animated Images)
                • 类名(动画图像)

                • Class Name (Blank Image)
                • 类名(空白图像)

                • File Path (Blank Image)
                • 文件路径(空白图像)

              • Styles (Animated Images / Blank Image)

              • 样式(动画图像/空白图像)

                  • Background Color
                  • 背景色

                  • Margin
                  • 保证金

                  • Padding
                  • 填充

                  • Border (Width / Style / Color)
                  • 边框(宽度/样式/颜色)

                  • Border Radius
                  • 边界半径

                  • Opacity
                  • 不透明度

                  • Box Shadow
                  • Box Shadow

                  • Width / Height
                  • 宽度/高度

                  • Max Width / Max Height
                  • 最大宽度/最大高度

                  • Min Width / Min Height
                  • 最小宽度/最小高度