Fancybox 一个画廊通过多个按钮打开
Fancybox one gallery opened via multiple buttons
我正在将 Fancybox 用于正在进行的摄影网站。这是我正在处理的页面:http://www.marybethmeehan.com/wordpress/portfolio/city-of-champions-project/
效果很好,但我的图库中有重复项。开发人员文档非常好,但出于某种原因我无法理解如何设置它。我敢打赌这很简单。
该页面有三种方式打开一个画廊。
- 点击特色图片(乐队制服的女孩)
- 点击图片数量“35张图片”
- 或者单击 "Thumbs" 并从那里单击任何图像
当您点击特色图片或图片数量时,您会看到图库中的第一张图片(非常完美),但图片实际上是重复的。当您从那里向前走时,您会再次看到与画廊图片编号 2 相同的图片。
这是因为我已经两次使用同一个锚来启动画廊。 Fancybox 正在做我认为应该做的事情。如果您在来源中搜索 616.downtown-from-above.jpg
,您会看到它三遍。
所以,我的简单问题是,如何从第 1 张幻灯片开始创建图库,而不复制图库的任何内容?我需要从这两个位置开始画廊,并允许某人通过缩略图视图从他们想要的任何地方开始。我确定我只是不了解一些非常基本的东西。
您需要为 "count link" 创建自定义点击事件并触发第一个(或任何其他)图像 link 的点击事件。像这样(不要忘记从计数 link 中删除 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 用于正在进行的摄影网站。这是我正在处理的页面:http://www.marybethmeehan.com/wordpress/portfolio/city-of-champions-project/
效果很好,但我的图库中有重复项。开发人员文档非常好,但出于某种原因我无法理解如何设置它。我敢打赌这很简单。
该页面有三种方式打开一个画廊。
- 点击特色图片(乐队制服的女孩)
- 点击图片数量“35张图片”
- 或者单击 "Thumbs" 并从那里单击任何图像
当您点击特色图片或图片数量时,您会看到图库中的第一张图片(非常完美),但图片实际上是重复的。当您从那里向前走时,您会再次看到与画廊图片编号 2 相同的图片。
这是因为我已经两次使用同一个锚来启动画廊。 Fancybox 正在做我认为应该做的事情。如果您在来源中搜索 616.downtown-from-above.jpg
,您会看到它三遍。
所以,我的简单问题是,如何从第 1 张幻灯片开始创建图库,而不复制图库的任何内容?我需要从这两个位置开始画廊,并允许某人通过缩略图视图从他们想要的任何地方开始。我确定我只是不了解一些非常基本的东西。
您需要为 "count link" 创建自定义点击事件并触发第一个(或任何其他)图像 link 的点击事件。像这样(不要忘记从计数 link 中删除 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