【JS】【jQuery】画像比較スライダー

JavaScript

■ はじめに

 * 2つの画像の違いを見比べる際に使用する画像比較スライダーについて扱う
 * 以下のサイトが参考になった。感謝。
https://ferret-plus.com/8760
https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/

■ cocoen

 * jQuery不要
 * 簡単に設定可能（以下の「設定」を参照）

公式サイト

https://github.com/koenoe/cocoen

ライセンス

 * MIT
https://github.com/koenoe/cocoen

デモ

https://koenromers.com/cocoen/demo.html

設定

 * 以下のサイトからダウンロードする
https://github.com/koenoe/cocoen/releases
サンプル 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cocoen Demo</title>
<!-- Step1 : CSS をインポートする -->
<link rel="stylesheet" href="css/cocoen.min.css" />
</head>
<body>
<!-- Step2 : 2つの画像を配置 -->
<div class="cocoen">
  <img src="img/before.jpg" alt="">
  <img src="img/after.jpg" alt="">
</div>
<!-- Step3 : JavaScript をインポートする -->
<script src="js/cocoen.min.js"></script>
<!-- Step4 : JavaScriptで初期化 -->
<script>
  document.addEventListener('DOMContentLoaded', function(){
    new Cocoen();
  });
</script>
</body>
</html>

■ jQuery Images Compare

 * jQuery と Hammerjs(スマホなどのイベント取得に便利らしい) を使用

公式サイト

https://github.com/sylvaincombes/jquery-images-compare

ライセンス

 * MIT

設定

 * 公式サイトから「images-compare.css」「jquery.images-compare.js」を取得
サンプル 
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<!-- Step1 : CSS をインポートする -->
<link rel="stylesheet" href="images-compare.css">
</head>
<body>
<!-- Step2 : 2つの画像を配置 -->
<!-- Main div container -->
<div id="myImageCompare">
    <!-- The first div will be the front element, to prevent FOUC add a style="display: none;" -->
    <div style="display: none;">
        <span class="images-compare-label">Before</span>
        <img src="http://farm3.static.flickr.com/2345/2380902254_73e2acc497.jpg" alt="Before">
    </div>
    <!-- This div will be the back element -->
    <div>
        <span class="images-compare-label">After</span>
        <img src="http://farm5.static.flickr.com/4007/4548657637_155a212bd9.jpg" alt="After">
    </div>
</div>
<!-- Step3 : JavaScript をインポートする -->
<script type="text/javascript" src="">https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
<script type="text/javascript" src="">https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js">
<script type="text/javascript" src="jquery.images-compare.js"></script>
<script>
<!-- Step4 : JavaScriptで初期化 -->
$("#myImageCompare").imagesCompare();
</script>
</body>
</html>

■ jQuery CompareWYW

公式サイト

https://code.google.com/archive/p/jquery-comparewyw/

ライセンス

 * GNU GPL v2

設定

 * 以下のサイトからダウンロードする
https://code.google.com/archive/p/jquery-comparewyw/downloads
サンプル 
<html>
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="jquery.comparewyw.css" />
<script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
<script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js">
<script type="text/javascript" src="jquery.comparewyw.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.images').compareWYW({
    event:'drag'
  });
});
</script>
</head>
<body>
<div class="images">
  <img src="http://farm3.static.flickr.com/2345/2380902254_73e2acc497.jpg" width="500" height="333" alt="" />
  <img src="http://farm5.static.flickr.com/4007/4548657637_155a212bd9.jpg" width="500" height="332" alt="" />
</div>
</body>
</html>

■ Image Comparison Slider

公式サイト

https://codyhouse.co/gem/css-jquery-image-comparison-slider/

ライセンス

 * BSD-3-Clause license

デモ

https://codyhouse.co/demo/image-comparison-slider/index.html

参考文献

https://ferret-plus.com/8760
https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/

関連記事

差分画像を生成するには...

https://blogs.yahoo.co.jp/dk521123/37803373.html

ライセンスについて

https://blogs.yahoo.co.jp/dk521123/35506016.html

Splitter ～ 画像比較スライダーをWindows Formで実装する ～

https://blogs.yahoo.co.jp/dk521123/37846450.html