替文章圖片套用 lightcase 功能

原本的主題並沒有點選圖片即可針對不同裝置放大圖片的功能，為了有更方便的閱讀體驗，上網找到了這個 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" rel="nofollow" target="_blank" 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>

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;   
}

//自動添加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' 效果會稍微好點，圖片會依照不同的螢幕大小有自適應的功能！但是仍然以螢幕能直接完整觀看整個圖片為主。