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

Question

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

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

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

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

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

Answer 1

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

要实现您想要的只是简单,只需:

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

• jQuery的
• Fancybox js文件
• Fancybox media 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.
});

如果您还想使用buttons或thumbnails帮助者,请不要忘记加载正确的js和css文件.还要helpers为脚本添加选项,例如:

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

最后注意:这是fancybox v2.0.6 +