Easy Image Compare 1.0 is a site module for Joomla 4, 5, and 6 that shows an interactive before/after image comparison. Visitors drag, hover, or click to reveal the change. It is built for renovations, photo editing, beauty results, real estate, and design portfolios.

Version 1.0 uses a modern Joomla stack: service provider, dispatcher, namespaces, Web Asset Manager assets, and vanilla JavaScript. The compare uses full-size image layers with clip-path, so the split is correct from the first paint.

Highlights

• Horizontal and vertical orientation
• Drag, hover, or click / tap interaction
• Five handle styles and five visual themes
• Optional auto-play and intro peek
• Keyboard accessible with Home / End / arrow keys
• Labels, aspect ratios, colours, and scoped extra CSS
• Joomla 4 / 5 / 6 compatible, no jQuery

Download

Email: After purchasing from our store, you receive an email with the download link.

Store: You can also download from the Downloads section. Use the same email address you used when purchasing.

Package: EasyImageCompare_UNZIP.zip

Unzip the Package

• Unzip EasyImageCompare_UNZIP.zip.
• Inside you will find:
  • mod_easy_image_compare_1.0.0.zip — install this for Joomla 4, 5 & 6
  • ReadMe.txt — notes for the current version

Install

1. Open System > Install > Extensions.
2. Upload mod_easy_image_compare_1.0.0.zip.
3. Open Content > Site Modules > New and select Easy Image Compare.
4. On the Images tab, choose Before and After images.
5. Set Layout, Behavior, and Appearance, assign pages, publish, then clear cache.

Requirements

• Joomla 4, 5, or 6
• PHP 8.1 or later recommended
• Two images (matching dimensions work best)

Images

• Before Image: the starting / original state
• Before Alt Text: accessibility text for the before image
• After Image: the updated / finished state
• After Alt Text: accessibility text for the after image

Pick both images from the Media Manager. Matching width and height give the cleanest slider. With a fixed aspect ratio, Object Fit (Cover, Contain, or Fill) controls how both images crop.

Labels

• Show Labels (default: Yes)
• Before Label (default: Before)
• After Label (default: After)
• Label Position: Corners, Top, or Bottom

Content

• Eyebrow: small label above the headline
• Headline: main title above the slider
• Description: optional supporting text (safe HTML allowed)

• Orientation (default: Horizontal): Horizontal or Vertical
• Interaction (default: Drag): Drag, Hover, or Click / tap. On touch devices, Hover falls back to drag.
• Starting Position (%) (default: 50): initial divider position from 0 to 100
• Handle Style (default: Circle): Circle, Diamond, Line, Arrows, Pill
• Theme (default: Classic): Classic, Soft, Bold, Minimal, Glass
• Aspect Ratio (default: Auto): Auto (from image), 16:9, 4:3, 1:1, 3:2, or 21:9
• Max Width (default: 900px): for example 960px or 100%
• Alignment (default: Center): Left, Center, Right
• Object Fit (default: Cover): Cover, Contain, or Fill when a fixed aspect ratio is used

• Auto-play (default: No): gently sweeps the divider until the visitor interacts
• Auto-play Cycle (ms) (default: 4000): time for one direction of the sweep
• Intro Peek (default: No): short nudge animation when the module enters the viewport. Leave off for a stable first paint.
• Keyboard Control (default: Yes): arrow keys move the divider; Home and End jump to 0% and 100%
• Keyboard Step (%) (default: 5): how far each arrow key moves the divider

Auto-play and intro peek respect prefers-reduced-motion and stop as soon as the visitor takes control.

• Handle Color (default: #ffffff)
• Handle Accent (default: #0d9488): arrow / highlight colour
• Divider Color (default: #ffffff)
• Label Background (default: rgba(15,23,42,0.72))
• Label Text (default: #ffffff)
• Headline Color (default: #0f172a)
• Description Color (default: #475569)
• Border Radius (px) (default: 16)
• Drop Shadow (default: Yes)

Invalid colour values fall back to safe defaults.

• Layout: alternate module layout when overrides exist
• Module Class Suffix: extra CSS classes on the root element
• Extra CSS: optional rules for this module instance. Unsafe patterns such as script tags, expression(), javascript:, and @import are stripped.

Assets load through the Web Asset Manager as versioned CSS and JavaScript. Multiple Easy Image Compare modules can run on the same page independently.

Images

• Before Image
• Before Alt Text
• After Image
• After Alt Text

Labels

• Show Labels
• Before Label
• After Label
• Label Position

Content

• Eyebrow
• Headline
• Description

Layout

• Orientation
• Interaction
• Starting Position (%)
• Handle Style
• Theme
• Aspect Ratio
• Max Width
• Alignment
• Object Fit

Behavior

• Auto-play
• Auto-play Cycle (ms)
• Intro Peek
• Keyboard Control
• Keyboard Step (%)

Appearance

• Handle Color / Accent
• Divider Color
• Label Background / Text
• Headline / Description Color
• Border Radius
• Drop Shadow

Advanced

• Layout
• Module Class Suffix
• Extra CSS

• Nothing appears on the page

  • Select both a Before and an After image. Assign the module to the correct menu items and publish it. Clear Joomla and browser cache.

• Images look cropped oddly

  • Use matching image dimensions, or set Aspect Ratio and choose Object Fit Cover / Contain to control the crop.

• Handle looks stretched

  • Upgrade to the latest 1.0 package and clear cache. Confirm assets load as easy-image-compare.css?1.0.2 (or newer) and easy-image-compare.js?1.0.2.

• Divider jumps on load

  • Leave Intro Peek set to No. Version 1.0 uses clip-path so the split stays at the Starting Position from first paint.

• Hover does nothing on a phone

  • Expected. On touch devices, Hover falls back to drag. Use Drag or Click / tap for mobile-first layouts.

• Old assets remain

  • Clear Joomla and browser cache after upgrade. Hard-refresh the front end.

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1 or later is recommended.

• Do before and after images need the same size?

  • Matching dimensions look best. Fixed aspect ratios use Object Fit so both sides crop consistently.

• Can I place several compares on one page?

  • Yes. Each module instance runs independently.

• Does it require jQuery?

  • No. Easy Image Compare uses vanilla JavaScript and the Web Asset Manager.

• What is the customer download package?

  • EasyImageCompare_UNZIP.zip. Unzip it, then install mod_easy_image_compare_1.0.0.zip.

• Where can I get help?

  • Visit support.joomlax.com.