Image Compare Viewer

M.Muzammil

30 Apr, 2020

<p class="text-xs text-gray-600 mb-2">
          <span class="font-bold text-gray-700">JavaScript</span>
          <a class="text-indigo-500 font-medium" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js" target="_blank">https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js</a>
        </p>
        <p class="text-xs text-gray-600 mb-12">
          <span class="font-bold text-gray-700">CSS</span>
          <a class="text-indigo-500 font-medium" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css" target="_blank">https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css</a>
        </p>

<h3 class="uppercase mb-4 tracking-wide text-xs font-bold text-gray-700">Using WordPress?</h3>
        <p class="text-xs text-gray-600 mb-12 text-gray-700">Here's a <a class="text-indigo-500 font-medium" href="https://wordpress.org/plugins/modern-comparison-slider/" target="_blank">ready-to-use WordPress plugin</a></p>

<h3 class="uppercase mb-4 tracking-wide text-xs font-bold text-gray-700">Great customization options</h3>
      
      <div class="image-compare shadow-md rounded mb-16"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-3.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-3.jpg" alt=""></div>
      <div class="image-compare shadow-md rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-1.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-1.jpg" alt=""></div>
      <div class="mb-16" id="anc_2"></div>
      <h2 class="text-gray-700 mb-8 tracking-wide uppercase text-lg font-bold">How to use</h2>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">HTML</h3>
      <p class="mb-8 text-sm text-gray-700"><span class="font-bold">Image Compare Viewer</span> is easy to use. The HTML is as simple as adding two images into a containing parent. The parent will need an ID or class name (handy for multiple viewers on a single page).</p>
      <pre class="mb-16"><code class="html"><div id="image-compare">
  <img src="path/to/before.jpg" alt="" />
  <img src="path/to/after.jpg" alt="" />
</div></code></pre>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">CSS</h3>
      <p class="mb-12 text-sm text-gray-700">
          If you're using NPM, the CSS is found at
          <span class="inline-block font-medium text-indigo-500"
            >"node_modules/image-compare-viewer/src/styles/index.scss"</span
          >
          or
          <span class="inline-block font-medium text-indigo-500"
            >"node_modules/image-compare-viewer/dist/image-compare-viewer.min.css"</span
          >
        </p>
      <h3 class="uppercase mb-4 tracking-wide text-sm font-bold text-blue-500">Javascript</h3>
      <h3 class="uppercase mb-4 tracking-wide text-xs font-bold text-gray-700">Importing</h3>
      <pre class="mb-8"><code class="javascript">import ImageCompare from "image-compare-viewer";</code></pre>
      <h3 class="uppercase tracking-wide text-xs font-bold text-gray-700">A single viewer?</h3>
      <p class="text-xs mb-4 text-gray-700 font-medium">1. Reference <span class="text-blue-300 font-normal">></span> 2. Mount...</p>
      <pre class="mb-8"><code class="javascript">const element = document.getElementById("image-compare");
  
const viewer = new ImageCompare(element).mount();</code></pre>
      <h3 class="uppercase tracking-wide text-xs font-bold text-gray-700">Multiple viewers?</h3>
      <p class="text-xs mb-4 text-gray-700 font-medium">1. Collect <span class="text-blue-300 font-normal">></span> 2. Loop <span class="text-blue-300 font-normal">></span> 3. Mount...</p>
      <pre><code class="javascript">const viewers = document.querySelectorAll(".image-compare");
  
viewers.forEach((element) => {
  let view = new ImageCompare(element).mount();
});</code></pre>
      <div class="mb-12" id="anc_3"></div>
      <h2 class="text-gray-700 mb-8 tracking-wide uppercase text-lg font-bold">Options</h2>
      <p class="mb-8 text-sm text-gray-700">
          The options object below shows the defaults of all options. All
          options are used in the examples.
        </p>
        <div
          class="border-l-2 border-orange-500 text-sm mb-4 p-8 text-orange-800"
        >
          <span class="font-bold">smoothing</span> and
          <span class="font-bold">smoothingAmount</span> are currently set to
          automatically disable in Safari. This will remain until a browser bug
          is resolved.
        </div>
      <pre><code class="javascript">...
  
// Defaults
const options = {
  controlColor: "#FFFFFF",
  controlShadow: true,
  addCircle: false,
  addCircleBlur: true,
  smoothing: true,
  smoothingAmount: 100,
  hoverStart: false,
  verticalMode: false,
  startingPoint: 50,
  fluidMode: false
};
  
// Add your options object as the second argument
const viewer = new ImageCompare(element, options).mount();</code></pre>
      <div class="mb-12" id="anc_4"></div>
      <h2 class="text-gray-700 mb-8 tracking-wide uppercase text-lg font-bold">Examples</h2>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Default</h3>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-4.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-4.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">UI Theme options</h3>
      <pre class="mb-4"><code class="javascript">{
  controlColor: "#667eea",
  controlShadow: false,
  addCircle: true,
  addCircleBlur: true // default
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-3.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-3.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Disable Smoothing</h3>
      <p class="mb-8 text-sm text-gray-700">Smoothing is automatically disabled on touch enabled screens.</p>
      <pre class="mb-4"><code class="javascript">{
  smoothing: false
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-2.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-2.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Increase Smoothing</h3>
      <p class="mb-8 text-sm text-gray-700">Milliseconds – a higher number means more dampening</p>
      <pre class="mb-4"><code class="javascript">{
  smoothingAmount: 300
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-2.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-2.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Start on hover</h3>
      <p class="mb-8 text-sm text-gray-700">Clicking will activate manual control.</p>
      <pre class="mb-4"><code class="javascript">{
  hoverStart: true
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-9.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-9.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Vertical Mode</h3>
      <div class="border-l-2 border-orange-500 text-sm mb-4 p-8 text-orange-800">Vertical Mode is a work in progress, the issue is that Safari on iOS doesn't have any way to lock down the window scrolling when the user drags the viewer. While its available to use now, keep and eye out on future updates. Pull requests are welcome!</div>
      <pre class="mb-4"><code class="javascript">{
  verticalMode: true
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-6.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-6.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Starting Point</h3>
      <p class="mb-8 text-sm text-gray-700">The percentage to show of the <span class="italic">before</span> image.</p>
      <pre class="mb-4"><code class="javascript">{
  startingPoint: 75
}</code></pre>
      <div class="image-compare shadow-lg rounded mb-12"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-7.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-7.jpg" alt=""></div>
      <h3 class="uppercase my-4 tracking-wide text-sm font-bold text-blue-500">Fluid mode</h3>
      <p class="mb-8 text-sm text-gray-700">Fluid mode enables the container to have fluid height and width, independent of each other, useful for using Image Compare Viewer in a full screen container for instance. The image is dynamically cropped using the CSS background 'cover' property.</p>
      <pre class="mb-8"><code class="javascript">{
  fluidMode: true
}</code></pre>
      <p class="mb-8 text-sm text-gray-700 font-bold">While by default a viewers height is set by the image, you must set your own height when using fluid mode.</p>
      <pre class="mb-8"><code class="css">/* Example */
#image-compare {
  width: 100%;
  height: 66vh;
}</code></pre>
      <p class="mb-8 p-8 bg-white rounded text-sm text-gray-800">Lastly, <span class="font-bold">Image Compare Viewer will ignore all other elements in the container</span> other than the first two images, allowing you to place other elements inside the viewer, just remember to set your z-index above 10, and set pointer-events to 'none' in the CSS.</p>
    </main>
  </div>
  <div class="image-compare h-half flex justify-center items-center"><span class="text-white font-bold uppercase tracking-wide shadow-2xl z-40 pointer-events-none" style="font-size: 8vw; text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);">FLUID MODE </span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/before-5.jpg" alt=""> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/after-5.jpg" alt=""></div>
</body>

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

strong {
  font-weight: bolder;
}

code {
  font-family: monospace,monospace;
  font-size: 1em;
}

img {
  border-style: none;
}

button, input {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

button {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=checkbox], [type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[hidden] {
  display: none;
}

h1, h2, h3, p, pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
  padding: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  line-height: 1.5;
}

*, :after, :before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0 solid #e2e8f0;
}

img {
  border-style: solid;
}

input::-webkit-input-placeholder {
  color: #a0aec0;
}

input::-moz-placeholder {
  color: #a0aec0;
}

input:-ms-input-placeholder {
  color: #a0aec0;
}

input::-ms-input-placeholder {
  color: #a0aec0;
}

input::placeholder {
  color: #a0aec0;
}

[role=button], button {
  cursor: pointer;
}

h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button, input {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

code, pre {
  font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}

canvas, img, object, svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
.container {
  max-width: 1200px;
}

.hljs {
  display: block;
  overflow-x: auto;
  color: #90cdf4;
  background-color: #2a4365;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: .25rem;
  padding: 2.5rem;
}

.hljs-comment, .hljs-quote {
  color: #718096;
  font-style: italic;
}

.hljs-doctag, .hljs-formula, .hljs-keyword {
  color: #c678dd;
}

.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst {
  color: #90cdf4;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string {
  color: #7f9cf5;
}

.hljs-built_in, .hljs-class .hljs-title {
  color: #c3dafe;
}

.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable {
  color: #4299e1;
}

.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title {
  color: #61aeee;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.hljs-link {
  text-decoration: underline;
}

.bg-white {
  background-color: #fff;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.bg-indigo-200 {
  background-color: #c3dafe;
}

.border-orange-500 {
  border-color: #ed8936;
}

.border-blue-300 {
  border-color: #90cdf4;
}

.rounded {
  border-radius: .25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border-l-2 {
  border-left-width: 2px;
}

.cursor-pointer {
  cursor: pointer;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hidden {
  display: none;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.flex-shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.h-6 {
  height: 1.5rem;
}

.h-half {
  height: 66vh;
}

.leading-none {
  line-height: 1;
}

.m-auto {
  margin: auto;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mr-2 {
  margin-right: .5rem;
}

.mb-2 {
  margin-bottom: .5rem;
}

.ml-2 {
  margin-left: .5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mr-32 {
  margin-right: 8rem;
}

.max-w-full {
  max-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pointer-events-none {
  pointer-events: none;
}

.fixed {
  position: fixed;
}

.shadow {
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-md {
  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-2xl {
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.text-white {
  color: #fff;
}

.text-gray-500 {
  color: #a0aec0;
}

.text-gray-700 {
  color: #4a5568;
}

.text-gray-800 {
  color: #2d3748;
}

.text-orange-800 {
  color: #9c4221;
}

.text-blue-300 {
  color: #90cdf4;
}

.text-blue-500 {
  color: #4299e1;
}

.text-indigo-500 {
  color: #667eea;
}

.text-indigo-600 {
  color: #5a67d8;
}

.hover\:text-gray-600:hover {
  color: #718096;
}

.hover\:text-indigo-500:hover {
  color: #667eea;
}

.text-xs {
  font-size: .75rem;
}

.text-sm {
  font-size: .875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wide {
  letter-spacing: .025em;
}

.z-40 {
  z-index: 40;
}

.transition {
  -webkit-transition-property: background-color,border-color,color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform;
  transition-property: background-color,border-color,color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform;
  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,-webkit-box-shadow,-webkit-transform;
}

.duration-100 {
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
}

@media (min-width: 768px) {
  .md\:p-10 {
    padding: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

.lg\:mt-16 {
    margin-top: 4rem;
  }

.lg\:p-8 {
    padding: 2rem;
  }
}

// image-compare-viewer is included in the JS options panel. Use the CDN or npm for your project

hljs.initHighlightingOnLoad();

let imageCompareViewers = document.querySelectorAll(".image-compare");

let configs = [
{
  controlColor: "#4a5568",
  controlShadow: false,
  startingPoint: 75 },

{ addCircle: true, verticalMode: true },
{},
{
  controlColor: "#667eea",
  controlShadow: false,
  addCircle: true,
  addCircleBlur: true // default
},
{
  smoothing: false,
  controlShadow: false },

{
  smoothingAmount: 300,
  controlShadow: false },

{
  hoverStart: true,
  controlShadow: false,
  addCircle: true },

{
  verticalMode: true,
  controlShadow: false },

{
  startingPoint: 75,
  controlShadow: false },

{
  fluidMode: true,
  controlShadow: false }];

imageCompareViewers.forEach((element, i) => {
  new ImageCompare(element, configs[i]).mount();
});

// page

const anchors = document.querySelectorAll(".anchor");

anchors.forEach((anchor, i) => {
  anchor.addEventListener("click", function (e) {
    let marker = e.target.dataset.destination;
    let dest = i === 0 ? document.body : document.getElementById(marker);
    dest.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest" });

toggleActiveClass();
    anchor.classList.add("text-indigo-500");
  });
});

function toggleActiveClass() {
  anchors.forEach(anchor => {
    anchor.classList.remove("text-indigo-500");
    anchor.classList.add("text-gray-500");
  });
}

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Image Compare Viewer

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Responsive Cookie Bar

Password Strength Meter

Floating Draggable Menu Like Messenger

Stylish hero footer section

Beautiful Toast Notifications

Categories

Hashtag

Blog Archive