Before/After 1.4.1

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 class "plg_content_beforeafter".
The wrapper must contain exactly 2 images, wrapped in <div> tags.
Each of the images must be exactly the same size.
Each of the image tags must have width and height attributes.

Example:
<div class="plg_content_beforeafter"> <div><img src="https://cdn.richeyweb.com/path/to/before.png" alt="before" width="400" height="300" /></div> <div><img src="https://cdn.richeyweb.com/path/to/after.png" alt="after" width="400" height="300" /></div> </div>

As long as that basic structure is in place, the plugin will function properly. Additional classes can be added to the wrapper in order to achieve the desired styling.

Plugin Defaults

The following tab contains the plugin defaults. In order to achieve consistent function throughout your site, you can set defaults so all of your before/after images behave the same way. Each of these defaults can be altered on a per-image (pair) basis.

Overriding the Defaults

Each attribute defined in defaults can be changed on a per image (pair) basis using a data attribute in the wrapper. The data attribute must be named data- followed by a lowercased javascript option name found in the defaults tab.

Example:
<div class="plg_content_beforeafter" data-animateintro="true" data-introdelay="1500" data-introposition="0.25"> ...

Note: The beforeLinkText and afterLinkText can both be overridden with the data attribute. Plugin Defaults for these two settings refer to the primary language translation, which are controlled by the Joomla language manager. Yes, you can override them with data attributes.

onReady

One very nifty piece of the plugin is the ability to trigger a javascript function when the before/after images are ready. This can be a function!

Example:
function(){ /* do a bunch of things */}

HELP

Please report bugs!