jQuery.fancybox 学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/liangzai_cool/article/details/46252769

本文介绍如何使用Fancybox插件实现图片放大预览功能，并解决层叠顺序问题。同时，通过修改模板实现语言本地化，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置堆叠顺序(z-index)

用bootstrap+jquery开发前端，需要给弹出的模态框中的图片，增加单击图片，可以对图片进行放大预览的功能，如果仅仅绑定了fancybox()函数，如：

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

而没有配置z-index的值，可能出现弹出层在模态框的后面的情况，如：
点击模态框中的图片，预览图出现在了模态框的后面

解决方案：
配置fancybox的覆盖层(overlay)的堆叠顺序(z-index)，大约为12500
最终实现代码如下：

$("a.fancybox").fancybox({
  helpers: {
    overlay : {//z-index 仅能在定位元素(position=absolute||fixed)上奏效 ,此时 z-index值可以设置在12500左右
      css : {position: "fixed", "z-index": 12500}
    }
  }
});

效果：
这里写图片描述

语言本地化

fancybox没有提供完整的国际化语言包，但提供了模版自定义方案，我们可以通过修改模版实现语言本地化，即非完整的国际化。
解决方案：

$(".fancybox").fancybox({
  // HTML templates
  tpl: {
    wrap    : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
    image   : '<img class="fancybox-image" src="{href}" alt="" />',
    iframe  : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
    error   : '<p class="fancybox-error">请求的内容未找到。<br/>请稍后再试。</p>',
    closeBtn: '<a title="关闭" class="fancybox-item fancybox-close" href="javascript:;"></a>',
    next    : '<a title="下一个" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
    prev    : '<a title="上一个" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
  }
});