画像を比較できる『比較用スライドショー』の設置方法【はてなブログでも可】

サムネイル

レビューブログなどでよく見かける画像比較用スライダー。初心者には憧れのブログパーツですが、導入はとても難しそうですよね。しかし実際試してみると簡単に導入することができます。

そこで今回はJavascriptを使って簡単に導入できる比較用スライドショーを紹介します。はてなブログでも使うことができるので興味がある方は使ってみてください。

参考：2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介！ | ふかふか交易所

比較用スライドショーとは

比較用スライドショーは上のように2枚の画像を比較することができるものです。真ん中のスライダーを移動させることで簡単に画像を比較することができます。主観ですが商品レビューの際に多く使われている気がします。

比較用スライドショーはプラグインとしてたくさんありますが、多くの場合jQueryを使うので重くなってしまいます。それに比べて今回の比較用スライドショーは2枚しか比較できませんが、比較的重くならずに導入できます。

HTML

HTML
<div class="container">
<div class="cocoen">
<img src="image.jpg">
<img src="image.jpg">
</div>
</div>
<script src="../js/cocoen.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
new Cocoen();
});
</script>

<img src="〇〇">の◯の部分に画像のURLを入れてください。

CSS

CSS
.cocoen{box-sizing:border-box;cursor:pointer;line-height:0;margin:0;overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cocoen *{box-sizing:inherit}.cocoen ::after,.cocoen ::before{box-sizing:inherit}.cocoen img,.cocoen picture>img{max-width:none}.cocoen>img,.cocoen>picture>img{display:block;width:100%}.cocoen>div:first-child,picture .cocoen>div{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:50%}.cocoen-drag{background:#fff;bottom:0;cursor:ew-resize;left:50%;margin-left:-1px;position:absolute;top:0;width:2px}.cocoen-drag::before{border:3px solid #fff;content:'';height:30px;left:50%;margin-left:-7px;margin-top:-18px;position:absolute;top:50%;width:14px}

CSSの編集方法についてはこちらの記事を参考にしてみてください。

Javascript

JS
function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Cocoen=e()}}(function(){return function e(t,n,i){function s(o,a){if(!n[o]){if(!t[o]){var l="function"==typeof require&&require;if(!a&&l)return l(o,!0);if(r)return r(o,!0);var d=new Error("Cannot find module '"+o+"'");throw d.code="MODULE_NOT_FOUND",d}var h=n[o]={exports:{}};t[o][0].call(h.exports,function(e){var n=t[o][1][e];return s(n?n:e)},h,h.exports,e,t,n,i)}return n[o].exports}for(var r="function"==typeof require&&require,o=0;o<i.length;o++)s(i[o]);return s}({1:[function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(t,n){i(this,e),this.options=s({},e.defaults,n),this.element=t||document.querySelector(".cocoen"),this.init()}return r(e,[{key:"init",value:function(){this.createElements(),this.addEventListeners(),this.dimensions()}},{key:"createElements",value:function(){var e=document.createElement("span");e.className=this.options.dragElementSelector.replace(".",""),this.element.appendChild(e);var t=document.createElement("div"),n=this.element.querySelector("img:first-child");t.appendChild(n.cloneNode(!0)),n.parentNode.replaceChild(t,n),this.dragElement=this.element.querySelector(this.options.dragElementSelector),this.beforeElement=this.element.querySelector("div:first-child"),this.beforeImage=this.beforeElement.querySelector("img")}},{key:"addEventListeners",value:function(){this.element.addEventListener("click",this.onTap.bind(this)),this.element.addEventListener("mousemove",this.onDrag.bind(this)),this.element.addEventListener("touchmove",this.onDrag.bind(this)),this.dragElement.addEventListener("mousedown",this.onDragStart.bind(this)),this.dragElement.addEventListener("touchstart",this.onDragStart.bind(this)),window.addEventListener("mouseup",this.onDragEnd.bind(this)),window.addEventListener("resize",this.dimensions.bind(this))}},{key:"dimensions",value:function(){this.elementWidth=parseInt(window.getComputedStyle(this.element).width,10),this.elementOffsetLeft=this.element.getBoundingClientRect().left+document.body.scrollLeft,this.beforeImage.style.width=this.elementWidth+"px",this.dragElementWidth=parseInt(window.getComputedStyle(this.dragElement).width,10),this.minLeftPos=this.elementOffsetLeft+10,this.maxLeftPos=this.elementOffsetLeft+this.elementWidth-this.dragElementWidth-10}},{key:"onTap",value:function(e){e.preventDefault(),this.leftPos=e.pageX?e.pageX:e.touches[0].pageX,this.requestDrag()}},{key:"onDragStart",value:function(e){e.preventDefault();var t=e.pageX?e.pageX:e.touches[0].pageX,n=this.dragElement.getBoundingClientRect().left+document.body.scrollLeft;this.posX=n+this.dragElementWidth-t,this.isDragging=!0}},{key:"onDragEnd",value:function(e){e.preventDefault(),this.isDragging=!1}},{key:"onDrag",value:function(e){e.preventDefault(),this.isDragging&&(this.moveX=e.pageX?e.pageX:e.touches[0].pageX,this.leftPos=this.moveX+this.posX-this.dragElementWidth,this.requestDrag())}},{key:"drag",value:function(){this.leftPos<this.minLeftPos?this.leftPos=this.minLeftPos:this.leftPos>this.maxLeftPos&&(this.leftPos=this.maxLeftPos);var e=this.leftPos+this.dragElementWidth/2-this.elementOffsetLeft;e/=this.elementWidth;var t=100*e+"%";this.dragElement.style.left=t,this.beforeElement.style.width=t,this.options.dragCallback&&this.options.dragCallback(e)}},{key:"requestDrag",value:function(){window.requestAnimationFrame(this.drag.bind(this))}}]),e}();o.defaults={dragElementSelector:".cocoen-drag",dragCallback:null},t.exports=o},{}]},{},[1])(1)});