Before After Images Module

Purchase link: https://extensions.siberiancms.com/downloads/before-after-image-slider/

This module allows you to compare two images visually. There are many use case like…

  • Photo comparison: Photographer can display their photo editing skills by putting before and after photos.
  • Product comparison: Compare two product images by colors, design etc.
  • Renovation comparison: For example home / office renovation etc.
  • Display two stages of transformation: Before & after hair-style, weight loss, medical surgery etc.

App Screenshots:

Configuration options:

  • Before & After Images URL
  • Slider type: Horizontal & Vertical
  • Separator color & initial position
  • Before & After text labels
  • Labels color, background color & position
  • Description text

Editor screen:

Notes:

  • You have to use image URLs, there’s no any image upload functionalities in this module. (Siberian image upload form element requires to specify the fixed size image which doesn’t suit in this module that’s why we have implemented image URL.) You can use our Editor Image Uploader module for quick image upload inside your siberian editor.
  • For colors, you can use any valid RGB, RGBA or HEX color code format.
  • You can create a single slider in a single instance of this module. However you can add multiple instances of this module into your app.
  • You must have to reload the feature page (after saving a form) to see the changes in a right side editor previewer.

Module Demo:

Visit: https://appzadmin.com and login with below details:

Email: demo@demo.com
Password: pwademo123

After a login, open any app and go to Features page and add BA Images feature to your app.

Demo images:

Before image: https://i.imgur.com/dlPMsw3.jpg

After image: https://i.imgur.com/K6bE4au.jpg