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.

FARAZFRANK

<p>Create versatile sliders for WordPress: responsive image slider, photo slider, video slider, team and testimonial slider with 12 templates.</p>
<h3>Why Choose Slider Factory?</h3>
<p><strong>12 Unique Layouts</strong>: From image sliders to video carousels, find the perfect design.<br />
<strong>SEO-Friendly: Title</strong>, description, and alt text for images boost search rankings.<br />
<strong>Drag-and-Drop Interface</strong>: Effortlessly create and manage sliders.<br />
<strong>Responsive Design</strong>: Looks great on all devices.<br />
<strong>Compatibility</strong>: compatible with WPML, Elementor, Visual Composer, WPBakery Page Builder, and Page Block Editor plugins.</p>
<p>Slider Factory is a dynamic WordPress plugin with 12 unique layouts, supporting image, photo, video sliders, and carousels. Built with Bootstrap 5, and compatible with WPML, Elementor, Visual Composer, WPBakery Page Builder, and all Page Block Editor plugins. Features bulk image uploads, drag-and-drop sorting, custom CSS, and real-time previews.</p>
<p>Optimized for SEO, Slider Factory features title, description, and alt text for images, enhancing your website’s search engine visibility. Built with the latest Bootstrap 5 CSS framework, our dashboard is fully responsive and compatible with all devices. The plugin allows for bulk image uploads using a multiple image uploader, and you can easily sort the images in your desired sequence using a drag and drop feature. Plus, you have the option to apply custom CSS code to tailor the design to your needs.</p>
<p>Creating a slideshow is as easy as selecting a layout, adding slider images, configuring settings, and generating a shortcode. Slider shortcode can then be embedded on any page or post to start your image slider show. It’s an incredibly user-friendly plugin with a variety of layouts and settings.</p>
<p>Slider Factory is fully compatible with various tools like WPML, Elementor, Visual Composer, WPBakery Page Builder, and all Page Block Editor plugins, making it an indispensable part of your WordPress setup.</p>
<p>Unleash your creativity with seamless animation effects, smooth transitions, and user-friendly navigation controls, adding a professional touch to your sliders.</p>
<p>Regardless of the device – desktops, tablets, or mobiles – Slider Factory ensures a flawless display, delivering an immersive responsive experience to every visitor.</p>
<p>Performance is key – Slider Factory guarantees fast-loading sliders without compromising your website’s speed, making it an ideal choice for your responsive slider needs.</p>
<h3>Free Version Features</h3>
<ul>
<li>Responsive Design</li>
<li>12 Different Design Layouts</li>
<li>Bootstrap Admin Dashboard</li>
<li>Bootstrap 5 User Interface</li>
<li>Multiple Image Uploader</li>
<li>Drag and Drop Slides Sequencing/Positioning</li>
<li>Customizable Width/Height</li>
<li>Auto Play On/OFF Setting</li>
<li>Customizable Photo Title</li>
<li>Customizable Description</li>
<li>Text Widget Support</li>
<li>SEO Friendly with Alt Tag</li>
</ul>
<p><strong>Free Plugin:</strong> <a href="https://wpfrank.com/demo/slider-factory-free-wordpress-plugin/" rel="nofollow ugc">DEMO</a></p>
<h3>Watch The Video Tutorial</h3>
<p><iframe loading="lazy" title="How To Add Image Slide Show On WordPress Website Using Free Slider Factory WordPress Plugin?" width="750" height="422" src="https://www.youtube.com/embed/UC0Ru2L4mFk?list=PLOeoids2h7nJrQEY8ro6-zp4i9wbUB6BY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>How to embed slider in any template?</h3>
<pre><code><?php do_shortcode('[sf id=1 layout=1]') ?>
</code></pre>
<p>When you create and save, it generate a shortcode, like below:</p>
<pre><code>[sf id=1 layout=1]
</code></pre>
<p>In the above shortcode, <strong><code>id</code></strong> denotes slider id and <strong><code>layout</code></strong> denotes the layout number used to design.</p>
<h3>Slider Factory Pro Version Feature</h3>
<ul>
<li>20 Different Layouts</li>
<li>Mobile Responsive</li>
<li>Easy To Use And Setup</li>
<li>No Coding Required</li>
<li>Many Design</li>
<li>Video Support</li>
<li>Pre Build Preset</li>
<li>Advance Setting</li>
<li>Speed Control</li>
<li>Pause On Mouse Hover</li>
<li>Full Screen</li>
<li>Fade Effect</li>
<li>Mouse Roll Over</li>
<li>Adaptive Height</li>
<li>Transition Speed</li>
<li>jQuery Easing Effects</li>
<li>CSS3 Animation Effects</li>
<li>Loading Bar</li>
<li>Looping</li>
<li>Mouse Wheel Control</li>
<li>Gap Between Slides</li>
<li>Navigation</li>
<li>Dots Pagination</li>
<li>Photo Alignments</li>
<li>Title And Description</li>
<li>Link On Image And Photo</li>
<li>Sorting Ascending and Descending</li>
<li>Sorting Shuffle And Random</li>
<li>Sorting By Title</li>
<li>Photo Thumbnails</li>
<li>Add Two Link Button</li>
<li>Multilingual And Translation Ready</li>
<li>Responsive Admin Dashboard</li>
<li>Bootstrap 5 User Interface</li>
<li>Bulk Image Uploader</li>
<li>Drag and Drop Sequencing/Positioning</li>
<li>Customizable Width/Height</li>
<li>Auto Play On/OFF Setting</li>
<li>Customizable Title</li>
<li>Customizable Description</li>
<li>Text Widget Support</li>
<li>SEO Friendly Slideshow</li>
<li>Cloning And Copy Functionality</li>
<li>Custom CSS</li>
</ul>
<p><strong>Pro Version:</strong> <a href="https://wpfrank.com/wordpress-plugins/slider-factory-pro/" rel="nofollow ugc">Details</a><br />
<strong>Pro Version:</strong> <a href="https://wpfrank.com/demo/slider-factory-pro/" rel="nofollow ugc">Live Demo</a><br />
<strong>Pro Version:</strong> <a href="https://wpfrank.com/account/signup/slider-factory-pro/" rel="nofollow ugc">Buy Now</a></p>
<p><iframe loading="lazy" title="Slider Factory Plugin For WordPress Website and Blog #Shorts" width="750" height="422" src="https://www.youtube.com/embed/H0_FnzsrEGc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>


Slider Factory – Responsive Photo Slider, Image Slider, Video Slider, Carousel Slideshow

The slider factory plugin is the ultimate factory to produce a multi-design slide show. I implemented multiple slider layouts in a single plugin dashboard. The plugin has 6 different layout designs to make an image slide show. I will add a new slider layout every month or a week. So, you don't need to install multiple slider plugins now.

The plugin main features of the slider are:
- Responsive Bootstrap 5 slider management dashboard
- Multiple image slide uploader
- Supports unlimited image slides in a single slider (depends on server configuration)
- Multiple slider design layouts (new design every month or week)
- Custom slider width and height
- Image slide content like title, description
- Image slide sorting
- Slider cloning
- Add a slider into the sidebar and footer widget
- Add slide on a page template

Hope you like this slider plugin and will use it on your website.

Thanks
Faraz

Best WordPress Slider Plugin

Fulfill all your different layouts needs within a single plugin.
Very Easy to use. Just uploaded same size images chose settings and done.
Now changing different sliders on my website weekly.

Best slider plugin ever made.

Easy To Use

Create versatile sliders for WordPress: responsive image slider, photo slider, video slider, team and testimonial slider with 12 templates.

Auto AnimateImage vs Slider Factory – Responsive Photo Slider, Image Slider, Video Slider, Carousel Slideshow