サムネイルでメイン画像を切り替え、メイン画像をクリックしたらlightboxのように画像を切り替えたい

現在、下記URLサイトを真似てサムネイルでページ内のメイン画像が切り替わり
そこにlightboxを併せてメイン画像をポップアップ表示させています。
https://www.imamura.biz/blog/26772

しかし、ユーザー様よりポップアップ画面で前後の写真に切り替えたいとの要望を受け行き詰っています。
何かいいプラグインや方法などがありましたらご教授ください。
よろしくお願いいたします。

Javascript
1	<!-- ChangePhoto -->
2	$(function(){
3		$("img.ChangePhoto").click(function(){
4			var ImgSrc = $(this).attr("src");
5			var ImgAlt = $(this).attr("alt");
6			$("img#MainPhoto").attr({src:ImgSrc,alt:ImgAlt});
7			$("img#MainPhoto").hide();
8			$("img#MainPhoto").fadeIn("slow");
9			return false;
10		});
11	});
12
13	$(function() {
14		$('.sumnail img').on('click', function() {
15			var tag = $(this).attr("src");
16			var title = $(this).attr("alt");
17			$('.p_img a').attr("href",tag);
18			$('.p_img a').attr("data-title",title);
19		});
20	});
21	<!-- End ChangePhoto Code -->

HTML
1<div class="p_img">
2 <p>
3  <a href="./img/01.jpg" data-lightbox="img" data-title="sample">
4   <img src="./img/01.jpg" alt="" id="MainPhoto"></a>
5 </p>
6
7<ul class="sumnail_list">
8 <li class="sumnail"><img src="./img/01.jpg" alt="sample" class="ChangePhoto"></li>
9 <li class="sumnail"><img src="./img/02.jpg" alt="sample2" class="ChangePhoto"></li>
10 <li class="sumnail"><img src="./img/03.jpg" alt="sample3" class="ChangePhoto"></li>
11</ul>

css
1div.press_img {
2		margin: 0 auto;
3		padding: 0 0 2em;
4}
5
6div.press_img p {
7		text-align: center;
8}
9
10div.press_img p img {
11		width: 60%;
12		border-radius: 2px;
13}
14
15ul.sumnail_list {
16		display: flex;
17		flex-flow: row wrap;
18		justify-content: flex-start;
19		align-items: baseline;
20		padding: 1em 0 2em;
21}
22
23ul.sumnail_list li {
24		width: 16.66667%;
25		padding: 0.5em 0;
26		text-align: center;
27		line-height: 1.3em;
28		font-size: 12px;
29}
30
31ul.sumnail_list li img {
32		width: 90%;
33		border-radius: 2px;
34}