Image Comparer Plugin

The Image Comparer Plugin for Joomla 4 uses the https://github.com/kylewetton/image-compare-viewer image comparison slider library to display two images side by side with a slider.

It's responsive and lightweight.Download On Github

Examples:

Download WEBP · 79 KBClose

Download WEBP · 41 KBClose

How to use:

First, enable the plugin from Joomla's plugin manager in the backend of your site.

Type the start and end of the shortcode (the word "imgcomparer" with curly braces, the second shortcode has a forward flash at its start) and place two images between them.

If that doesn't make sense, look at this picture:

Download WEBP · 85 KBClose

That's how I produced the above example.

Note that the plugin only loads in articles. It doesn't work in modules or anywhere else.

This works best if you select two images that are the same exact size.

Extra Options

As of version 1.1, I've implemented a few more of the library's features for easy config through Joomla.

You may go to the plugin settings to see these options:

• Slide On Mouse Hover
• • If yes, the users mouse position is tracked and they don't have to click to drag the slider
• Always Label Images
• • If yes, a before/after label will always be shown with each image. If false, it will only be displayed if you set the image's title attribute.
  • To manually label an image, just give it a title when you insert/edit the image in your article editor.
• Slider Color
• • You can pick any color for the slider. For best results, pick a light color.
• Use Circle Slider
• • Puts a little circle around the arrows at the center of the slider, making it slightly more obvious that it's a button you can drag.

Vertical Sliders

I've added the library's vertical slider option.

To make a vertical slider, just add the word vertical to the first shortcode