diff --git a/layout/_third-party/fancybox.ejs b/layout/_third-party/fancybox.ejs
index bf0aca4..545a1a7 100644
--- a/layout/_third-party/fancybox.ejs
+++ b/layout/_third-party/fancybox.ejs
@@ -1,18 +1,43 @@
 <script src="<%- theme.plugins.fancybox.js %>"></script>
 <script>
-  let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
-  $(".article-entry").find("div.fancybox").find("img").each(function () {
-      var element = document.createElement("a");
-      $(element).attr("data-fancybox", "gallery");
-      $(element).attr("href", $(this).attr("src"));
-      /* 图片采用懒加载处理时,
-       * 一般图片标签内会有个属性名来存放图片的真实地址，比如 data-original,
-       * 那么此处将原本的属性名src替换为对应属性名data-original,
-       * 修改如下
-       */
-       if (LAZY_LOAD_IMAGE) {
-         $(element).attr("href", $(this).attr("data-original"));
-       }
-      $(this).wrap(element);
+  function pjax_fancybox() {
+    let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
+    $(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
+      var element = document.createElement("a"); // a 标签
+      $(element).attr("pjax-fancybox", "");  // 过滤 pjax
+      if (LAZY_LOAD_IMAGE) {
+        $(element).attr("href", $(this).attr("data-original"));
+      }
+      $(element).attr("data-fancybox", "images");
+      var caption = "";   // 描述信息
+      if ($(this).attr('alt')) {  // 标准 markdown 描述信息
+        $(element).attr('data-caption', $(this).attr('alt'));
+        caption = $(this).attr('alt');
+      }
+      var div = document.createElement("div");
+      $(div).addClass("fancybox");
+      $(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式
+      var span = document.createElement("span");
+      $(span).addClass("image-caption");
+      $(span).text(caption); // 加描述
+      $(this).after(span);  // 再套一层描述
+      $(this).wrap(element);  // 最后套 a 标签
+    })
+    $(".article-entry").find("img").fancybox({
+      selector: '[data-fancybox="images"]',
+      hash: false,
+      loop: false,
+      closeClick: true,
+      helpers: {
+        overlay: {closeClick: true}
+      },
+      buttons: [
+        "zoom",
+        "close"
+      ]
+    });
+  };
+  $(function () {
+    pjax_fancybox();
   });
 </script>
diff --git a/scripts/tags/fancybox.js b/scripts/tags/fancybox.js
index a9460d8..1f10a44 100644
--- a/scripts/tags/fancybox.js
+++ b/scripts/tags/fancybox.js
@@ -5,11 +5,11 @@ function postFancybox(args, content) {
   var cls = args[0];
   var col = Number(args[1]) || 0;
   if (col > 0) {
-    return `<div class="fancybox ${cls}" col='${col}'>
+    return `<div class="gallery ${cls}" col='${col}'>
               ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
             </div>`;
   } else {
-    return `<div class="fancybox ${cls}">
+    return `<div class="gallery ${cls}">
               ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
             </div>`;
   }
diff --git a/scripts/tags/image.js b/scripts/tags/image.js
index 2b9a71e..d3ba83a 100644
--- a/scripts/tags/image.js
+++ b/scripts/tags/image.js
@@ -5,10 +5,13 @@ function postImage(args) {
   let url = (args[0]||'').trim()
   let title = ''
   let width = ''
+  let cls = ''
   function getP2(p2) {
     let px = p2.match(/^[0-9]*px$/g)
     if (px) {
       width = px[0]
+    } else if (p2 == 'inline') {
+      cls = 'class="inline"'
     } else {
       title = p2
     }
@@ -21,25 +24,15 @@ function postImage(args) {
   }
   if (width.length > 0) {
     if (title.length > 0) {
-      return `<div class="fancybox caption">
-                <img src='${url}' style='width:${width}'>
-                <span class='image-caption'>${title}</span>
-              </div>`;
+      return `<img src='${url}' alt='${title}' style='width:${width}'>`;
     } else {
-      return `<div class="fancybox caption">
-                <img src='${url}' style='width:${width}'>
-              </div>`;
+      return `<img src='${url}' style='width:${width}'>`;
     }
   } else {
     if (title.length > 0) {
-      return `<div class="fancybox caption">
-                <img src='${url}'>
-                <span class='image-caption'>${title}</span>
-              </div>`;
+      return `<img src='${url}' alt='${title}'>`;
     } else {
-      return `<div class="fancybox caption">
-                <img src='${url}'>
-              </div>`;
+      return `<img src='${url}'>`;
     }
   }
 }
diff --git a/source/css/_third-party/fancybox.styl b/source/css/_third-party/fancybox.styl
index 06eeabe..e750662 100644
--- a/source/css/_third-party/fancybox.styl
+++ b/source/css/_third-party/fancybox.styl
@@ -1,42 +1,51 @@
-div.fancybox
+div.gallery
   margin: $gap-row 0
   overflow: hidden
   $sp = 1px
-  >a,>p>a
+  >.fancybox,>p>.fancybox
     margin: $sp
     padding: 0
-    line-height: 0
-    overflow: hidden
-    align-items: stretch
-    border-radius: 2px
-    cursor: zoom-in
-    @media screen and (max-width: $device-mobile)
-      border-radius: 1px
-
-  br
-    display: none !important
+    position: relative
+    .image-caption
+      opacity: 0
+      transform: translateY(100%)
+      transition: all 0.3s ease
+      pointer-events: none
+      position: absolute
+      width: 100%
+      bottom: 0
+      text-align: center
+      background: rgba(0, 0, 0, 0.3)
+      color: #fff
+      &:empty
+        display:none
+    &:hover
+      .image-caption
+        opacity: 1
+        transform: translateY(0)
   &,>p
     display: flex
     justify-content: center
     align-items: center
     flex-wrap: nowrap
     padding: 0 !important
+    align-items: stretch
   &[col]>p
     flex-wrap: wrap
     justify-content: flex-start
-  &[col='2']>p>a
+  &[col='2']>p>.fancybox
     width: "calc(50% - 2 * %s)" % $sp
-  &[col='3']>p>a
+  &[col='3']>p>.fancybox
     width: "calc(33.33% - 2 * %s)" % $sp
-  &[col='4']>p>a
+  &[col='4']>p>.fancybox
     width: "calc(25% - 2 * %s)" % $sp
-  &[col='5']>p>a
+  &[col='5']>p>.fancybox
     width: "calc(20% - 2 * %s)" % $sp
-  &[col='6']>p>a
+  &[col='6']>p>.fancybox
     width: "calc(16.66% - 2 * %s)" % $sp
-  &[col='7']>p>a
+  &[col='7']>p>.fancybox
     width: "calc(14.2857% - 2 * %s)" % $sp
-  &[col='8']>p>a
+  &[col='8']>p>.fancybox
     width: "calc(12.5% - 2 * %s)" % $sp
   >p
     margin: 0
@@ -56,13 +65,25 @@ div.fancybox
     cursor: zoom-out
 
 .fancybox
-  &.caption
-    flex-direction: column
-    a
-      margin: 0
-    .gallery
-      overflow: hidden
-    .image-caption
-      font-size: $fontsize-code
-      margin-top: $gap-row
-      color: $color-meta
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  flex-wrap: nowrap
+  padding: 0 !important
+  overflow: hidden
+  border-radius: 2px
+  @media screen and (max-width: $device-mobile)
+    border-radius: 1px
+  a
+    line-height: 0
+    margin: 0
+    align-items: stretch
+    cursor: zoom-in
+  .gallery
+    overflow: hidden
+  .image-caption
+    font-size: $fontsize-code
+    padding-top: $gap-row
+    padding-bottom: $gap-row
+    color: $color-meta