koblog

高校生のWEBデザインブログ

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

サムネイル

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

 

そこで今回は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)});

 

Javascriptを書く場所はどこでも大丈夫です。

1つの記事だけで使いたい場合は<body>内で、複数の記事で使いたい場合は<head>内でコードを<script>~~</script>で囲めば反映されます。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる