這個(gè)方法來自懿古今的一篇文章:https://www.yigujin.cn/1301.html,但是他的網(wǎng)站是WordPress,本文要說的方法適合所有網(wǎng)站。
首先去fancybox網(wǎng)站下載文件包(http://fancyapps.com/fancybox/3/),或者去github:https://github.com/fancyapps/fancybox,下載下來后我們能用到的是dist文件夾下的jquery.fancybox.min.css和jquery.fancybox.min.js,把這兩個(gè)文件引入到文章模板的頭部,jquery.fancybox.min.js要在網(wǎng)站jQuery庫下面,庫jQuery 1.9.1+和jQuery 2+都可以,但首選還是jQuery3+,一般網(wǎng)站都有jQuery庫,所以就不用引入示例中的jquery-3.2.1.min.js了。
這個(gè)燈箱庫起效果的前提是給a標(biāo)簽加上data-fancybox=””,data-fancybox里面可以是images也可以是video,圖片比如data-fancybox=”images”,加上這個(gè)后就自動(dòng)綁定和啟動(dòng)fancybox的click事件,但是大多數(shù)網(wǎng)站文章中的圖片都沒有包裹a標(biāo)簽,那么就需要解決兩個(gè)問題:給img包裹上a標(biāo)簽,a標(biāo)簽里加上data-fancybox=”images” href=”圖片地址”,下面是通用代碼:
<script>$(function () {$('.wenzhang').find('img').each(function () {var _this = $(this);var _src = _this.attr("src");_this.wrap('<a data-fancybox="images" href="' + _src + '"></a>');})})</script> 假設(shè)你的文章調(diào)用標(biāo)簽在容器.wenzhang里,那么文章里所有的圖片都會(huì)包裹上a標(biāo)簽。我這個(gè)實(shí)現(xiàn)的只是低配的,也就是href地址跟圖片地址是一樣的,標(biāo)準(zhǔn)的是img標(biāo)簽里的圖片是小圖,href地址是小圖地址對(duì)應(yīng)的大圖地址,這樣的好處是點(diǎn)相冊(cè)式預(yù)覽,也就是點(diǎn)下圖中圈出來的按鈕
右邊的縮略圖看著比較美觀,如果href地址跟img標(biāo)簽的src地址一樣,那么右邊的縮略圖只截取大圖縮小后的一部分,風(fēng)景圖片看起來還好,因?yàn)轱L(fēng)景圖片在拍攝時(shí)會(huì)突出主體,如果是普通文章的截圖看起來就很差勁了,因?yàn)闆]有中心點(diǎn),截取后圖片是殘缺的。
更深層次的使用大家可以去看文檔:https://fancyapps.com/fancybox/3/docs/。
2019年6月19日補(bǔ)充:在查看官方示例時(shí)發(fā)現(xiàn)預(yù)覽圖片底部有文字說明,這是因?yàn)閍標(biāo)簽加上了data-caption,我們可以獲取圖片alt屬性的值然后賦給data-caption,上面的代碼簡單修改下就可以實(shí)現(xiàn)
$(function () {$('.wenzhang').find('img').each(function () {var _this = $(this);var _src = _this.attr("src");var _alt = _this.attr("alt");_this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');})})2019年7月3日補(bǔ)充:加上
$(this).attr('title','' + _alt + '');給圖片加上title標(biāo)簽,title的內(nèi)容跟alt一樣,有利于搜索引擎對(duì)圖片的收錄。
新聞熱點(diǎn)
疑難解答
圖片精選