# Content - Before/After - - Joomla! 3 - Joomla! 4 - Joomla! 5 - Joomla! 6 - [ plugin ](/content-tags/plugin) - [ Joomla! 4 ](/content-tags/joomla-4) - [ content ](/content-tags/content) - [ Joomla! 3 ](/content-tags/joomla-3) - [ Joomla! 5 ](/content-tags/joomla-5) - [JED: Content - Before/After](https://extensions.joomla.org/extension/photos-a-images/images/before-after/) 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. Photo/Artwork credit to [Nikos Patsais (Nikos23a)](https://www.deviantart.com/nikos23a/art/Photoshop-retouch-before-and-after-470866447) ![](https://cdn.richeyweb.com/images/articles/beforeafter/before-nikos23a.webp) ![](https://cdn.richeyweb.com/images/articles/beforeafter/after-nikos23a.webp) ## 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 [ Content - Before/After 5.0.46606](/extension-repository/content-beforeafter/plg_content_beforeafter-5.0.4) [ Report a Bug](/bugs) [ Documentation](/software/documentation/content-before-after) ## 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 with the classes plg\_content\_beforeafter and image-spliter, containing two images with classes img-left and img-right. Include a   for the slider handle. Example in the documentation. 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 pageYes, 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. ## 5 Reviews ### Retrieved from JED monthly #### Complete - Unfiltered ### Brilliant Plugin #### 2014-02-19 - Alessandro Bennetti This Before/After feature is great as a plugin and certainly beats only having a module (payment required as well). I have used this on my site and have not had any problems with it at all. Very versatile, great for customers to be able to see how images will look before and after editing. ### Terrific! Thank you #### 2014-09-02 - Maximilian Anton Fuxjaeger This plugin does exactly what it is supposed to and the instructions for installation and configurations are great. I implemented it on a Joomla 3.3 site and it works like a charm! Thank you ### Not working with Joomla 3.4.1 #### 2015-04-29 - Sven FunctionalityI added the code as requested - but the images do not show as class="plg\_content\_beforeafter" height is 0 - so the images are not showing Ease Of UseCan't use itSupportI have contacted the developer through email and his personal website. He did not respond. Documentation Good - if it worked... ### There is a trap here #### 2016-03-04 - Dora Kalesi Functionality After installing the free extension that is posted here the developer from catchmyfame.com asked us to pay him a fee of $250 for this pluginEase Of Use I assume Michael Richey is not aware of that.#### Reply I was not aware of that. The Joomla 5 version uses an open source, pure javascript implementation by Paul Brown. No hidden fees. If I had know that, I would have implemented someone else's before/after code. ### Doesn't work at all #### 2019-03-12 - Wim Guiking Functionality Doesn't work. Ease Of Use PoorSupport ?Documentation moderate - [ email ](mailto:?subject=Content+-+Before%2FAfter&body=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fjoomla%2Fplugins%2Fcontent-beforeafter) - [ facebook ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fjoomla%2Fplugins%2Fcontent-beforeafter) - [ x-twitter ](https://twitter.com/intent/tweet?text=Content+-+Before%2FAfter%3A+https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fjoomla%2Fplugins%2Fcontent-beforeafter) - [ linkedin ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fjoomla%2Fplugins%2Fcontent-beforeafter&title=Content+-+Before%2FAfter&summary=Joomla+plugin+that+brings+before-and-after+image+s...) - [ pinterest ](http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fjoomla%2Fplugins%2Fcontent-beforeafter&media=https%3A%2F%2Fwww.richeyweb.com%2Fimages%2Farticles%2Fbeforeafter%2Fbefore-nikos23a.webp&description=Content+-+Before%2FAfter) [ Previous article: Captcha - HashCash Captcha - HashCash ](/software/joomla/plugins/captcha-hashcash) [ Next article: System - Meta Character Count System - Meta Character Count ](/software/joomla/plugins/system-metacharactercount) ##### We Value Your Privacy We use cookies to enhance your experience and for traffic analysis. By continuing to visit this site you agree to our use of cookies. [Privacy Policy](/privacy-policy) Details ###### Google Tag Manager Items - Ad Storage - Ad User Data - Ad Personalization - Analytics Storage - Functionality Storage - Personalization Storage - Security Storage Decline Accept ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.richeyweb.com/#organization","name":"RicheyWeb","url":"https://www.richeyweb.com/","logo":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/logo/richeyweb.svg","contentUrl":"https://www.richeyweb.com/images/logo/richeyweb.svg","width":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"@id":"https://www.richeyweb.com/#logo"},"image":{"@id":"https://www.richeyweb.com/#logo"},"sameAs":["https://x.com/ComRicheyweb","https://www.facebook.com/RicheyWebDev/","https://www.youtube.com/channel/UCxnVG8BwOvQRO7hVqNX7T2g","https://community.joomla.org/service-providers-directory/listings/115:richeyweb.html"],"description":"RicheyWeb is a custom software developer specializing in Joomla extensions.","ContactPoint":[{"@type":"ContactPoint","url":"https://www.richeyweb.com/contact-us","telephone":"903-873-8460","contactType":"Owner/Administrator","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"},{"@type":"ContactPoint","url":"https://www.richeyweb.com/bugs","telephone":"903-873-8460","contactType":"Technical Support","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"}],"knowsAbout":["Computer programming",{"@type":"Thing","name":"Computer programming","sameAs":["https://en.wikipedia.org/wiki/Computer_programming","https://www.wikidata.org/wiki/Q80006","https://g.co/kg/m/01mf_"]},"PHP",{"@type":"Thing","name":"PHP","sameAs":["https://en.wikipedia.org/wiki/PHP","https://www.wikidata.org/wiki/Q59","https://g.co/kg/m/060kv"]},"JavaScript",{"@type":"Thing","name":"JavaScript","sameAs":["https://en.wikipedia.org/wiki/JavaScript","https://www.wikidata.org/wiki/Q2005","https://g.co/kg/m/02p97"]},"arduino","Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"White hat",{"@type":"Thing","name":"White hat","sameAs":["https://en.wikipedia.org/wiki/White_hat_(computer_security)","https://www.wikidata.org/wiki/Q7995625","https://g.co/kg/m/03ns_5"]},"Search engine optimization",{"@type":"Thing","name":"Search engine optimization","sameAs":["https://en.wikipedia.org/wiki/Search_engine_optimization","https://www.wikidata.org/wiki/Q180711","https://g.co/kg/m/019qb_"]},"Search engine marketing",{"@type":"Thing","name":"Search engine marketing","sameAs":["https://en.wikipedia.org/wiki/Search_engine_marketing","https://www.wikidata.org/wiki/Q846132","https://g.co/kg/m/06mw8r"]},"Digital marketing",{"@type":"Thing","name":"Digital marketing","sameAs":["https://en.wikipedia.org/wiki/Digital_marketing","https://www.wikidata.org/wiki/Q1323528","https://g.co/kg/g/122hcnps"]},"Web hosting service",{"@type":"Thing","name":"Web hosting service","sameAs":["https://en.wikipedia.org/wiki/Web_hosting_service","https://www.wikidata.org/wiki/Q5892272","https://g.co/kg/m/014pz4"]},"Email hosting service",{"@type":"Thing","name":"Email hosting service","sameAs":["https://en.wikipedia.org/wiki/Email_hosting_service","https://www.wikidata.org/wiki/Q5368818","https://g.co/kg/m/09w60m"]},"Internet hosting service",{"@type":"Thing","name":"Internet hosting service","sameAs":["https://en.wikipedia.org/wiki/Internet_hosting_service","https://www.wikidata.org/wiki/Q1210425","https://g.co/kg/m/09w5yw"]},"Virtual hosting",{"@type":"Thing","name":"Virtual hosting","sameAs":["https://en.wikipedia.org/wiki/Virtual_hosting","https://www.wikidata.org/wiki/Q588365","https://g.co/kg/m/024mvh"]},"Web performance",{"@type":"Thing","name":"Web performance","sameAs":["https://en.wikipedia.org/wiki/Web_performance","https://www.wikidata.org/wiki/Q7978612","https://g.co/kg/m/0gfj3f1"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"General Data Protection Regulation",{"@type":"Thing","name":"General Data Protection Regulation","sameAs":["https://en.wikipedia.org/wiki/General_Data_Protection_Regulation","https://www.wikidata.org/wiki/Q1172506","https://g.co/kg/m/0pk_7xs"]},"SERP",{"@type":"Thing","name":"SERP","sameAs":["https://en.wikipedia.org/wiki/SERP","https://www.wikidata.org/wiki/Q2205811","https://g.co/kg/g/11c5szp7kc"]},"Artificial intelligence",{"@type":"Thing","name":"Artificial intelligence","sameAs":["https://en.wikipedia.org/wiki/Artificial_intelligence","https://www.wikidata.org/wiki/Q11660","https://g.co/kg/m/0mkz"]},"Prompt engineering",{"@type":"Thing","name":"Prompt engineering","sameAs":["https://en.wikipedia.org/wiki/Prompt_engineering","https://www.wikidata.org/wiki/Q108941486","https://g.co/kg/g/11p6kpgt_n"]},"E-learning",{"@type":"Thing","name":"E-learning","sameAs":["https://en.wikipedia.org/wiki/E-learning_(theory)","https://www.wikidata.org/wiki/Q182250","https://g.co/kg/g/122czm1f"]},"Sharable Content Object Reference Model",{"@type":"Thing","name":"Sharable Content Object Reference Model","sameAs":["https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model","https://www.wikidata.org/wiki/Q827811","https://g.co/kg/m/06_40"]},"Experience API",{"@type":"Thing","name":"Experience API","sameAs":["https://en.wikipedia.org/wiki/Experience_API","https://www.wikidata.org/wiki/Q7807728","https://g.co/kg/g/1yw9ktxr8"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]},"Nginx",{"@type":"Thing","name":"Nginx","sameAs":["https://en.wikipedia.org/wiki/Nginx","https://www.wikidata.org/wiki/Q306144","https://g.co/kg/m/02qft91"]},"MySQL",{"@type":"Thing","name":"MySQL","sameAs":["https://en.wikipedia.org/wiki/MySQL","https://www.wikidata.org/wiki/Q850","https://g.co/kg/m/04y3k"]}],"areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"memberOf":["Mensa International",{"@type":"Organization","name":"Mensa International","sameAs":["https://en.wikipedia.org/wiki/Mensa_International","https://www.wikidata.org/wiki/Q184194","https://g.co/kg/m/0140pf"]},"National Rifle Association",{"@type":"Organization","name":"National Rifle Association","sameAs":["https://en.wikipedia.org/wiki/National_Rifle_Association","https://www.wikidata.org/wiki/Q863259","https://g.co/kg/m/0j6f9"]},"CompTIA",{"@type":"Organization","name":"CompTIA","sameAs":["https://en.wikipedia.org/wiki/CompTIA","https://www.wikidata.org/wiki/Q597534","https://g.co/kg/m/040shq"]},"ISFCE LLC",{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://isfce.com","https://g.co/kg/g/11wxm5r0rg"]}],"hasCredential":[{"@type":"EducationalOccupationalCredential","name":"Joomla 3 Certified Administrator","credentialCategory":"Certification","description":"Administrator Exam is the first available Joomla! certification exam","recognizedBy":{"@type":"Organization","name":"Open Source Matters, Inc.","sameAs":["https://en.wikipedia.org/wiki/Open_Source_Matters,_Inc.","https://g.co/kg/g/11f00wvjhz"]},"url":"https://certification.joomla.org/certified-user-directory/michael-richey","about":["Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/badge.webp","contentUrl":"https://www.richeyweb.com/images/contact/badge.webp","width":{"@type":"QuantitativeValue","value":300,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":86,"unitCode":"PX"},"caption":"Joomla 3 Certified Administrator"}},{"@type":"EducationalOccupationalCredential","name":"Certified Computer Examiner","credentialCategory":"Certification","description":"Internationally recognized computer forensics certifiecation","recognizedBy":{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://en.wikipedia.org/wiki/ISFCE_LLC","https://g.co/kg/g/11wxm5r0rg"]},"url":"https://isfce.com/","about":["Digital forensics",{"@type":"Thing","name":"Digital forensics","sameAs":["https://en.wikipedia.org/wiki/Digital_forensics","https://www.wikidata.org/wiki/Q3246940","https://g.co/kg/m/0cnxzfx"]},"Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"Mobile device forensics",{"@type":"Thing","name":"Mobile device forensics","sameAs":["https://en.wikipedia.org/wiki/Mobile_device_forensics","https://www.wikidata.org/wiki/Q6887097","https://g.co/kg/m/06zp3tp"]},"Network forensics",{"@type":"Thing","name":"Network forensics","sameAs":["https://en.wikipedia.org/wiki/Network_forensics","https://www.wikidata.org/wiki/Q7001032","https://g.co/kg/m/05pb280"]},"Database forensics",{"@type":"Thing","name":"Database forensics","sameAs":["https://en.wikipedia.org/wiki/Database_forensics","https://www.wikidata.org/wiki/Q5227405","https://g.co/kg/m/0cgqsy"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/isfce-cce.webp","contentUrl":"https://www.richeyweb.com/images/contact/isfce-cce.webp","width":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"caption":"Certified Computer Examiner"}}],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Web Services","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Search Engine Optimization"}}]}},{"@type":"WebSite","@id":"https://www.richeyweb.com/#website","url":"https://www.richeyweb.com/","name":"RicheyWeb","publisher":{"@id":"https://www.richeyweb.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.richeyweb.com/search?q={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string","valueMaxLength":256,"valueMinLength":2,"valuePattern":"^[A-Za-z0-9\\s]+$"}},"creator":{"@id":"https://www.richeyweb.com/#organization"},"copyrightHolder":{"@id":"https://www.richeyweb.com/#organization"}},{"@type":"WebPage","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#webpage","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter","name":"Content - Before/After","description":"Create stunning before/after sliders with Content - Before/After for Joomla! Easy, touch-friendly, unlimited use—download now!","isPartOf":{"@id":"https://www.richeyweb.com/#website"},"about":{"@id":"https://www.richeyweb.com/#organization"},"inLanguage":"en-GB"},{"@type":"SoftwareApplication","name":"Content - Before/After","operatingSystem":"Joomla!","applicationCategory":"Joomla Extension","aggregateRating":{"@type":"AggregateRating","ratingValue":"4","bestRating":"5","ratingCount":"5"},"offers":{"@type":"Offer","priceCurrency":"USD"},"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter/#softwareapplication","isPartOf":{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#webpage"},"hasPart":[{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-how-it-works_2_1"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-a-modern-community-driven-evolution_2_2"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-flexible-and-touch-friendly_2_3"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-a-gift-to-the-joomla-community_2_4"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-features_2_5"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-download_2_6"},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#faqpage"}]},{"@type":"FAQPage","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#faqpage","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter","isPartOf":{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#article"},"mainEntityOfPage":{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#webpage"},"mainEntity":[{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-0","name":"How is this free?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-0","text":"Easy. I just don't charge anything for it."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-1","name":"What is the Content - Before/After plugin, and what does it do?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-1","text":"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."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-2","name":"Which Joomla versions are supported by this plugin?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-2","text":"The plugin is compatible with Joomla! 3, Joomla! 4, and Joomla! 5, ensuring broad usability across different Joomla installations."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-3","name":"Can I use this plugin on a commercial website?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-3","text":"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."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-4","name":"How do I install the Content - Before/After plugin?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-4","text":"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.\""}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-5","name":"Where can I use the Before/After slider on my Joomla site?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-5","text":"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."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-6","name":"How do I set up the Before/After slider in my content?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-6","text":"Add a with the classes plg_content_beforeafter and image-spliter, containing two images with classes img-left and img-right. Include a   for the slider handle. Example in the documentation."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-7","name":"Can I customize the slider’s appearance or behavior?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-7","text":"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.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-8","name":"Does the plugin work on mobile or touch devices?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-8","text":"Yes, the plugin includes Touch-Punch integration, ensuring smooth functionality on touch devices like iPads, iPhones, Android tablets, and phones.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-9","name":"Is the plugin free to use?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-9","text":"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.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-10","name":"Why is “spliter” misspelled in the class name?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-10","text":"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.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-11","name":"What’s different in version 5.0.0 and later?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-11","text":"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.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-12","name":"Where can I find the plugin’s documentation?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-12","text":"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.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-13","name":"Do I need coding skills to use this plugin?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-13","text":"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."}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-14","name":"Can I use multiple sliders on a single page","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-14","text":"Yes, the plugin’s lightweight design allows you to add as many sliders as needed on a single page without performance issues.\r\n"}},{"@type":"Question","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#question-15","name":"Who should I contact for support or issues with the plugin?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#answer-15","text":"Visit richeyweb.com for support resources."}}]},{"@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex","@type":"ItemList","name":"Content - Before/After","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-how-it-works_2_1","name":"How It Works","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-how-it-works_2_1"}},{"@type":"ListItem","position":2,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-a-modern-community-driven-evolution_2_2","name":"A Modern, Community-Driven Evolution","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-a-modern-community-driven-evolution_2_2"}},{"@type":"ListItem","position":3,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-flexible-and-touch-friendly_2_3","name":"Flexible and Touch-Friendly","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-flexible-and-touch-friendly_2_3"}},{"@type":"ListItem","position":4,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-a-gift-to-the-joomla-community_2_4","name":"A Gift to the Joomla Community","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-a-gift-to-the-joomla-community_2_4"}},{"@type":"ListItem","position":5,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-features_2_5","name":"Features","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-features_2_5"}},{"@type":"ListItem","position":6,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#articleindex-toc-download_2_6","name":"Download","url":"https://www.richeyweb.com/software/joomla/plugins/content-beforeafter#toc-download_2_6"}}]}]} ```