替文章圖片 套用 lightcase 功能

7年前 (2016-06-05) Yosheng 功能修改 0評論 已收錄 1513℃

原本的主題並沒有點選圖片即可針對不同裝置放大圖片的功能,為了有更方便的閱讀體驗,上網找到了這個 JS Library 便手動改進去自己的主題中,使用效果還挺好的便分享給有需要的人囉。

  • 將下載回來的檔案解壓縮放到主題的資料夾內 總共有 css / js / fonts / scss 四個資料夾直接放入主題中
  • 打開佈景主題內容 找到 header.php 裡面新增下述程式碼
  • 打開 functions.php 裡面新增下述程式碼

關於 data-rel="lightcase" 這部份其實在官方文件有很多詳細的說明,可以設定成 lightcase:myCollection 或其他相關的特效。最後是每次撰寫文章時新增媒體記得要 連結到媒體檔案 這樣才會有效果!因為單純新增媒體只會<img>標籤因此 lightcase 無法正常顯示效果。

使用了幾個月的心得,我發現我上傳的圖片其實很大,但是顯示出來的效果都會縮小,原因出在 lightcase.js 檔案中 maxWidth 和 maxHeight 的數值被指定成 800 和 500 將這部份修改成 'auto' 效果會稍微好點,圖片會依照不同的螢幕大小有自適應的功能!但是仍然以螢幕能直接完整觀看整個圖片為主。

博主

擅長使用 C# 和 Java 開發項目,全棧開發工程師,前端主要使用 Vue 其次 Angular ,目前正在學習分布式架構,運維研發兼具,平時愛好鑽研技術並應用於實務當中,常駐於上海。

相關推薦

相逢就是有緣,留下足跡吧!