如何使用fancybox創建畫廊

要使用fancybox創建畫廊，您需要先下載fancybox插件并包含在您的項目中。然后按照以下步驟操作：

1. 首先，在您的HTML文件中引入fancybox的CSS和JavaScript文件：

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

2. 在您的HTML文件中創建一個包含圖片的畫廊：

<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代碼初始化fancybox插件并啟用畫廊功能：

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

在這個例子中，所有帶有data-fancybox="gallery"屬性的鏈接將被組合成一個畫廊，并且可以使用箭頭鍵或滑動手勢進行導航。您可以根據需要自定義fancybox插件的選項，以實現更多的效果和功能。