图片 zoom

zhima1234 · zhima1234 · commit 64c9a31b4461 · 2017-09-19T22:48:59.000+08:00
diff --git a/static/css/zoom.css b/static/css/zoom.css
@@ -0,0 +1,41 @@
+img[data-action="zoom"] {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+}
+.zoom-img,
+.zoom-img-wrap {
+  position: relative;
+  z-index: 666;
+  -webkit-transition: all 300ms;
+       -o-transition: all 300ms;
+          transition: all 300ms;
+}
+img.zoom-img {
+  cursor: pointer;
+  cursor: -webkit-zoom-out;
+  cursor: -moz-zoom-out;
+}
+.zoom-overlay {
+  z-index: 420;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  -webkit-transition:      opacity 300ms;
+       -o-transition:      opacity 300ms;
+          transition:      opacity 300ms;
+}
+.zoom-overlay-open .zoom-overlay {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+}
+.zoom-overlay-open,
+.zoom-overlay-transitioning {
+  cursor: default;
+}
diff --git a/static/js/comment.js b/static/js/comment.js
@@ -160,6 +160,12 @@
 							var url = $(this).attr('href');
 							$(this).attr('target', '_blank');
 						});
+
+						$('.comment-list .markdown img').attr('data-action', 'zoom');
+
+						$('.comment-list .markdown img').on('click', function() {
+							$(this).parents('.box_white').css('overflow', 'visible');
+						});
 					}
 					$('.comment-list .words').removeClass('hide');
 
diff --git a/static/js/common.js b/static/js/common.js
@@ -459,8 +459,12 @@ jQuery(document).ready(function($) {
 
 	// 图片响应式
 	setTimeout(function(){
-		$('.page .content img').addClass('img-responsive');
-	}, 2000);
+		$('.page .content img').addClass('img-responsive').attr('data-action', 'zoom');
+
+		$('.page .content img').on('click', function() {
+			$(this).parents('.box_white').css('overflow', 'visible');
+		});
+	}, 1000);
 
 	// 表格响应式
 	setTimeout(function() {
diff --git a/static/js/libs/zoom.min.js b/static/js/libs/zoom.min.js
diff --git a/template/common/layout.html b/template/common/layout.html
@@ -17,6 +17,7 @@
 	<!--<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">-->
 	<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
 	<link href="/static/css/main.css?v=1.4" rel="stylesheet"/>
+	<link href="/static/css/zoom.css" rel="stylesheet"/>
 	{{template "css" .}}
 	<style type="text/css">
 	#bottom .nav-content {
@@ -252,6 +253,7 @@
 	<script type="text/javascript" src="/static/js/libs/bootstrap-3.2.0.min.js"></script>
 	<script src="/static/js/libs/jquery.timeago.js?v=1.5.4"></script>
 	<script src="/static/js/libs/jquery.timeago.zh-CN.js?v=1.5.4"></script>
+	<script src="/static/js/libs/zoom.min.js"></script>
 	<script src="/static/js/libs/md5.js"></script>
 	<script type="text/javascript">
 	var uid = {{.me.Uid}};
@@ -264,7 +266,7 @@
 	}
 	var GLaunchTime = {{timestamp .app.LaunchTime}}*1000;
 	</script>
-	<script src="/static/js/common.js?v=1.2"></script>
+	<script src="/static/js/common.js?v=1.7"></script>
 	<script src="//cdn.bootcss.com/lscache/1.1.0/lscache.min.js"></script>
 	<script type="text/javascript" src="/static/js/libs/paste-upload-image.js"></script>
 	{{template "js" .}}
