之前寫的內容有問題（當時是在項目中直接跑的，未拿出來單獨測試），今天做了修正。對之前給同胞們造成的麻煩十分抱歉……

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

原生的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"));}); };

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。