将fancybox集成到galleriffic中

Question

我想把fancybox的一些特性集成到galleriffic中。基本上，我想有一个画廊的图像与他们各自的缩略图使用galleriffic。除了样式之外，我的方法看起来非常类似：http://www.twospy.com/galleriffic/example-2.html此外，我还希望能够放大所显示的图像。出于这样的目的，我使用了fancybox。它的行为示例可以在这里找到http://fancyapps.com/fancybox/demo/

我已经成功地完成了上面描述的操作，稍微修改了galleriffic buildImage函数，如下所示：

.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'">&nbsp;</a></span>')

现在，galleriffic添加了fancybox所需的fancybox类以及图像源。这个很好用。

在这一点上，我发现了一个问题，我似乎没有找到一个整洁的解决方案。Fancybox允许通过单击每个图像的右侧/左侧来导航图像集合，以转到集合中的下一个/上一个图像(您可能已经在上面提供的演示中注意到了)。我也想利用这个功能，这样用户就可以通过浏览galleriffic的缩略图来浏览画廊，也可以使用fancybox浏览放大版本的图片。

我在这里发现的问题是，galleriffic只为其缩略图被单击的图像创建了一个class="fancybox“。这使得fancybox只能找到图库的一个图像。我不想将fancybox类定义为定义图库流量的拇指，因为我不希望图像在单击缩略图时缩放，而是在主图像上缩放。

在某种程度上，我需要的是用fancybox类生成所有的，但隐藏所有未显示的，而不是每次通过galleriffic生成我需要的。这是我能想出的唯一解决方案，但它并不简洁。我喜欢galleriffic在每次点击缩略图时生成主图像的方式。

我想知道是否有人能想出一个更好的解决方案。例如，fancybox可以通过搜索下一个图库的缩略图来知道下一个是哪张图片。

我试着做了一个可以工作的jsfiddle演示，但是涉及的代码太多了。此外，没有明确的问题，只有实现的结论。我认为你可以很容易地复制我现在的情况。

感谢您的努力！

Answer 1

我尝试了上面的方法，像您一样编辑BuildImage函数。对我来说，它成功地链接到图像，但不能加载到FancyBox中。

我在主文件中有以下代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

你成功地将两者结合起来了，对吗？