Question

我正在处理的项目中有一个“附加文件”容器，它显示已附加到特定事件的文件的缩略图。当用户点击缩略图时，会打开一个fancybox窗口，向他们展示附加图像或文本文件的更大预览。

现在，我的解决方案包括将fancybox类型设置为iframe，如下所示：

$(".fancybox_group").fancybox({
    type : 'iframe'
});

这将显示文本文件和图像，但图像周围有这个巨大的白色边框。我在google上搜索了一些并找到了this solution，但它对我不起作用。这只是创建了两个独立的fancybox实例;一个用于图像，一个用于iframe。我希望能够滚动浏览一个库中的所有附件。这可能吗？

Here is an example on jsfiddle展示了我想要实现的目标。我从fancybox示例中借用了代码/图像，并添加了另一个缩略图链接到文本文档。这就是我在项目中设置的方式。任何见解将不胜感激。

Answer 1

您正在使用fancybox v2.0.6，因此其他解决方案可能已过时。

要实现您想要的目标很简单，只需：

1）。按此顺序加载所有javascript文件：

的jQuery
Fancybox js file
Fancybox media js文件（您可以在帮助程序目录中找到它）

2）。加载fancybox css文件

3）。为要在fancybox中打开的每种对象设置html，如：

图片：

<a class="fancybox" data-fancybox-group="gallery" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="image02.jpg"><img src="image02thumb.jpg" alt="" /></a>

如果你的图片的href类似于href='/attachments/76'，fancybox将不知道它是image因为缺少扩展名（jpg，png，gif）。将类fancybox.image添加到您的html中：

<a class="fancybox fancybox.image" data-fancybox-group="gallery" href="/attachments/76"><img src="thumb76.jpg" alt="" /></a>

Ajax内容（html或txt文件）：

<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.html">open ajax 1</a>
<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.txt">open ajax 2</a>

（注意第二课fancybox.ajax ...也可以使用缩略图代替我的例子中的文字）

通过iframe的外部网页：

<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://domain.com/page.html">open page in iframe mode</a>
<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://other.com/page2.html">open other page in iframe mode</a>

（注意第二课fancybox.iframe）

Youtube视频：

<a class="fancybox" data-fancybox-group="gallery" href="http://www.youtube.com/watch?v=2matH4B9bTo">open youtube video</a>

（注意我们不需要添加任何额外的类，因为我们使用的是fancybox媒体助手）

注意：我们使用data-fancybox-group="gallery"属性设置同一图库中的所有元素（您应该设置HTML5 DOCTYPE）

最后，只需使用此脚本：

$(".fancybox").fancybox();

您可能需要添加其他API选项，例如：

$(".fancybox").fancybox({
  // other API options
  padding: 0 // optional etc.
});

如果您还想使用buttons或thumbnails助手，请不要忘记加载正确的js和css文件。同时将helpers选项添加到您的脚本中，如：

$(".fancybox").fancybox(
 helpers : {
  buttons : {},
  thumbs : {
   width : 50,
   height : 50
  }
 }
});

LAST NOTE ：这是fancybox v2.0.6 +

Fancybox - 在一个图库中组合图像和iframe

1 个答案: