imageCompare
Compare two images in one
imageCompare creates an interactive vertical handler bar to compare 2 images for differences. Works also on mobile touch-screen devices!
Installation
Download then install imageCompare with the MODX installer.
Dependencies
imageCompare use jQuery and HammerJs. If needed, all is already included.
imageCompare has been successfully tested with jQuery 2.2.4 & 3.3.1 and is compatible with Bootstrap 3 & 4.
Example
[[imageCompare?
&left=`/assets/components/imagecompare/images/sample_left.jpg`
&right=`/assets/components/imagecompare/images/sample_right.jpg`
&btns=`1`
&labels=`1`
&incJquery=`0`
&incHammerjs=`1`
]]Output
Snippet options
| Option | Values | Default / Notes |
|---|---|---|
| tpl | Template chunk. Default: icDefault. | |
| left | Image path for the left/before side. | |
| right | Image path for the right/after side. | |
| btns | 0|1 | Show/hide the buttons. Default: 0 (hidden). |
| labels | 0|1 | Show/hide the labels. Default: 0 (hidden). |
| incJquery | 0|1 | Include jQuery. Set to 1 if your template/website doesn't use jQuery. Default: 0. |
| incHammerjs | 0|1 | Include HammerJs. Set to 0 if your template already use HammerJs. Default: 1. |
Skins
imageCompare for MODX includes skins to customize the appearance of the separator and handle.
Just add the skin class to .ct-ic in your template chunk.
Available classes:
.skin-default
.skin-round-1
.skin-round-2
.skin-round-3
.skin-square-1
.skin-square-2
.skin-square-3
.skin-square-4
You can easily define new skins in CSS.
Photo credits: Tadayoshi Nakamura, pictures from Arc*cape Project
