２つの画像を重ねて表示してスライダーを移動しながら画像を比較するには
ここではWebフォーム(Webページ)に２つの画像を重ねて表示しています。
画像の中央に青のスライダーが表示されますのでスライダーを移動しながら画像を比較します。
ここで紹介するサンプルは、ダイエットなどの(Before/After)に応用すると便利です。
NOTE:このサンプルは、スマホなどモバイル端末では動作しません。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article014.aspx」を作成します。
-
Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加したら以下のCSSを入力します。
行19-28のCSSはスライダー用のCSSです。スライダーの色を変えたいときは行25の「background-color」プロパティの値を変えます。
また、スライダーのサイズを変更したいときは行23-24の「width」と「height」の値を書き換えます。
なお、スライダーは実行時にJavaScriptで生成します。
<style>
.img-comp-container {
position: relative;
height: 200px;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-img img {
display: block;
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
</style>
-
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを追加します。
さらに、SCRIPTタグを追加したら以下のjQueryのコードを入力します。
行6-7では、Windowのonloadイベントを登録しています。onloadイベントは、Webフォーム(Webページ）の読み込みが完了したときに発生します。
Webフォームに画像等が含まれるときは、画像のロードがすべて完了したときにこのイベントが発生します。
行25-29では、スライダー用のdiv要素を生成して各種プロパティを設定しています。
行31-34では各種イベントを登録しています。これらのイベントでスライダーの移動を監視しています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
// Image Comparison Slider
$(window).on('load', function () {
initComparisons();
});
});
// Image Comparison Slider
function initComparisons() {
$('div.img-comp-overlay').each(function (index, item) {
var div = $(this)[0];
compareImages(div);
});
function compareImages(div) {
var slider, div, clicked = 0, w, h;
w = div.offsetWidth;
h = div.offsetHeight;
div.style.width = (w / 2) + "px";
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
div.parentElement.insertBefore(slider, div);
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
slider.addEventListener("mousedown", slideReady);
window.addEventListener("mouseup", slideFinish);
slider.addEventListener("touchstart", slideReady);
window.addEventListener("touchend", slideFinish);
function slideReady(e) {
e.preventDefault();
clicked = 1;
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
clicked = 0;
}
function slideMove(e) {
var pos;
if (clicked == 0) return false;
pos = getCursorPos(e)
if (pos < 0) pos = 0;
if (pos > w) pos = w;
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = e || window.event;
a = div.getBoundingClientRect();
x = e.pageX - a.left;
x = x - window.pageXOffset;
return x;
}
function slide(x) {
div.style.width = x + "px";
slider.style.left = div.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
</script>
-
<body>...</body>要素内にHTMLのdiv要素と２つのimg要素を配置します。
img要素にはheight属性を追加して「200」を設定します。
ここで設定した画像の高さはCSSの行4で設定したheightプロパティの値「200px」と一致させる必要があります。
<div class="img-comp-container">
<div class="img-comp-img">
<img src="img/Article014/flower1.jpg" width="300" height="200" />
</div>
<div class="img-comp-img img-comp-overlay">
<img src="img/Article014/flower2.jpg" width="300" height="200" />
</div>
</div>
操作手順と解説
-
サンプルが表示されたら、画像中央に表示されている青のスライダーにマウスを移動してドラッグしながら左右に移動して見てください。
-
スライダーを移動することにより２つの画像を比較することができます。
-
ここではカラーとモノクロの画像を重ねて表示していますが、
ダイエットなどの効果を示すためにBefore/Afterの画像を表示させると便利です。