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.
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>