能否通过其他元素触发data-featherlight-gallery画廊？

嘿，我来帮你搞定这个需求！要实现用外部的.trigger元素触发隐藏的Featherlight画廊，和直接点击画廊内链接的效果一致，咱们可以通过Featherlight提供的API来实现，步骤如下：

1. 修正HTML中的小问题 #

首先注意你的trigger代码里有个标签嵌套错误，a标签被提前闭合了，修正后的trigger代码应该是：

<div class="trigger">
  <a href="#"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
</div>
<hr>
<!-- 原画廊代码保持不变 -->
<div class="toggle">
  <h3>Gallery</h3>
  <div data-featherlight-gallery data-featherlight-filter="a">
    <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
    <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
    <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
  </div>
</div>

2. 编写JavaScript触发逻辑 #

接下来我们给.trigger绑定点击事件，通过Featherlight的API手动打开画廊。确保你已经引入了jQuery和Featherlight的相关文件（JS和CSS），然后添加以下代码：

$(document).ready(function() {
  // 绑定trigger的点击事件
  $('.trigger').on('click', function(e) {
    e.preventDefault(); // 阻止a标签默认的跳转行为（避免页面跳转到顶部）
    
    // 定位到目标画廊容器
    const targetGallery = $('.toggle [data-featherlight-gallery]');
    
    // 调用Featherlight Gallery的open方法，从第一张图片开始展示
    targetGallery.featherlightGallery('open', targetGallery.find('a:first'));
  });
});

代码说明 #

• e.preventDefault()：因为trigger里的a标签指向#，点击会导致页面滚动到顶部，所以需要阻止这个默认行为。
• targetGallery.featherlightGallery('open', 起始元素)：这是Featherlight提供的API，用来手动打开画廊，第二个参数指定从哪张图片开始展示，这里选画廊里的第一个a标签，和直接点击画廊第一张图的效果完全一致。

额外优化（可选） #

如果想让trigger看起来更像可点击元素，可以加一点CSS样式：

.trigger {
  cursor: pointer;
  display: inline-block;
}
.trigger img {
  max-width: 100px;
  border: 2px solid transparent;
}
.trigger:hover img {
  border-color: #ccc;
}

内容的提问来源于stack exchange，提问作者Joao Alves Marrucho