Skip to main content

Image compare

Introduction​

This a fancy interactive module that allows creating of two image comparison, like "before" and "after".

Usage​

"Image compare" module is available in the list of modules. We can add it anytime. It is a composite module, which means it comes with demo static content and some styling.

Content​

Direct children module of "Image compare" must be Template module. Inside Template module we should add two Image modules. The first one should display image "before". The second one should display image "after". This is all setup is needed.

Styling​

The module has many controls grouped by categories: Control, Labels, Smoothing. All of them are available under "Data Settings" tab in the module's settings.

Additionally, since parts of "Image compare" module are modules, they can be styled as any other modules by using UI controls in their settings.

For developers / API​

info
  • HTML tag name: <builderius-image-compare-viewer>
  • Implements 3rd-party script: modified 'Image Compare'
  • Allowed children modules: Template > Image
  • Available since: 0.9.7 PRO

Settings​

The module saves all the settings chosen in visual controls inside of data-settings custom HTML attribute in the form of stringified JSON. These are the default values:

{
            controlColor:    '#FFFFFF',
            controlShadow:   true,
            addCircle:       false,
            addCircleBlur:   true,
            showLabels:      false,
            labelOptions:    {
                before:  'Before',
                after:   'After',
                onHover: false
            },
            smoothing:       true,
            smoothingAmount: 100,
            hoverStart:      false,
            verticalMode:    false,
            startingPoint:   50,
            fluidMode:       false
        }

API docs​

Attributes​

data-settings This attribute expects a stringified JSON object of settings.

Events​

ready (scope: element)​

builderius-image-compare-viewer-ready (scope: window)​

This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:

{ el }

Where el is the reference to the HTML element.

Methods​

reInit​

This method resets and initiates the component.

Demo​

Demo page