在fancybox中实现缩放

时间:2012-03-29 11:18:48

标签: jquery fancybox

我的网站上有一本杂志,上面有以下标记:

<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_02-03.jpg"><img     src="http://fashion.megamall.ru/images/2012/journal/small/journal_02-03.jpg"></a>
<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_04-05.jpg"><img src="http://fashion.megamall.ru/images/2012/journal/small/journal_04-05.jpg"></a>
<a class="fancybox" rel="group" href="http://fashion.megamall.ru/images/2012/journal/big/journal_06-07.jpg"><img src="http://fashion.megamall.ru/images/2012/journal/small/journal_06-07.jpg"></a>

我正在使用fancybox创建一个带缩略图的类似灯箱的预览。但是因为我的初始杂志页面很大,所以fancybox调整它们以适应视口,因此它们不可读。我想要做的是为fancybox添加一些缩放功能。 我在Stachoverflow Adding zoom to Fancybox上找到了一个帖子,有人试图使用jqzoom获得相同的结果。我试图实现建议的解决方案,但它似乎不起作用。

你能帮我完成这个任务吗?也许我需要从其他地方而不是从这个页面启动fancybox内容?但我仍然需要HTML中的图像列表,因为它们用于在杂志框外显示杂志。

这是我的网站:

http://fashion.megamall.ru/journal

谢谢!

2 个答案:

答案 0 :(得分:7)

如果您使用fancybox v2.x,请在脚本中添加buttons选项,它包含您要查找的缩放功能。

检查http://fancyapps.com/fancybox/demo/(寻找“按钮助手”)。

答案 1 :(得分:0)

2017年更新 - fancybox3现在支持通过点击桌面和放大器进行缩放。在触摸设备上捏手势。

文档在这里:http://fancyapps.com/fancybox/3/docs/#options

请注意脚本完全不同&amp;选项已更新,因此它不是fancybox 2的直接替代品。