This example will show you how to use jQuery to implement an image browser plugin. It shows image thumbnails in a line or grid, when you click each image, it will popup an overlay layer to display the larger image. It also shows the previous and next arrows for you to navigate different images.
1. Use jQuery To Browse Multiple Images On Click Example Files Structure.
./
├── css
│ ├── img
│ └── preview.css
├── img
│ ├── closeicon.png
│ ├── down.png
│ ├── down_h.png
│ ├── left_rotate.png
│ ├── left_rotate_h.png
│ ├── next.png
│ ├── next_h.png
│ ├── prev.png
│ ├── prev_h.png
│ ├── right_rotate.png
│ └── right_rotate_h.png
├── index.html
├── js
│ ├── jquery.min.js
│ └── preview.js
└── p
├── 1-1600.jpg
├── gg1.jpg
├── gg2.jpg
├── m1.jpg
├── m2.jpg
└── m3.jpg
2. The css / preview.css File Source Code.
/* Background box. */
.mask-layer * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.mask-layer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 202020;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mask-layer .mask-layer-close {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: url(../img/closeicon.png) no-repeat center center;
background-size: cover;
cursor: pointer;
}
.mask-layer-black {
width: 100%;
height: 100%;
background: #000;
opacity: .75;
position: absolute;
top: 0;
left: 0;
}
.mask-layer-container {
width: 100%;
height: 100%;
position: relative;
}
.mask-layer-container .small-content {
width: 630px;
height: 100px;
position: absolute;
left: 50%;
transform: translate(-50%);
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
bottom: 0;
overflow: hidden;
}
.small-content .small-img-box {
position: relative;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
}
.small-img-box .mask-small-img {
width: 100px;
height: 100px;
border: 2px solid transparent;
margin: 0 5px 0 0;
opacity: 0.4;
cursor: pointer;
}
.small-img-box .mask-small-img.onthis {
border: 2px solid #1e9fff;
opacity: 1;
}
.small-content .box-go-left {
position: absolute;
width: 20px;
display: block;
text-align: center;
left: 0px;
bottom: 0;
height: 100px;
background: url(./img/left_img.png) no-repeat center;
background-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.small-content .box-go-right {
position: absolute;
width: 20px;
display: block;
text-align: center;
right: 0px;
bottom: 0;
height: 100px;
background: url(./img/right_img.png) no-repeat center;
background-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.small-content .box-go-left:hover,
.small-content .box-go-right:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
background-size: 24px;
}
.mask-layer-container .img-pre {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
left: 20px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
background: url(../img/prev.png) no-repeat center center;
cursor: pointer;
}
.mask-layer-container .img-pre:hover {
background: url(../img/prev_h.png) no-repeat center center;
background-color: rgba(0, 0, 0, 0.3);
}
.mask-layer-container .img-next {
width: 100px;
height: 100px;
position: absolute;
border-radius: 100%;
cursor: pointer;
background: url(../img/next.png) no-repeat center center;
right: 20px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
}
.mask-layer-container .img-next:hover {
background: url(../img/next_h.png) no-repeat center center;
background-color: rgba(0, 0, 0, 0.3);
}
.mask-layer-container .mask-layer-imgbox {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.mask-layer-container .mask-layer-imgbox.has-small {
height: calc(100% - 105px);
}
.mask-layer-imgbox .mask-layer-imgName {
z-index: 999;
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
height: 30px;
width: 630px;
padding: 5px;
color: #ffffff;
background: rgba(0, 0, 0, 0.3);
transition: all linear 0.3s;
}
.mask-layer-imgbox:hover .mask-layer-imgName {
bottom: 0px;
}
.mask-layer-imgbox .layer-img-box {
position: relative;
width: 100%;
height: 100%;
}
.layer-img-box>p{
position: absolute;
transform-origin: center;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
width: 100%;
height: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
cursor: move;
left: 0;
top: 0;
}
.mask-layer-imgbox .layer-img-box img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
-o-transform: translate(-50%, -50%) scale(1);
}
.mask-layer-imgbox .layer-img-box img:hover {
cursor: move;
}
.zoomImg-hide-box {
display: none !important;
}
/* Right mouse key menu. */
.mask-layer .contextmenu {
list-style: none;
display: none;
position: absolute;
width: 180px;
background: #FFFFFF;
border-radius: 5px;
z-index: 99;
border: 1px solid #333;
}
.mask-layer .contextmenu li {
transition: ease 0.3s;
}
.mask-layer .contextmenu li:hover {
background: #333333;
}
.mask-layer .contextmenu li>a {
display: block;
padding: 10px 10px 10px 35px;
color: #000000;
text-decoration: none;
transition: ease 0.3s;
}
.mask-layer .contextmenu li>a.clockwise{
background: url(../img/right_rotate.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.clockwise:hover{
background: url(../img/right_rotate_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li>a.counterClockwise{
background: url(../img/left_rotate.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.counterClockwise:hover{
background: url(../img/left_rotate_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li>a.downimg{
background: url(../img/down.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.downimg:hover{
background: url(../img/down_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li:hover>a {
color: #FFFFFF;
}
.mask-layer .contextmenu .menu-parend:hover .menu-child {
display: block;
}
3. The js / preview.js File Source Code.
function showZoomImg(domName, model) {
// The total number of preview pictures is zero by default
var len = 0;
// Img dom object.
var domImg;
// Define an array to save image src attribute value.
var arrPic = new Array();
// Define an array to save image name.
var arrName = new Array();
// The current preview image number.
var num = 0;
// The current preview sequence number, the minimum is 1.
var numNow = 1;
// Move to left point range.
var leftPoint;
// Move to right point range.
var rightPoint;
// Rotation angle
var spin_n = 0;
// Zoom in times number.
var zoom_n = 1;
// Check display mode
showModel(model);
function showModel(model) {
//View pictures directly
if(model == "img") {
$("body").on('click', domName, function() {
domImg = $(this).parents('.zoomImgBox').find(domName);
len = domImg.length;
arrPic = [];
arrName = [];
for(var i = 0; i < len; i++) {
// Save all img paths in the array.
arrPic[i] = domImg.eq(i).attr("src");
if(domImg.eq(i).attr("data-caption")) {
arrName[i] = domImg.eq(i).attr("data-caption");
} else {
arrName[i] = 'image' + (i + 1);
}
}
// Get the index value of the click
var img_index = domImg.index(this);
num = img_index;
numNow = num + 1;
//Add pop-up DOM.
addMaskLater();
});
} else if(model == "text") {
$("body").on('click', domName, function() {
domImg = $(this).children('.zoomImg-hide-box').find('img');
len = domImg.length;
if(len < 1) {
layui.use('layer', function() {
var layer = layui.layer;
layer.msg('No pictures have been uploaded yet.');
});
return;
}
num = 0;
numNow = 1;
arrPic = [];
arrName = [];
for(var i = 0; i < len; i++) {
//Store all img paths in the array
arrPic[i] = domImg.eq(i).attr("src");
if(domImg.eq(i).attr("data-caption")) {
arrName[i] = domImg.eq(i).attr("data-caption");
} else {
arrName[i] = 'image' + (i + 1);
}
}
addMaskLater();
})
}
}
//Add pop-up layer HTML to body
function addMaskLater() {
var maskBg =
"<div class=\"mask-layer\">" +
"<div class=\"mask-layer-black\"></div>" +
"<div class=\"mask-layer-container\">" +
"<div class=\"mask-layer-imgbox\"></div>" +
"<div class=\"mask-layer-close\"></div>" +
"<div class=\"img-pre\"></div>" +
"<div class=\"img-next\"></div>" +
"<ul class=\"contextmenu\" id='contextmenu'>" +
"<li>" +
"<a class=\"downimg\">Download Image</a>" +
"</li>" +
"<li>" +
"<a class=\"clockwise\">Rotate 90° clockwise</a>" +
"</li>" +
"<li>" +
"<a class=\"counterClockwise\">Rotate 90 ° counterclockwise</a>" +
"</li>" +
"</ul>" +
"</div>" +
"</div>";
$("body").append(maskBg);
if(len > 1) {
//Load thumbnails.
showSmall();
} else {
$(".img-pre").css('display', 'none');
$(".img-next").css('display', 'none');
}
// Display image.
showImg();
showCtrl();
}
/* Loading image and image operation */
function showImg() {
$(".mask-layer-imgbox").empty();
var imgCont = '<div class="mask-layer-imgName">' + arrName[num] + '</div>' +
'<div class="layer-img-box"><img src="' + arrPic[num] + '" alt=""></div>';
$(".mask-layer-imgbox").append(imgCont);
imgInit();
}
/* Plugin operation */
function showCtrl() {
// The last image on click function.
$(".img-pre").on("click", function() {
num--;
if(num == -1) {
num = len - 1;
}
showImg();
//Show currently selected image.
showSmallThis();
});
// The next image on click function.
$(".img-next").on("click", function() {
num++;
if(num == len) {
num = 0;
boxReset();
}
showImg();
showSmallThis();
});
/* Close and remove the image overlay layer. */
$(".mask-layer-close").click(function() {
$(".mask-layer").remove();
});
/* Operate thumbnails*/
if(arrPic.length > 1) {
showSmallThis(); // Show currently selected
}
/* Show current image thumbnail. */
function showSmallThis() { // Displays the currently selected thumbnail.
$('.mask-small-img').removeClass('onthis');
$($('.mask-small-img')[num]).addClass('onthis');
allowShow();
}
/*Click image thumbnail to switch.*/
$('.mask-small-img').on("click", function() {
num = $('.mask-small-img').index(this);
showImg();
showSmallThis(); // Show currently selected
});
/*box-go-left move content to right. */
$('.box-go-left').on('click', function() {
boxGoRight();
});
$('.box-go-right').on('click', function() {
boxGoLeft();
});
function boxGoLeft(intTime) { // move to left.
intTime ? intTime : intTime = 1;
if(leftPoint > 0) {
$('.small-img-box').animate({
left: '-=' + 630 * intTime
}, 500);
leftPoint = leftPoint - intTime;
rightPoint = rightPoint + intTime;
}
}
function boxGoRight() { // move to right
if(rightPoint > 0) {
$('.small-img-box').animate({
left: '+=630'
}, 500);
leftPoint++;
rightPoint--;
}
}
function allowShow() { //Keep the selected image visible in the container
/*Follow to switch*/
var boxLeft = $('.small-content').offset().left;
var thisLeft = $('.mask-small-img.onthis').offset().left;
var intTime = Math.floor((thisLeft - boxLeft) / 630);
if(thisLeft - boxLeft >= 630) {
boxGoLeft(intTime);
} else if(thisLeft < boxLeft) {
boxGoRight();
} else {
//console.log(' do not need to move.')
}
}
/* reset */
function boxReset() {
$('.small-img-box').animate({
left: '0'
}, 500);
leftPoint = Math.ceil(arrPic.length / 5) - 1;
rightPoint = 0;
}
$(".clockwise").click(function() {
clockwise(); // Clockwise rotation
});
$(".counterClockwise").click(function() {
counterClockwise(); // Counter clockwise rotation
})
/* Clockwise rotation */
function clockwise() {
spin_n += 90;
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
};
/* Counter clockwise rotation */
function counterClockwise() {
spin_n -= 90;
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
}
rightMenu('.mask-layer-container');
function rightMenu(dom) {
// Handle right-mouse events.
$(dom).contextmenu(function(e) {
// Get window size
var winWidth = $(document).width();
var winHeight = $(document).height();
// Mouse click position coordinates.
var mouseX = e.clientX;
var mouseY = e.clientY;
// The width and height of the UL label
var menuWidth = $(".mask-layer .contextmenu").width();
var menuHeight = $(".mask-layer.contextmenu").height();
// Minimum margin(the minimum distance between the edges of a specific window).
var minEdgeMargin = 10;
// The following judgment is used to detect if the UL tag appears outside the window range.
// Case 1: The bottom right corner is out of the window.
if(mouseX + menuWidth + minEdgeMargin >= winWidth &&
mouseY + menuHeight + minEdgeMargin >= winHeight) {
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}
// Case 2: The right side is out of the window
else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
}
// Case 3：The bottom edge is beyond the window.
else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}
// Other cases: Not beyond the window
else {
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
};
// UL menu appears.
$(".mask-layer .contextmenu").css({
"left": menuLeft,
"top": menuTop
}).show();
// Prevents browser default right-click menu events.
return false;
});
// After clicking, the right-click menu is hidden.
$(document).click(function() {
$(".contextmenu").hide();
});
}
}
/* Image manipulation method. */
function imgInit() {
zoom_n = 1;//Reset scale percentage.
/* Image drag & drop. */
var $div_img = $(".layer-img-box img");
// Bind left mouse button hold event.
$div_img.bind("mousedown", function(event) {
event.preventDefault && event.preventDefault(); // Remove image drag response.
// Gets the coordinates of the node to be dragged.
var offset_x = $(this)[0].offsetLeft; // x coordinate
var offset_y = $(this)[0].offsetTop; //y coordinate
// Gets the coordinates of the current mouse pointer.
var mouse_x = event.pageX;
var mouse_y = event.pageY;
// Bind mouse drag event
// You should use the global (document) element because you might be able to move the mouse out of the element when dragging.
$(".layer-img-box").bind("mousemove", function(ev) {
// Calculate the position of the mouse movement.
var _x = ev.pageX - mouse_x;
var _y = ev.pageY - mouse_y;
// Sets the coordinates of the moved element.
var now_x = (offset_x + _x) + "px";
var now_y = (offset_y + _y) + "px";
// Changes the location of the target element.
$div_img.css({
top: now_y,
left: now_x
});
});
$(".layer-img-box").bind("mouseup", function() {
$(".layer-img-box").unbind("mousemove");
});
});
$div_img.bind("mousewheel DOMMouseScroll", function(e) {
e = e || window.event;
var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
var dir = delta > 0 ? 'down' : 'up';
zoomImg(this, dir);
return false;
});
function zoomImg(o, delta) {
if(delta == 'up') {
zoom_n -= 0.2;
zoom_n = zoom_n <= 0.2 ? 0.2 : zoom_n;
} else {
zoom_n += 0.2;
}
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
}
}
function showSmall() {
leftPoint = Math.ceil(arrPic.length / 6) - 1;
rightPoint = 0;
$(".mask-layer-imgbox").addClass('has-small');
var sDom = "<div class='small-content'><div class='small-img-box'></div></div>"
$(".mask-layer-container").append(sDom);
for(var i = 0; i < arrPic.length; i++) {
$('.small-img-box').append('<img class="mask-small-img" src=' + arrPic[i] + '>');
}
if(arrPic.length > 6) {
$(".small-img-box").width(Math.ceil(arrPic.length / 6) * 630);
$('.small-content').append('<span class="box-go-left"></span><span class="box-go-right"></span>');
}
}
}
4. The index.html File Source Code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Display Overlay Image When Click It Example</title>
<link rel="stylesheet" type="text/css" href="css/preview.css" />
<style>
.content {
width: 640px;
padding: 20px;
margin: 20px auto;
border: 1px solid #DDDDDD;
}
.content img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="content">
<h3>Click Below Link To See Image Overlay Effect</h3>
<a href="javascript:;" class="zoomImgshow">
One image
<div class="zoomImg-hide-box">
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
</div>
</a>
<a href="javascript:;" class="zoomImgshow">
Less than 6 images.
<div class="zoomImg-hide-box">
<img src="p/m1.jpg" class="zoomImg" alt="" />
<img src="p/m2.jpg" class="zoomImg" alt="" />
<img src="p/m3.jpg" class="zoomImg" alt="" />
</div>
</a>
<a href="javascript:;" class="zoomImgshow">
More than 6 images.
<div class="zoomImg-hide-box">
<img src="p/m1.jpg" class="zoomImg" alt="" />
<img src="p/m2.jpg" class="zoomImg" alt="" />
<img src="p/m3.jpg" class="zoomImg" alt="" />
<img src="p/m1.jpg" class="zoomImg" data-caption="image-1" alt="" />
<img src="p/m2.jpg" class="zoomImg" data-caption="image-2" alt="" />
<img src="p/m3.jpg" class="zoomImg" data-caption="image-3" alt="" />
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
<img src="p/gg1.jpg" class="zoomImg" data-caption="image-gg1" alt="" />
<img src="p/gg2.jpg" class="zoomImg" data-caption="image-gg2" alt="" />
<img src="p/m1.jpg" class="zoomImg" data-caption="image-1" alt="" />
<img src="p/m2.jpg" class="zoomImg" data-caption="image-2" alt="" />
<img src="p/m3.jpg" class="zoomImg" data-caption="image-3" alt="" />
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
<img src="p/gg1.jpg" class="zoomImg" data-caption="image-gg1" alt="" />
</div>
</a>
<h3>Click Image To See Image Overlay Effect</h3>
<h4>Single Image</h4>
<div class="zoomImgBox">
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
</div>
<h4>Less Than 6 Images</h4>
<div class="zoomImgBox">
<img src="p/m1.jpg" class="zoomImg" data-caption="image-1" alt="" />
<img src="p/m2.jpg" class="zoomImg" data-caption="image-2" alt="" />
<img src="p/m3.jpg" class="zoomImg" data-caption="image-3" alt="" />
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
</div>
<h4>More Than 6 Images</h4>
<div class="zoomImgBox">
<img src="p/m1.jpg" class="zoomImg" alt="" />
<img src="p/m2.jpg" class="zoomImg" alt="" />
<img src="p/m3.jpg" class="zoomImg" alt="" />
<img src="p/m1.jpg" class="zoomImg" data-caption="image-1" alt="" />
<img src="p/m2.jpg" class="zoomImg" data-caption="image-2" alt="" />
<img src="p/m3.jpg" class="zoomImg" data-caption="image-3" alt="" />
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
<img src="p/gg1.jpg" class="zoomImg" data-caption="image-gg1" alt="" />
<img src="p/gg2.jpg" class="zoomImg" data-caption="image-gg2" alt="" />
<img src="p/m1.jpg" class="zoomImg" data-caption="image-1" alt="" />
<img src="p/m2.jpg" class="zoomImg" data-caption="image-2" alt="" />
<img src="p/m3.jpg" class="zoomImg" data-caption="image-3" alt="" />
<img src="p/1-1600.jpg" class="zoomImg" data-caption="image-4" alt="" />
<img src="p/gg1.jpg" class="zoomImg" data-caption="image-gg1" alt="" />
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
showZoomImg('.zoomImg', 'img');
showZoomImg('.zoomImgshow', 'text');
</script>
</body>
</html>
5. The jQuery Display Overlay Image When Click The Thumbnail Image Demo.
Below is the demo video of this example.
