Content - Before/After

Extension Page: Content - Before/After

5.0.3 Overview

Based on the wildly popular CatchMyFame.com Before/After jQuery plugin, the Joomla Before/After plugin provides 100% of the functionality in a non-commercial content plugin.

Use it anywhere you want, as many times as you want. In articles, category descriptions, modules - anywhere Joomla processes content plugins.

Note: The CatchMyFame.com Before/After jQuery plugin is released under the CC Attribution-NonCommercial-ShareAlike 3.0 Unported license. If using this plugin on a commercial site, a license must be purchased from CatchMyFame.com. Several other paid extensions in this category use the same CC licensed javascript - and even though you pay for the Joomla extension, you still have to license it for commercial use with CatchMyFame.com.

The plugin provides default settings, plus the article author can override each of the default settings in the image wrapper using data attributes. Full instructions are in the plugin configuration page. Additionally, I've implemented the Touch-Punch plugin, so this works on touch devices such as iPad, iPhone and Android tablets and phones.

I wrote this on commission, and my client waived his option for copyright because he believed as I do - that this plugin will benefit the Joomla community. Anyone who is familiar with me or my extensions knows that I love free.

Installation

Download Before/After from the RicheyWeb download page.
- This page will remain unlinked, as the link may change in the future. Visit http://www.richeyweb.com and use the search feature - search for "Before/After".
In Joomla /administrator, go to the "Extensions" menu, the "Manage" sub-menu, and the "Install" sub-menu.
Select the "Upload Package File" tab
Press the "Choose File" button to browse your system and locate the plugin file you downloaded
Press the "Upload & Install" button

At this point, the extension is installed but not enabled. You can find the plugin by going to the Extensions menu and selecting "Plugins". When in the plugin manager, search for "Before/After".

Configuration

Joomla implementation of the CatchMyFame.com jQuery Before/After plugin.

HTML Structure

There are several requirements for the HTML before/after structures for this plugin to operate correctly.

The outer wrapper must have the classes "plg_content_beforeafter" and "image-spliter".
- Yes, I know "spliter" is misspelled, that's how the JS author spelled it, and I didn't want to make too many changes to it.
The wrapper must contain exactly 2 images, with the classes "img-left" and "img-right".

Example:
<div class="plg_content_beforeafter image-spliter">
<div class="mover"> </div>
<img class="img-left" src="https://cdn.richeyweb.com/path/to/before.png">
<img class="img-right" src="https://cdn.richeyweb.com/path/to/after.png">
</div>

Documentation