Image Comparison Slider
A content plugin to interactively compare two images visually.
Example
In your content, simply include two images inside an element with the comparison-slider class:
Tip! Use the {{path}} variable to include a dynamic file-path to the current folder.
Advanced Settings
x3-style-frame Include this class to display a frame around the images.data-orientation Set "horizontal" (default) or "vertical" orientation for the slider.data-offset Set initial offset position of the slider to any number between 0.0 and 1.0 (default 0.5).data-before Set the "Before" text that displays on mouse hover.data-after Set the "After" text that displays on mouse hover.data-hover Enable or disable the before-after mouse hover effect.
Information
Identical Image Dimensions
For this plugin to work properly, you need to include two different images with identical dimensions.
Image Sizes
Unlike the X3 gallery module, this plugin will not serve resized images depending on device and screen size. It is therefore recommended that you use a sensible image-size, for example 1024 or 1280 px.
Plugin Display Width
Since the X3 layout is responsive by default, images will automatically scale to the width of the context module. This also means that images will scale to fit the screen width on small devices.
Hide Page Gallery
If you are displaying images from the current folder, you may want to prevent the same images from also displaying in the page's gallery module. Go to page › settings › gallery, and check "Hide Gallery Module".
Plugin loaded On-Demand
The Javascript- and CSS required for the comparison-slider plugin, are loaded "on-demand" once the element is detected. This means it could take 1-2 seconds before the plugin initiates on first page visit.