Bolton Studios LLC

<p>Create before-and-after image sliders in Divi easily with <em>Before + After Images for Divi</em>.</p>
<ul>
<li>Compatible with the Visual Builder.</li>
<li>Compatible with lazy load plugins (excludes slider images).</li>
<li>Supports cropped image sizes (image size selection).</li>
<li>Mobile responsive.</li>
<li>Lightweight.</li>
</ul>
<h4>Requirements</h4>
<p>This plugin is designed to work with the Divi Builder plugin or a theme such as Divi or Extra by <a href="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=48997&tid1=baie" rel="nofollow ugc">Elegant Themes</a> (affiliate link).</p>
<h4>My Plugins for Divi</h4>
<ul>
<li><a href="https://wordpress.org/plugins/before-after-images-for-divi/" rel="ugc">Before + After Images for Divi</a></li>
<li><a href="https://wordpress.org/plugins/image-size-selection-for-divi/" rel="ugc">Image Size Selection for Divi</a></li>
</ul>
<h4>Supporting Before + After Images for Divi</h4>
<p>If you found this free plugin helpful, please support the developer with a small donation:</p>
<ul>
<li><a href="http://ko-fi.com/boltonstudios" rel="nofollow ugc">Buy me a coffee</a></li>
</ul>
<h4>Credit</h4>
<p>Plugin created by Aaron Bolton. <em>Before + After Images for Divi</em> brings the power of <a href="https://zurb.com/playground/twentytwenty" rel="nofollow ugc">TwentyTwenty by ZURB</a> to your Divi Builder installation.</p>


Before + After Images for Divi

Create before-and-after image sliders in the Divi Visual Builder easily.

host1967

<p>Before After Pictures plugin integrates <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" title="jQuery Before/After Plugin" rel="nofollow ugc">jQuery Before/After Plugin</a> in the wordpress. It can be used to show the difference between edited and original photo, before and after photos of changes, etc.</p>
<p>Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog</p>
<p>Demosites: http://www.ansichten-und-aussichten.de/beforeafter-pictures/</p>
<p><a href="http://www.ansichten-und-aussichten.de/beforeafter-pictures/" title="Operation with Default wp theme" rel="nofollow ugc">Operation with default theme</a><br />
<a href="http://www.ansichten-und-aussichten.de/beforeafter-pictures/" title="Operation with TwentyTen wp theme" rel="nofollow ugc">Operation with TwentyTen theme</a></p>
<p>Author info:<br />
Holger Stroeder</p>
<h4>Limitations</h4>
<ul>
<li>Both iomages must have the same size in pixels</li>
<li>Before/After Pictures works only on single posts and pages</li>
</ul>
<h4>Usage</h4>
<ul>
<li>Set the default options on the admin page of the plugin</li>
<li>Write the content of your post other than the images</li>
<li>
<p>Upload the before and after images to wordpress or any other webspace and remember the path/url</p>
</li>
<li>
<p>Switch to ‘Visuell’ mode of the post editor area</p>
</li>
<li>Click ‘Before/After Pictures’ button</li>
<li>Fill in the information in the popup screen (id, before and after image must be set), empty attributes can be deleted</li>
</ul>
<p>or</p>
<ul>
<li>Switch to ‘HTML’ mode of the post editor area</li>
<li>Click ‘Before/After Pictures’ button</li>
<li>
<p>Fill in the information in the editor area (id, before and after image must be set), empty attributes can be deleted</p>
</li>
<li>
<p>Parameters:<br />
[beforeafterpics id=” image_before=” image_after=” animateintro=” introdelay=” introduration=” showfulllinks=” /]</p>
</li>
</ul>
<p>id:            If you want to place multiple [beforeafter] sections on one page, every shortcode must have an unique id. (required if more than one image in the post)<br />
image_before:  path/url to the image file must be set. (required)<br />
image_after:   path/url to the image file must be set. (required)<br />
animateintro:  Whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint. (optional)<br />
introdelay:    If animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image. (optional)<br />
introduration: If animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image. (optional)<br />
showfulllinks: Whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image. (optional)</p>


Before After Pictures

Before After Pictures plugin integrates [jQuery Before/After Plugin](http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ "jQuery Bef …

Before + After Images for Divi vs Before After Pictures