A small component to quickly let users see the differences between 2 images

TwentyTwenty Image comparison component, works with Vue.js 2.x A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's TwentyTwenty plugin. Live Demo https://mhayes.github.io/vue-twentytwenty/ GitHub

Github Repo

TwentyTwenty

A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's TwentyTwenty plugin.

Live Demo

Installation

$ npm install vue-twentytwenty --save

Or download the latest release using:

https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.js
https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css

Usage

vue-twentytwenty is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, TwentyTwenty will be registered as a global variable.

ES6

import TwentyTwenty from 'vue-twentytwenty';

export default {
  // ...
  components: {
    TwentyTwenty
  }
  // ...
};

It can then be used like so:

<TwentyTwenty
  before="//placehold.it/600x200/E8117F/FFFFFF"
  after="//placehold.it/600x200/CCCCCC/FFFFFF" />

CommonJS

var Vue = require('vue')
var TwentyTwenty = require('vue-twentytwenty')

var YourComponent = Vue.extend({
  // ...
  components: {
    'twentytwenty': TwentyTwenty
  },
  // ...
})

Browser

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css" />
</head>
<body>
  <div id="app">
    <TwentyTwenty
      before="//placehold.it/600x200/E8117F/FFFFFF"
      after="//placehold.it/600x200/CCCCCC/FFFFFF" />
  </div>
  <script src="//unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.js"></script>
  <script>
  new Vue({
    el: '#app'
  })
  </script>
</body>
</html>

Props

Props	Description	Required	Type	Default
before	URL of before image	true	String	-
beforeLabel	When hovering over image what label should show up over before image	false	String	-
after	URL of after image	true	String	-
afterLabel	When hovering over image what label should show up over after image	false	String	-
offset	How far from the left the slider should be on load (between 0 and 1)	false	Number	0.5

Usage

Simple

<template>
  <TwentyTwenty
    before="//placehold.it/600x200/E8117F/FFFFFF"
    after="//placehold.it/600x200/CCCCCC/FFFFFF" />
</template>

<script>
import TwentyTwenty from 'vue-twentytwenty';

export default {
  components: {
    TwentyTwenty
  }
};
</script>

Advanced

<template>
  <TwentyTwenty
    offset="0.7"
    before="//placehold.it/600x200/E8117F/FFFFFF"
    beforeLabel="BEFORE"
    after="//placehold.it/600x200/CCCCCC/FFFFFF"
    afterLabel="AFTER" />
</template>

<script>
import TwentyTwenty from 'vue-twentytwenty';

export default {
  components: {
    TwentyTwenty
  }
};
</script>

Publish

From a clean repository (no pending changes) run the following:

yarn version
git push && git push --tags
yarn run build
yarn publish

Github Repository

Tags: #VueJs #Miscellaneous #Images