如何通过Lightbox插件添加图片描述

<a href="path/to/your/image.jpg" class="lightbox" data-gallery="gallery">
  <img src="path/to/your/thumbnail.jpg" alt="Image description">
</a>

2. 在同一个HTML文件中，添加一些包含图片描述的文本。这些文本可以位于
   标签中，并使用相同的类（例如gallery）。例如：

<div class="gallery">
  <p>这是图片1的描述。</p>
  <p>这是图片2的描述。</p>
  <p>这是图片3的描述。</p>
</div>

3. 在JavaScript文件中或者在HTML文件的[removed]标签中，初始化Lightbox插件并指定要使用的数据属性。例如：

Lightbox.init({
  gallery: {
    dynamic: true,
    loop: true,
    navigateByClick: true,
    auto: true,
    closeOnEnd: true
  }
});

对于Fancybox：

<a href="path/to/your/image.jpg" class="fancybox" data-fancybox="gallery">
  <img src="path/to/your/thumbnail.jpg" alt="Image description">
</a>

2. 在同一个HTML文件中，添加一些包含图片描述的文本。这些文本可以位于
   标签中，并使用相同的类（例如gallery）。例如：

<div class="gallery">
  <p>这是图片1的描述。</p>
  <p>这是图片2的描述。</p>
  <p>这是图片3的描述。</p>
</div>

3. 在JavaScript文件中或者在HTML文件的[removed]标签中，初始化Fancybox插件并指定要使用的数据属性。例如：

$(document).ready(function(){
  $('.fancybox').fancybox({
    loop: true,
    buttons: [
      'slideShow',
      'fullScreen',
      'thumbs',
      'close'
    ],
   gallery: {
      selector: '.gallery'
    }
  });
});