jQuery-fancybox图片预览

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

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

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

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

静态资源文件链接：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 : '
'
                  // 如需支持左右图片切换，注掉下面这两行
                  ,next: ''
                  ,prev: ''
            }
    });
};

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

 

扩展：

• 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"));
    });
};