一般這種功能需要很多功能，例如點擊時大圖蹦出來的動畫效果，遮罩層，圖片是否需要變成一個可控隊列等等，所以功能一多了，自然代碼就多了，一般要么做成JQ擴充物件方法插件，要嘛就是js的建構函數，ES6的class等實作。

如果你之需要一個最簡單的點擊小圖蹦出大圖功能- -這裡有個最原始的。 。
直接看範例：https://jsfiddle.net/v1sgnuhp/

小圖的點擊區域

<a class="show-big-pic" href="大图的路径">
 <img src="小图的路径">
</a>

大圖的顯示區域

<p class="big-pic"><img src="" alt=""></p>

css

  * {margin: 0;padding: 0; }
  img {vertical-align: top; }

  .show-big-pic {position: absolute;margin-left: 200px;margin-top: 200px;}
  .big-pic {position: absolute;display: none;}
  
  .big-pic.active {z-index: 999;display: block; }

js

  let smallPic = document.querySelector('.show-big-pic');
  let bigPic = document.querySelector('.big-pic');
  let bigImg = bigPic.querySelector('img');
  smallPic.onclick = function(e) {
    e.preventDefault();
    bigImg.src = this.href;
    bigPic.classList.add('active');
  };
  bigPic.onclick = function() {
    if (bigPic.classList.contains('active')) {
      bigPic.classList.remove('active');
      bigImg.src = '';
    }
  };

出自《Javascript Dom 程式設計藝術》稍微改了下。 。 。記得當年第一次學JS就是看的這書

http://photoswipe.com/ 這個不就挺好的嗎。