4

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

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

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

这将很好地显示文本文件和图像,但图像周围有这个巨大的白色边框。我在谷歌上做了一些搜索,找到了这个解决方案,但它对我不起作用。这只是创建了两个独立的 fancybox 实例;一个用于图像,一个用于 iframe。我希望能够滚动浏览一个画廊中的所有附件。这可能吗?

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

4

1 回答 1

5

您使用的是 fancybox v2.0.6,因此其他解决方案可能已过时。

要实现您想要的很简单,只需执行以下操作:

1)。按此顺序加载所有 javascript 文件:

  • jQuery
  • 花式盒子 js 文件
  • Fancybox 媒体 js 文件(您可以在 helpers 目录中找到它)

2)。加载fancybox css文件

3)。html为您要在 fancybox 中打开的每种类型的对象设置 ,例如:

图片 :

<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.
});

如果您还想使用buttonsthumbnailshelpers,请不要忘记加载正确的 js 和 css 文件。还将选项添加helpers到您的脚本中,例如:

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

最后说明:这是fancybox v2.0.6+

于 2012-06-20T19:04:01.887 回答