image-before-after

Sometimes you want to be able to compare two images, showing the before and after version of the image.

Say you have spend 30 minutes in Snapseed producing a beautifully manipulated version of the original raw image, you would like to show the world the result (after) image and the original (before image on top of each other, letting the visitor drag over the image and instantly see the difference.

Demo

You can try out the javascript class version at codepen.

Installation

Using NPM: npm install image-before-after

Documentation

There will be these versions of the component:

• Javacript Class based
• Webcomponent: <image-before-after />

Using it can be seen here

Vanilla JS

To use it you should new the class ImageBeforeAfter with these parameters:

| Parameter | required | Type | Description | | --------- | -------- | ------------------------- | ------------------------------------------------------------------ | | selector | yes | CSS selector string | A CSS selector to an element you want to add the functionallity to | | before | no | string | URL to the before image | | after | no | string | URL to the after image | | text | no | string | A text to show on top of the images | | width | no | valid css width or number | The width you want the compoment to be |

Simply import the component and inserting it into the html element with the class IBA:

HTML

<div class="IBA"></div>

Javascript

<script type="text/javascript">
const before = 'https://dummyimage.com/600x400/000/fff.png';
const after = 'https://dummyimage.com/600x400/ffffff/000.png';

const myIBA = new ImageBeforeAfter('.IBA', before, after, 'Inverted example');
</script>

Use webcomponent/CustomElement in a HTML page

The webcomponent or customElement <imgage-before-after /> can be easily used in any modern browser, simply by importing the code like this:

import imageBeforeAfter from "https://cdn.skypack.dev/[email protected]";

After this your browser knows about the new HTML element, or tag: image-before-after and you simply can use it as any other native HTML element.

You can see an example CustomEement image-before-after

Angular

See running demo on Stackblitz.com.

Add the package to your project:

npm install image-before-after

In the main.ts add a reference to the package:

import 'image-before-after';

This will allow you to use the customElement anywhere in your project.

In the 'app.module.ts':

Add the CUSTOM_ELEMENTS_SCHEMA from the @angular/core and add it to the scemas in the @NgModule

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Contributing

You are welcome to report Issues and add feature request.

License

Image-before-after is ISC licenced