Vladimir Prelovac

<p>No frames removes the browser frames sometimes imposed on your site.</p>
<p>It has become a trend for top sites especially news and content aggregrators to show your site inside a frame (if you see a site toolbar on the top of the page it’s usually using a frame).</p>
<p>Basically the visitor never leaves the site using the frame although they are viewing content created by you. This is done for multiple reasons and one is to improve the metrics of the site using the frame as ‘visitor time on site’ will improve only for the site using the frame and not you.</p>
<p>Purpose of No Frames plugin is to detect these cases and break your site free from the shackles of the frame, thus presenting the user with your full page.</p>
<p>This not only improves your visitor experience but your site metrics as well.</p>
<p>Changelog:</p>
<p>v0.2<br />
– Disabled it for admin panel</p>
<p>v0.1:<br />
– Released first version</p>
<p>Plugin by <a href="http://www.prelovac.com/vladimir" rel="nofollow ugc">Vladimir Prelovac</a>. Looking for <a href="http://www.prelovac.com/vladimir/services" rel="nofollow ugc">WordPress Consultant</a>?</p>
<h3>License</h3>
<p>This file is part of No Frames.</p>
<p>No Frames is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
<p>No Frames is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License along with No Frames. If not, see <a href="http://www.gnu.org/licenses/" rel="nofollow ugc">http://www.gnu.org/licenses/</a>.</p>


No Frames

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/1cQ9rhL-t70?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

No Frames vs Twenty20 Image Before-After