Fancybox one 画廊通过多个按钮打开

Posted 2023-05-09

【中文标题】Fancybox one 画廊通过多个按钮打开

【英文标题】：Fancybox one gallery opened via multiple buttons

【发布时间】：2018-06-02 13:23:55

【问题描述】：

我正在将 Fancybox 用于正在进行的摄影网站。这是我正在工作的页面：http://www.marybethmeehan.com/wordpress/portfolio/city-of-champions-project/

它工作得很好，但我的画廊里有重复。开发人员文档非常好，但无论出于何种原因，我都无法理解如何设置它。我敢打赌这很简单。

页面有三种方式打开一个画廊。

点击特色图片（乐队制服的女孩） 点击图片数量“35张” 或者点击“拇指”，然后点击那里的任何图片

当您点击特色图片或图片数量时，您会获得图库中的第一张图片（这是完美的），但该图片实际上是重复的。当您从那里继续前进时，您会再次看到与画廊图像编号 2 相同的图像。

这是因为我两次使用同一个锚点来启动画廊。 Fancybox 正在做我认为应该做的事情。如果您搜索616.downtown-from-above.jpg 的来源，您会看到它三次。

所以，我的简单问题是，如何从幻灯片 1 开始画廊，而不复制画廊的任何内容？我需要从这两个位置开始画廊，并允许某人通过缩略图视图从他们想要的任何地方开始。我确定我只是不了解一些非常基本的东西。

【参考方案1】：

您需要为“计数链接”创建自定义点击事件，并为第一个（或任何其他）图片链接触发点击事件。像这样的东西（不要忘记从计数链接中删除data-fancybox）：

jQuery('.project__gallery-wrapper__count a').on('click', function() 
    jQuery('[data-fancybox="mbm-gallery"]').first().trigger('click');
    return false;
);

顺便说一句，你可以使用 fancyBox 来显示缩略图列表，类似于这个例子 - https://fancyapps.com/fancybox/3/#ajax

【讨论】：

啊……所以我有点“假装”用这种方法点击fancybox本身。那种感觉是有道理的。我虽然可能有一种方法可以使用 fancybox().open() 方法，但不知道如何将实例传递给打开。会试试这个，谢谢。

“伪造”点击是非常好的技术。实际上，您的问题启发了我为即将到来的 fancyBox 更新添加新功能，请参见此处的最后一个示例 - codepen.io/fancyapps/full/VyLOJX（等待下一个版本或从 codepen 获取源代码 :)）

嗯，太棒了。感谢伟大的插件。它确实工作得很好。我将很快重新设计叠加层的工作方式以匹配我的客户想要的。似乎您已经使用提供的 CSS 轻松完成了。