Joomla plugin that brings before-and-after image sliders to life. Content - Before/After overlays two images, revealing one on the left and the other on the right with an intuitive slider, allowing users to seamlessly explore differences by dragging left or right. Perfect for showcasing transformations, renovations, or creative progress, it’s an ideal addition to articles, category descriptions, modules—anywhere Joomla processes content plugins.
How It Works
With "Content - Before/After," you can implement a comparison slider with minimal effort. Simply apply the correct CSS classes and HTML, and the plugin handles the rest, activating automatically for a smooth, interactive experience. Use it as many times as you need, anywhere on your site, thanks to its lightweight design. Photo and artwork credit goes to Nikos Patsais (Nikos23a) for inspiring this visual delight.
v5.0.3
P
Photo/Artwork credit to Nikos Patsais (Nikos23a)
A Modern, Community-Driven Evolution
Originally built using the CatchMyFame.com Before/After jQuery plugin (versions 1.4.1 and earlier), "Content - Before/After" has evolved with version 5.0.0 and beyond, now powered by a pure JavaScript implementation developed by Paul Brown, available in his GitHub repository. This update eliminates dependencies on third-party jQuery libraries, ensuring faster performance and broader compatibility. However, note that the CatchMyFame jQuery plugin, released under the CC Attribution-NonCommercial-ShareAlike 3.0 Unported license, requires a commercial license from CatchMyFame.com if used on a for-profit site—check with them if you’re using older versions commercially. Several paid Joomla extensions in this category rely on the same licensed JavaScript, so be mindful of licensing requirements.
Flexible and Touch-Friendly
"Content - Before/After" offers default settings in the plugin configuration, but article authors can override these with data attributes for granular control—full instructions are available in the configuration page. Plus, I’ve integrated the Touch-Punch plugin, ensuring seamless touch support for iPads, iPhones, Android tablets, and phones, making it accessible on any device.
A Gift to the Joomla Community
Commissioned by a client who generously waived copyright to benefit the Joomla community, this plugin embodies my passion for free, open tools. As someone familiar with my work, you know I thrive on creating valuable, accessible solutions—and "Content - Before/After" is no exception.
Features
- Versatile Placement: Use anywhere Joomla processes content—articles, modules, or descriptions—unlimited times.
- Seamless Integration: Automatic activation with CSS classes, with HTML fallback for simplicity.
- Customizable Options: Default settings in the plugin, overrideable with data attributes for each slider.
- Touch-Ready: Works flawlessly on touch devices via Touch-Punch integration.
- Modern Performance: Pure JavaScript implementation (v5.0.0+) for speed and compatibility.
Elevate your Joomla site with "Content - Before/After"—the ultimate tool for compelling visual comparisons. Ready to showcase transformations beautifully?
Download the Plugin
Content - Before/After 5.0.36201
Frequently Asked Questions:
How is this free?
Easy. I just don't charge anything for it.
What is the Content - Before/After plugin, and what does it do?
The Content - Before/After plugin is a Joomla extension that creates interactive before-and-after image sliders. It overlays two images, allowing users to drag a slider to compare them, making it ideal for showcasing transformations, renovations, or creative progress in articles, modules, or anywhere Joomla processes content plugins.
Which Joomla versions are supported by this plugin?
The plugin is compatible with Joomla! 3, Joomla! 4, and Joomla! 5, ensuring broad usability across different Joomla installations.
Can I use this plugin on a commercial website?
Yes, but note that versions prior to 5.0.0 use the CatchMyFame.com Before/After jQuery plugin, which requires a commercial license from CatchMyFame.com for for-profit sites. Version 5.0.0 and later use a pure JavaScript implementation, eliminating this licensing requirement.
How do I install the Content - Before/After plugin?
Download the plugin from the RicheyWeb website (search for "Before/After" at richeyweb.com). In your Joomla administrator panel, navigate to Extensions > Manage > Install, select the "Upload Package File" tab, choose the downloaded file, and click "Upload & Install." Then, enable the plugin in the Plugin Manager by searching for "Before/After."
Where can I use the Before/After slider on my Joomla site?
You can use it anywhere Joomla processes content plugins, such as articles, category descriptions, or modules. There’s no limit to how many sliders you can add on a single page.
How do I set up the Before/After slider in my content?
Add a
Can I customize the slider’s appearance or behavior?
Yes, the plugin offers default settings in the configuration panel, which can be overridden using data attributes in the HTML for each slider. Full instructions are available in the plugin’s configuration page.
Does the plugin work on mobile or touch devices?
Yes, the plugin includes Touch-Punch integration, ensuring smooth functionality on touch devices like iPads, iPhones, Android tablets, and phones.
Is the plugin free to use?
Yes, the plugin is free, commissioned by a client who waived copyright to benefit the Joomla community. It’s designed to be an accessible, open tool for all Joomla users.
Why is “spliter” misspelled in the class name?
The misspelling of “image-spliter” originates from the JavaScript author’s naming convention. To maintain compatibility, the plugin retains this spelling in the required CSS class.
What’s different in version 5.0.0 and later?
Version 5.0.0 and beyond use a pure JavaScript implementation developed by Paul Brown, replacing the CatchMyFame jQuery plugin. This improves performance, eliminates jQuery dependencies, and removes the need for a commercial license on for-profit sites.
Where can I find the plugin’s documentation?
The documentation is available on the RicheyWeb website. Visit richeyweb.com, search for "Before/After," and check the plugin’s configuration page for detailed setup and usage instructions.
Do I need coding skills to use this plugin?
Basic HTML knowledge is helpful to set up the slider’s structure, but the plugin automates most of the functionality. The documentation provides clear examples to guide non-technical users.
Can I use multiple sliders on a single page
Yes, the plugin’s lightweight design allows you to add as many sliders as needed on a single page without performance issues.
Who should I contact for support or issues with the plugin?
Visit richeyweb.com for support resources.
