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

  1. 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".
  2. In Joomla /administrator, go to the "Extensions" menu, the "Manage" sub-menu, and the "Install" sub-menu.
  3. Select the "Upload Package File" tab
  4. Press the "Choose File" button to browse your system and locate the plugin file you downloaded
  5. 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.

  1. 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.
  2. 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">&nbsp;</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>

Why is this software free?

I’m ditching the freemium game and giving this software to the Joomla crowd for free. It’s a nod to “Jumla”—Swahili for “all together”—because fragmentation sucks, and I’d rather focus on innovation and paid gigs. Use it, build with it, and if you need custom work, I’m super into that.

What's The Catch?

There isn’t one! I’m all about building tools that empower the Joomla community and spark creativity. This software’s free because I’d rather see it in your hands - fueling awesome projects. If you really feel like paying something, I’d appreciate a review in the Joomla Extension Directory—your feedback means a lot!