[wordpress插件] Auto AnimateImage自动AnimateImage

wordpress 插件 文章 2020-02-24 02:30 0 280 全屏看文
评分
100
描述

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 元素,图像将自动设置动画。

  

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是最适合动画图像的方法的原因。

Auto AnimateImage Features

自动AnimateImage功能

    • 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

    AnimateImage功能

      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.

      AnimateImage支持许多动画选项,例如动画延迟,重复计数,快退,暂停和空白图像。

      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!

        谢谢您的支持!

        Links

        链接

          Code Examples

          代码示例

          Example 1: Sequential Filenames

          示例1:顺序文件名

            

          Example 2: Arbitrary Filenames

          示例2:任意文件名

            

          Example 3: Format String in Directory Name

          示例3:目录名称中的格式字符串

            

          * 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属性

            

          bar

          “

          bar

          “

          * 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

          示例7:重复/快退选项

            

          * 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

          示例10:任意属性

            

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

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

          Example 11: Arbitrary CSS Properties

          示例11:任意CSS属性

            

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

          Localization

          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.

            如果您想知道您的语言代码,请参阅您所用语言的WordPress

            If you need more information, see Translating WordPress.

            如果您需要更多信息,请参阅翻译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

      通过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 元素

        Customization

        自定义

        Here is all available options at Auto AnimateImage Settings screen.

        “自动AnimateImage设置”屏幕上的所有可用选项

        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
                  • 最小宽度/最小高度

下载地址
https://downloads.wordpress.org/plugin/auto-animateimage.zip
-EOF-