attosoft

<p>Auto AnimateImage is WordPress plugin that applies <a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a> to your site automatically. AnimateImage displays multiple images continuously like animated GIF. All you have to do is write <code>img</code> element like below, and the image will be animated automatically.</p>
<pre><code><img src="images/0.png" data-files="[0-9].png" />
</code></pre>
<p>As you know, <a href="http://en.wikipedia.org/wiki/Animated_GIF" rel="nofollow ugc">animated GIF</a> is the most common animation format, but it supports up to only 256 colors. There are some alternative animation formats such as <a href="http://en.wikipedia.org/wiki/APNG" rel="nofollow ugc">APNG</a>, <a href="http://en.wikipedia.org/wiki/MNG" rel="nofollow ugc">MNG</a>, <a href="http://en.wikipedia.org/wiki/JNG" rel="nofollow ugc">JNG</a>, <a href="http://en.wikipedia.org/wiki/Motion_JPEG" rel="nofollow ugc">Motion JPEG</a> and <a href="http://en.wikipedia.org/wiki/SVG_animation" rel="nofollow ugc">SVG Animation</a>. However they are currently not widely supported by Web browsers. That is why AnimateImage is the most appropriate method for animated images.</p>
<h4>Auto AnimateImage Features</h4>
<ul>
<li>Automatically applies <a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a> to your site</li>
<li>All you have to do is write <code>img</code> elements. No JavaScript, No Shortcode, No Gallery.</li>
<li>Common options and animation styles can be customized via <a href="screenshots/" rel="nofollow ugc">Settings screen</a></li>
<li>Compatible widely down to even obsolete WordPress 2.7</li>
</ul>
<h4>AnimateImage Features</h4>
<ul>
<li>Displays multiple images continuously like animated GIF. It supports sequential/arbitrary filenames.</li>
<li>Supports any image formats supported by Web browsers, such as <a href="http://en.wikipedia.org/wiki/GIF" rel="nofollow ugc">GIF</a>, <a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" rel="nofollow ugc">PNG</a>, <a href="http://en.wikipedia.org/wiki/JPEG" rel="nofollow ugc">JPEG</a>, <a href="http://en.wikipedia.org/wiki/JPEG_XR" rel="nofollow ugc">JPEG XR (HD Photo)</a>, <a href="http://en.wikipedia.org/wiki/BMP_file_format" rel="nofollow ugc">BMP</a>, <a href="http://en.wikipedia.org/wiki/TIFF" rel="nofollow ugc">TIFF</a>, <a href="http://en.wikipedia.org/wiki/WebP" rel="nofollow ugc">WebP</a> and <a href="http://en.wikipedia.org/wiki/SVG" rel="nofollow ugc">SVG</a>. Thereby transparent animation with more than 256 colors is available.</li>
<li>Many animation options are available, such as animation delay, repeat count, rewind, pause and blank image</li>
<li><code>img</code> elements  with <code>data-files</code> attribute are animated automatically. No need for writing JavaScript.</li>
<li>Animations are controllable by writing JavaScript. You can start/stop/replay them at any time.</li>
<li>Standalone script with 5.6 KB file size, without using JavaScript libraries such as jQuery</li>
<li>Supports Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera and their older versions</li>
</ul>
<h4>How to Install</h4>
<p>See <a href="installation/" rel="nofollow ugc">Installation</a>.</p>
<h4>How to Use</h4>
<p>All you have to do is write <code>img</code> elements with <code>data-files</code> attribute, and the images will be animated automatically. You can animate multiple images with sequential number, zero-padded sequential number, sequential alphabet and arbitrary filenames.</p>
<pre><code><img src="sequential/0.png" data-files="[0-99].png" />
<img src="zero-padded/00.png" data-files="[00-99].png" />
<img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" />
<img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
<img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
</code></pre>
<p>AnimateImage supports many animation options such as animation delay, repeat count, rewind, pause and blank image. You can specify them with <code>data-*</code> attributes like below.</p>
<pre><code><img src="" data-files=""
    title="" alt="" id="" class="" style=""
    data-delay="" data-cycleDelay=""
    data-repeat="" data-rewind=""
    data-pauseAtFirst="" data-pauseAtLast=""
    data-showBlank="" data-blankClassName=""
    data-blankPath="" data-stretchBlank="" />
</code></pre>
<p>See <a href="other_notes/#Code-Examples" rel="nofollow ugc">Code Examples</a> for more information.</p>
<h4>Support Me</h4>
<ul>
<li>To keep my motivation, put rating stars and vote compatibility (works/broken) via the right sidebar</li>
<li>If you have any questions, view <a href="https://wordpress.org/support/plugin/auto-animateimage" rel="ugc">support forum</a> or post a new topic</li>
<li>See <a href="other_notes/#Localization" rel="nofollow ugc">Localization</a> if you can translate the plugin into your language</li>
<li>I would be grateful if you would <a href="http://attosoft.info/en/donate/" rel="nofollow ugc">donate to support plugin development</a></li>
<li><a href="http://attosoft.info/en/contact/" rel="nofollow ugc">Contact me</a> if you have any feedback</li>
</ul>
<p>Any comments will be very helpful and appreciated. Thank you for your support!</p>
<h4>Links</h4>
<ul>
<li><a href="http://attosoft.info/en/" rel="nofollow ugc">attosoft.info</a></li>
<li><a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a></li>
<li><a href="http://attosoft.info/en/blog/auto-animateimage/" rel="nofollow ugc">Auto AnimateImage plugin</a></li>
</ul>
<h3>Code Examples</h3>
<h4>Example 1: Sequential Filenames</h4>
<pre><code><img src="sequential/0.png" data-files="[0-99].png" />
<img src="zero-padded/00.png" data-files="[00-99].png" />
<img src="zero-padded/000.png" data-files="[000-999].png" />
<img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" />
<img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
</code></pre>
<h4>Example 2: Arbitrary Filenames</h4>
<pre><code><img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" />
<img src="arbitrary/foo.png" data-files="[foo.png, bar.jpg, baz.gif]" />
<img src="prefix-foo_suffix.png" data-files="prefix-[foo, bar, baz]_suffix.png" />
</code></pre>
<h4>Example 3: Format String in Directory Name</h4>
<pre><code><img src="parent/child/file0.png" data-files="file[0-9].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
<img src="parent0/child/image.png" data-files="parent[0-9]/child/file.png" />
</code></pre>
<p>* <code>data-files</code> attribute is specified with filename or relative path to directory, including format string.</p>
<h4>Example 4: title/alt Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" title="foo" />
<img src="images/0.png" data-files="[0-9].png" title="foo" alt="bar" />
<img src="images/0.png" data-files="[0-9].png" alt="bar" />
</code></pre>
<p>* <code>alt</code> attribute with the value of <code>title</code> attribute will be added if not specified.</p>
<h4>Example 5: id/class Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" id="foo" />
<img src="images/0.png" data-files="[0-9].png" class="bar" />
<img src="images/0.png" data-files="[0-9].png" class="" />
</code></pre>
<p>* <code>class</code> attribute will be added if not specified. default <code>class</code> attribute value is <code>"animation"</code>.</p>
<h4>Example 6: delay/cycleDelay Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-delay="1000" />
<img src="images/0.png" data-files="[0-9].png" data-cycleDelay="2000" />
</code></pre>
<p>* In default, <code>delay</code> option is <code>500</code> ms and <code>cycleDelay</code> option is <code>0</code> ms.</p>
<h4>Example 7: repeat/rewind Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-repeat="1" />
<img src="images/0.png" data-files="[0-9].png" data-repeat="1" data-rewind="true" />
</code></pre>
<p>* In default, <code>repeat</code> option is <code>-1</code> (infinite iteration) and <code>rewind</code> option is <code>false</code>.</p>
<h4>Example 8: pauseAtFirst/Last Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-pauseAtFirst="true" />
<img src="images/0.png" data-files="[0-9].png" data-pauseAtLast="true" />
</code></pre>
<p>* In default, <code>pauseAtFirst</code> option is <code>false</code> and <code>pauseAtLast</code> option is <code>false</code>.</p>
<h4>Example 9: showBlank/blankClassName/blankPath/stretchBlank Options (Blank Image)</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-showBlank="true" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankClassName="foo" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="blank.png" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="logo.png" data-stretchBlank="false" />
</code></pre>
<p>* In default, <code>showBlank</code> option is <code>false</code> and <code>blankClassName</code> option is <code>"blank"</code>.</p>
<h4>Example 10: Arbitrary Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png"
    width="100" height="100" longdesc="long description" />
</code></pre>
<h4>Example 11: Arbitrary CSS Properties</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png"
    style="border: solid; border-top: dotted; border-bottom: dashed" /><h3>Localization</h3>
</code></pre>
<p>You can localize the plugin with <a href="http://www.poedit.net/" rel="nofollow ugc">Poedit</a>. Here is how to translate the plugin into your language.</p>
<ol>
<li><a href="http://www.poedit.net/download.php" rel="nofollow ugc">Download Poedit</a> and install it</li>
<li>Run Poedit and select your language</li>
<li>Input your name and mail address (optional)</li>
<li>Open “auto-animateimage/languages/animateimage.pot” file</li>
<li>Select original string and input its translation</li>
<li>Save the file as “animateimage-[LANG].po”</li>
</ol>
<p>“[LANG]” is a language code. For instance, “de_DE” is for German, “sv_SE” is for Swedish, “pt_BR” is for Portuguese spoken in Brazil. If you want to know your language code, see <a href="https://codex.wordpress.org/WordPress_in_Your_Language" rel="nofollow ugc">WordPress in Your Language</a>. If you need more information, see <a href="https://codex.wordpress.org/Translating_WordPress" rel="nofollow ugc">Translating WordPress</a>.</p>
<p>I would be grateful if you would <a href="http://attosoft.info/en/contact/" rel="nofollow ugc">send me</a> any translation files. Here are the available translations included in the latest plugin.</p>
<ul>
<li>Japanese (ja) translation by <a href="http://attosoft.info/" rel="nofollow ugc">attosoft</a></li>
</ul>
<p>If you have any questions, feel free to <a href="http://attosoft.info/en/contact/" rel="nofollow ugc">contact me</a>.</p>


Auto AnimateImage

Automatically applies AnimateImage script that displays multiple images like animated GIF. All you have to do is write img elements.

wpweaver

<p>This isn’t the typical plugin to create Sliders: Slide Shows, Carousels, Sliders with Posts. This is a Slider with options!<br />
It supports beautiful, responsive image sliders and slide shows. And that’s not all – it also can display any regular post in a slider or slide show.<br />
You can even use Weaver Show Sliders as a Slide Show replacement for the standard WordPress [gallery] shortcode.</p>
<p>But, best of all, Weaver Show Sliders has been designed to give you options! You have more control of what content is displayed in your sliders<br />
and slide shows, as well as how that content is displayed.</p>
<p>This plugin uses the FlexSlider jQuery script for the actual slider animation.</p>
<h4>Slider Options</h4>
<p>Weaver Show Sliders has been designed to give you more control of what content is displayed in your sliders<br />
and slide shows, as well as how that content is displayed, than any other slider plugin.</p>
<ul>
<li>Add sliders using a shortcode</li>
<li>Create multiple sliders – display as many as you want anywhere you can add a shortcode</li>
<li>Slider Types: Fader, Slider, Carousel</li>
<li>Multiple Index Paging Options: none, dots, thumbnails, and sliding thumbnails</li>
<li>Slider Content: Images or Posts</li>
<li>Easy Selection of Content: use the Weaver Show Posts plugin features to select posts and individual slides</li>
<li>Add custom posts with a special post type.</li>
<li>Use the WordPress Gallery tool to define images, or add images one post at a time.</li>
<li>Many display options: Previous/Next navigation buttons, Pause/Play, Autostart show, Add links to image, Captions, Titles, Descriptions, BG color, Borders</li>
<li>A Custom CSS option allows you to add your own styling rules for the sliders. Full documentation is included about slider classes.</li>
<li>[gallery] shortcode replacement slider</li>
<li>A built-in Lightbox to responsively show your images in a full popup lightbox.</li>
</ul>
<h4>Easy to Select Content</h4>
<p>For images sliders, you can use the standard WordPress gallery generator. Simply add a [gallery] to one<br />
of the new Slider Custom Post types. You can use the standard gallery interface to select images from your<br />
Media library. That interface allows you to add captions, descriptions, even specify the order the images are shown.</p>
<p>Weaver Show Sliders requires the Weaver Show Posts plugin to specify exactly which posts (or individual images) are used for<br />
sliders you define. You can use the special Slider Post type. You can pick up a gallery from any page. Weaver<br />
Show Sliders will even automatically use the first image found on any post. Using the Weaver Show Posts filter<br />
interface, you can easily select exactly where your images and posts included in a slider originate.</p>
<p>No other slider makes it as easy to select the source of your images and posts.</p>
<p>Other options supported by Weaver Show Sliders include  more sizing and layout options;<br />
more control over how images are displayed with titles, captions, and descriptions;<br />
support for Videos in sliders, more control of Carousels;<br />
selection of over 20 different navigation arrows;<br />
display options for navigation arrows,timing and order options;<br />
per-slider custom CSS;<br />
and other options<br />
to fine tune your slider.<br />
There is no other slider plugin like it.</p>
<h3>Copyrights</h3>
<ul>
<li>Weaver Show Sliders is Copyright (c) 2014-2023 by Bruce E. Wampler. It is licensed under GPL Version 2.</li>
<li>FlexSlider is licensed under GPL Version 2.</li>
<li>jQuery Easing is licensed under BSD</li>
<li>FitVids is licensed under WTFPL</li>
<li>mousewheel is licensed under MIT</li>
</ul>
<h3>1.2</h3>
<ul>
<li>New: name from ATW Show Sliders to Weaver Show Sliders</li>
<li>New: Added Lightbox display option</li>
<li>New: Added Save/Restore Slider settngs</li>
<li>Tweak: alt= value on slider images, uses WP Alt value</li>
<li>Fix: fixed several minor bugs</li>
</ul>
<h4>1.1</h4>
<ul>
<li>Added Pro freatures to free version</li>
<li>Fixed Multi-site menu display</li>
<li>Updated FlexSlider and FitVids versions</li>
<li>Fixed preview of edited page</li>
<li>Fixed alt= tags</li>
</ul>
<h4>1.0.10</h4>
<ul>
<li>Tweaked Custom Per-Slider CSS  box (Pro)</li>
<li>Tweaked some option wording</li>
<li>Fixed problem with minimized script file</li>
</ul>
<h4>1.0.8</h4>
<ul>
<li>Fixed “Enter” on text input areas issue triggering submit</li>
<li>Added support for Sliding Thumbnails for Posts Sliders</li>
<li>Added max-height for thumbnail pager images</li>
</ul>
<h4>1.0.6</h4>
<ul>
<li>Show recommended plugin only if user can activate plugins</li>
<li>Fixed animation time issue</li>
</ul>
<h4>1.0.5</h4>
<ul>
<li>Fixed auto-update issues with Pro version</li>
</ul>
<h4>1.0.4</h4>
<ul>
<li>Fixed arrow spacing when margins specified for slider</li>
<li>Added Per-slider custom css (pro)</li>
<li>Added selection of left/right arrows (pro)</li>
<li>Added show arrows in upper right corner (pro)</li>
<li>Added always show arrows (pro)</li>
<li>Added disable arrows slide-in effect (pro)</li>
</ul>
<h4>1.0.3</h4>
<ul>
<li>Fixed activation order issues with Show Posts and Show Sliders</li>
</ul>
<h4>1.0.2</h4>
<ul>
<li>Temporary work around for requirement that Weaver Show Posts be activated first.</li>
</ul>
<h4>1.0.1</h4>
<ul>
<li>Added arbitrary link option for images defined in a post (Pro)</li>
<li>When Video, will not use FI for image for all slides</li>
<li>Fixed opacity for slider pager when above</li>
</ul>
<h4>1.0</h4>
<ul>
<li>First release.</li>
</ul>


Weaver Show Sliders

Show Sliders partner to Show Posts plugin. Requires Show Post Plugin to work.

Auto AnimateImage vs Weaver Show Sliders