您使用的是 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.
});
如果您还想使用buttons
或thumbnails
helpers,请不要忘记加载正确的 js 和 css 文件。还将选项添加helpers
到您的脚本中,例如:
$(".fancybox").fancybox(
helpers : {
buttons : {},
thumbs : {
width : 50,
height : 50
}
}
});
最后说明:这是fancybox v2.0.6+