Image popup

static/css/style.css

@@ -329,3 +329,50 @@ pre, code, kbd, samp
 .panel {
 	padding-bottom: 12px;
 }
+
+.popup{
+    width: 900px;
+    margin: auto;
+    text-align: center
+}
+.popup img{
+    width: 200px;
+    height: 200px;
+    cursor: pointer
+}
+.show{
+    z-index: 999;
+    display: none;
+}
+.show .overlay{
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,.66);
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.show .img-show{
+    width: 600px;
+    height: 400px;
+    background: #FFF;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    overflow: hidden
+}
+.img-show span{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 99;
+    cursor: pointer;
+}
+.img-show img{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}

static/js/image-popup.js

@@ -0,0 +1,14 @@
+$(function () {
+    "use strict";
+    
+    $(".popup img").click(function () {
+        var $src = $(this).attr("src");
+        $(".show").fadeIn();
+        $(".img-show img").attr("src", $src);
+    });
+    
+    $("span, .overlay").click(function () {
+        $(".show").fadeOut();
+    });
+    
+});

templates/article.html

@@ -87,6 +87,13 @@
                 </div>
                 {{ article.content }}
             </div>
+	    <div class="show">
+		    <div class="overlay"></div>
+		    <div class="img-show">
+			    <span>X</span>
+			    <img src="">
+		    </div>
+	    </div>
             <!-- /.entry-content -->
             {% include 'includes/related-posts.html' %}
             {% include 'includes/series.html' %}

templates/base.html

@@ -265,6 +265,7 @@
 		{% if BANNER %}
 		<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/bodypadding.js"></script>
 		{% endif %}
+		<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/image-popup.js"></script>
 		{% include 'includes/sidebar/github-js.html' %}
 		{% include 'includes/disqus_script.html' %}
 		{% include 'includes/ga.html' %}