替文章圖片 套用 lightcase 功能

共计 1231 个字符，预计需要花费 4 分钟才能阅读完成。

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

• 將下載回來的 檔案 解壓縮放到主題的資料夾內 總共有 css / js / fonts / scss 四個資料夾直接放入主題中

• 打開佈景主題內容 找到 header.php 裡面新增下述程式碼

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/lightcase.css">
  <script src="<?php bloginfo('template_directory'); ?>/js/lightcase.js"></script>
  <script type="text/javascript">
      jQuery(document).ready(function($) {$('a[data-rel^=lightcase]').lightcase();});
  </script>

• 打開 functions.php 裡面新增下述程式碼

  // 自動添加 lightcase 標籤屬性 
  add_filter('the_content', 'lightcase_replace');   
  function lightcase_replace ($content) {   
    global $post;   
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";   
    $replacement = '<a$1href=$2$3.$4$5 data-rel="lightcase"$6>$7</a>';   
    $content = preg_replace($pattern, $replacement, $content);   
    return $content;   
  }

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

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