之前寫的內(nèi)容有問題（當(dāng)時(shí)是在項(xiàng)目中直接跑的，未拿出來單獨(dú)測試），今天做了修正。對(duì)之前給同胞們?cè)斐傻穆闊┦直浮?/p>

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

原生的jQuery-fancybox圖片預(yù)覽不支持Base64編碼，這里給出經(jīng)過改造后支持Base64編碼的版本，但該版本的Base64方式暫時(shí)無法對(duì)IE8支持（IE8會(huì)出現(xiàn)圖片顯示不全的問題），具體效果說明：

彈框的寬高為自動(dòng)，即根據(jù)瀏覽器顯示區(qū)域的寬高自動(dòng)調(diào)整，圖片寬高比為原圖寬高比（可為要預(yù)覽的圖片添加【img-width-**px】或【img-height-**px】或【img-proportion-**%】的class以指定圖片寬、高或圖片顯示比例）；

支持圖片左右切換，支持圖片旋轉(zhuǎn)，不支持放大縮小；

靜態(tài)資源文件鏈接：JQuery-fancybox（支持Base64）靜態(tài)資源

使用說明：

• 1、引入jquery.fancybox.js，以及css資源（css資源需放在一個(gè)目錄下）：
• 2、設(shè)置jquery.fancybox.js中的【basePath】、【cssBasePath】：
• 3、頁面初始化時(shí)進(jìn)行fancybox配置：

window.onload=function(){// 圖片預(yù)覽配置$(".fancybox").fancybox({helpers : {title : {type : 'over'}},openEffect : 'none',closeEffect : 'none',errorMessage : {image:'該圖片無法打開！',content:'該圖片無法打開！'},// 去除點(diǎn)擊旋轉(zhuǎn)、左右圖片切換tpl: {// 如需支持點(diǎn)擊旋轉(zhuǎn)，注掉下面這一行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、給要預(yù)覽的圖片添加屬性【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"/>

?

擴(kuò)展：

• 1、對(duì)全局圖片添加fancybox圖片預(yù)覽，若不需進(jìn)行圖片預(yù)覽的圖片需添加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"));}); };

?

總結(jié)

以上是生活随笔為你收集整理的jQuery-fancybox图片预览的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。