add lightbox for image

layout/_partial/_third-party/swipebox.ejs

@@ -0,0 +1,9 @@
+<script type="text/javascript">
+;( function( $ ) {
+
+	$( '.swipebox' ).swipebox({
+		hideCloseButtonOnMobile: true
+	});
+
+} )( jQuery );
+</script>

layout/_partial/head.ejs

@@ -35,6 +35,7 @@
     %>
     <meta name="keywords" content="<%= keyWords %>">
     <%- favicon_tag(theme.favicon) %>
+    <link rel="stylesheet" href="<%- url_for(theme_css('/css/third-party/swipebox.min', cache)) %>">
     <link rel="stylesheet" href="<%- url_for(theme_css('/css/style', cache)) %>">
     <% if (!theme.valine.enable && theme.gitment.enable) { %>
         <link rel="stylesheet" href="<%- url_for(theme_css('/css/third-party/gitment', cache)) %>">

layout/_partial/post.ejs

@@ -11,6 +11,19 @@
         </div>
         <div class="post-content" id="post-content" itemprop="postContent">
             <%
+                post.content = post.content.replace(/<img([^>]+)>/g, function(img) {
+                    var src = img.replace(/<img.+src(="([^"]+)")*.+>/, function($1, $2, $3) {
+                        return $3;
+                    });
+                    var title = img.replace(/<img.+title(="([^"]+)")*.+>/, function($1, $2, $3) {
+                        return $3;
+                    });
+                    var alt = img.replace(/<img.+alt(="([^"]+)")*.+>/, function($1, $2, $3) {
+                        return $3;
+                    });
+                    title = title ? title : (alt ? alt : "");
+                    return `<a rel=${post.title} href="${src}" class="swipebox" title=${title}>${img}</a>`
+                });
                 post.content = post.content.replace(/<table class="table">(.+)<\/table>/, function(match, $1) {
                     $1 = $1.replace(/<br>/g, '');
                     return `<table>${$1}</table>`;

layout/_partial/script.ejs

@@ -1,13 +1,17 @@
 <!-- main-js -->
-<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
+<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
 <script type="text/javascript" src="<%- url_for(theme_js('/js/plugins/fastclick', cache)) %>"></script>
+<script type="text/javascript" src="<%- url_for(theme_js('/js/plugins/ios-orientationchange-fix', cache)) %>"></script>
+<script type="text/javascript" src="<%- url_for(theme_js('/js/plugins/jquery.swipebox.min', cache)) %>"></script>
 <% if (theme.waves) { %>
 <script type="text/javascript" src="https://cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
 <% } %>
 <script type="text/javascript" src="<%- url_for(theme_js('/js/method', cache)) %>"></script>
 <script type="text/javascript" src="<%- url_for(theme_js('/js/blog', cache)) %>"></script>
 
 <!-- third-party -->
+<%- partial("_third-party/swipebox") %>
+
 <% if (page.repo) { %>
     <%- partial("_third-party/github_repo") %>
 <% } %>

layout/index.ejs

@@ -1,29 +1,29 @@
-<% if (is_home()) { %>
-    <%- partial('_partial/header', {
-        title: config.title,
-        hdClass: 'index-header'
-    }) %>
-    <div class="container body-wrap">
-        <ul class="post-list">
-        <% 
-        if (theme.articleSort) {
-            site.posts.data = site.posts.data.sort(function(a, b) {
-                return Number(a.updated.format('x')) < Number(b.updated.format('x')) ? 1 : -1;
-            });
-        }
-        var perPage = config.per_page || config.index_generator.per_page || config.topindex_generator.per_page || 10;
-        var startIndex = (page.current - 1) * perPage;
-        var endIndex = startIndex + perPage;
-        site.posts.slice(startIndex, endIndex).forEach(function (post, index) { %>
-            <li class="post-list-item fade">
-                <%- partial('_partial/index-item', {
-                    post: post,
-                    index: index,
-                    total: page.posts.length
-                }) %>
-            </li>
-        <% }) %>
-        </ul>
-        <%- partial('_partial/paginator') %>
-    </div>
+<% if (is_home()) { %>
+    <%- partial('_partial/header', {
+        title: config.title,
+        hdClass: 'index-header'
+    }) %>
+    <div class="container body-wrap">
+        <ul class="post-list">
+        <% 
+        if (theme.articleSort) {
+            site.posts.data = site.posts.data.sort(function(a, b) {
+                return Number(a.updated.format('x')) < Number(b.updated.format('x')) ? 1 : -1;
+            });
+        }
+        var perPage = config.per_page || config.index_generator.per_page || config.topindex_generator.per_page || 10;
+        var startIndex = (page.current - 1) * perPage;
+        var endIndex = startIndex + perPage;
+        site.posts.slice(startIndex, endIndex).forEach(function (post, index) { %>
+            <li class="post-list-item fade">
+                <%- partial('_partial/index-item', {
+                    post: post,
+                    index: index,
+                    total: page.posts.length
+                }) %>
+            </li>
+        <% }) %>
+        </ul>
+        <%- partial('_partial/paginator') %>
+    </div>
 <% } %>

layout/page.ejs

@@ -5,6 +5,19 @@
 <%
     page.reward = 'reward' in page ? !!theme.reward && !!page.reward : !!theme.reward;
     page.slug = 'hexo-page-' + page.path.replace(/\/index\.html$/,'').split('/').join('-');
+    page.content = page.content.replace(/<img([^>]+)>/g, function(img) {
+        var src = img.replace(/<img.+src(="([^"]+)")*.+>/, function($1, $2, $3) {
+            return $3;
+        });
+        var title = img.replace(/<img.+title(="([^"]+)")*.+>/, function($1, $2, $3) {
+            return $3;
+        });
+        var alt = img.replace(/<img.+alt(="([^"]+)")*.+>/, function($1, $2, $3) {
+            return $3;
+        });
+        title = title ? title : (alt ? alt : "");
+        return `<a rel=${page.title} href="${src}" class="swipebox" title=${title}>${img}</a>`
+    });
 %>
 <div class="container body-wrap">
     <article class="page-article fade" itemprop="blogPage">

source/js/plugins/ios-orientationchange-fix.js

@@ -0,0 +1,56 @@
+/*! A fix for the iOS orientationchange zoom bug.
+ Script by @scottjehl, rebound by @wilto.
+ MIT / GPLv2 License.
+*/
+(function(w){
+
+	// This fix addresses an iOS bug, so return early if the UA claims it's something else.
+	var ua = navigator.userAgent;
+	if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
+		return;
+	}
+
+    var doc = w.document;
+
+    if( !doc.querySelector ){ return; }
+
+    var meta = doc.querySelector( "meta[name=viewport]" ),
+        initialContent = meta && meta.getAttribute( "content" ),
+        disabledZoom = initialContent + ",maximum-scale=1",
+        enabledZoom = initialContent + ",maximum-scale=10",
+        enabled = true,
+		x, y, z, aig;
+
+    if( !meta ){ return; }
+
+    function restoreZoom(){
+        meta.setAttribute( "content", enabledZoom );
+        enabled = true;
+    }
+
+    function disableZoom(){
+        meta.setAttribute( "content", disabledZoom );
+        enabled = false;
+    }
+
+    function checkTilt( e ){
+		aig = e.accelerationIncludingGravity;
+		x = Math.abs( aig.x );
+		y = Math.abs( aig.y );
+		z = Math.abs( aig.z );
+
+		// If portrait orientation and in one of the danger zones
+        if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
+			if( enabled ){
+				disableZoom();
+			}        	
+        }
+		else if( !enabled ){
+			restoreZoom();
+        }
+    }
+
+	w.addEventListener( "orientationchange", restoreZoom, false );
+	w.addEventListener( "devicemotion", checkTilt, false );
+
+})( this );