瑕佷娇鐢╢ancybox鍒涘缓鐢诲粖锛屾偍闇€瑕佸厛涓嬭浇fancybox鎻掍欢骞跺寘鍚湪鎮ㄧ殑椤圭洰涓€傜劧鍚庢寜鐓т互涓嬫楠ゆ搷浣滐細

1. 棣栧厛锛屽湪鎮ㄧ殑HTML鏂囦欢涓紩鍏ancybox鐨凜SS鍜孞avaScript鏂囦欢锛?/li>

<link rel="stylesheet" href="path/to/fancybox/jquery.fancybox.min.css">
<script src="path/to/fancybox/jquery.fancybox.min.js"></script>

2. 鍦ㄦ偍鐨凥TML鏂囦欢涓垱寤轰竴涓寘鍚浘鐗囩殑鐢诲粖锛?/li>

<div class="gallery">
  <a href="image1.jpg" data-fancybox="gallery" data-caption="Image 1">
    <img src="image1-thumbnail.jpg" alt="Image 1">
  </a>
  <a href="image2.jpg" data-fancybox="gallery" data-caption="Image 2">
    <img src="image2-thumbnail.jpg" alt="Image 2">
  </a>
  <a href="image3.jpg" data-fancybox="gallery" data-caption="Image 3">
    <img src="image3-thumbnail.jpg" alt="Image 3">
  </a>
</div>

3. 浣跨敤JavaScript浠ｇ爜鍒濆鍖杅ancybox鎻掍欢骞跺惎鐢ㄧ敾寤婂姛鑳斤細

$(document).ready(function() {
  $("[data-fancybox='gallery']").fancybox({
    loop: true
  });
});

鍦ㄨ繖涓緥瀛愪腑锛屾墍鏈夊甫鏈?code>data-fancybox="gallery"灞炴€х殑閾炬帴灏嗚缁勫悎鎴愪竴涓敾寤婏紝骞朵笖鍙互浣跨敤绠ご閿垨婊戝姩鎵嬪娍杩涜瀵艰埅銆傛偍鍙互鏍规嵁闇€瑕佽嚜瀹氫箟fancybox鎻掍欢鐨勯€夐」锛屼互瀹炵幇鏇村鐨勬晥鏋滃拰鍔熻兘銆?/p>