Merge pull request #60 from zhaohaihao/master

图片放大功能实现

layout/_partial/scripts.ejs

@@ -171,3 +171,10 @@
 <% (config.import.script||[]).forEach(function(item){ %>
 <%- item %><% }) %>
 <% } %>
+
+<!-- fancybox start -->
+<script src="/js/fancybox-use.js"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
+<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
+<!-- fancybox end -->

source/js/fancybox-use.js

@@ -0,0 +1,13 @@
+// 集成fancybox, 只为文章中所有img元素添加父元素
+$(".article-entry").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,
+     * 修改如下
+     */
+    // $(element).attr("href", $(this).attr("data-original"));  
+    $(this).wrap(element);
+});