jQuery-fancybox图片预览

最新推荐文章于 2025-06-21 16:18:41 发布

原创最新推荐文章于 2025-06-21 16:18:41 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #fancybox #图片预览 #web开发

前台技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个修改后的jQuery-fancybox版本，该版本支持Base64编码的图片预览。文章提供了详细的使用说明和代码示例，并指出该版本暂不支持IE8。

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

之前写的内容有问题（当时是在项目中直接跑的，未拿出来单独测试），今天做了修正。对之前给同胞们造成的麻烦十分抱歉……

--以下是正文------------------------------------------------------------

原生的jQuery-fancybox图片预览不支持Base64编码，这里给出经过改造后支持Base64编码的版本，但该版本的Base64方式暂时无法对IE8支持（IE8会出现图片显示不全的问题），具体效果说明：

弹框的宽高为自动，即根据浏览器显示区域的宽高自动调整，图片宽高比为原图宽高比（可为要预览的图片添加【img-width-**px】或【img-height-**px】或【img-proportion-**%】的class以指定图片宽、高或图片显示比例）；
支持图片左右切换，支持图片旋转，不支持放大缩小；

静态资源文件链接：JQuery-fancybox（支持Base64）静态资源

使用说明：

1、引入jquery.fancybox.js，以及css资源（css资源需放在一个目录下）：
2、设置jquery.fancybox.js中的【basePath】、【cssBasePath】：
3、页面初始化时进行fancybox配置：

window.onload=function(){
    // 图片预览配置
    $(".fancybox").fancybox({
            helpers : {title : {type : 'over'}},
            openEffect	: 'none',
            closeEffect	: 'none',
            errorMessage : {image:'该图片无法打开！',content:'该图片无法打开！'},
            // 去除点击旋转、左右图片切换
            tpl: {
                  // 如需支持点击旋转，注掉下面这一行
                  wrap : '<div class="fancybox-wrap" tabIndex="-1" style="position:relative; z-index:99999;"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
                  // 如需支持左右图片切换，注掉下面这两行
                  ,next: ''
                  ,prev: ''
            }
    });
};

4、给要预览的图片添加属性【href】，值与其属性【src】一样，若为Base64编码，需有前缀满足正则【data:image\/.*,】（如：data:image/jpg;base64,）：

<img data-fancybox-group="groupName" src="imgAdressOrBase64Code" class="fancybox img-proportion-50%" href="imgAdressOrBase64Code" style="width:100px;height:100px"/>

扩展：

1、对全局图片添加fancybox图片预览，若不需进行图片预览的图片需添加class【not-fancybox】：

window.onload=function(){
    $("img").addClass("fancybox");
    // 若图片有not-fancybox的class，则不使用插件
    $("img.not-fancybox").removeClass("fancybox");
    $("img").each(function(){
        $(this).attr("href",$(this).prop("src"));
    });
};