Image comparison utility
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
LICENSE
README.md
index.html
package.json
vue-twentytwenty.js
yarn.lock

README.md

TwentyTwenty

npm npm vue2

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:

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/vue@2/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