css: Support image popup at contents on click

yona-projects · Sep 24, 2017 · 1ee4a9b · 1ee4a9b
1 parent 1ad9eae
commit 1ee4a9b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/app/assets/stylesheets/less/_markdown.less b/app/assets/stylesheets/less/_markdown.less
@@ -159,6 +159,7 @@ code {
     border:1px solid rgba(0,0,0,0.1);
     .box-shadow(2px 2px 5px rgba(0,0,0,0.15));
     .box-sizing(border-box);
+    max-height: 300px;
   }
 
   ul {

diff --git a/app/views/layout.scala.html b/app/views/layout.scala.html
@@ -31,6 +31,7 @@
 <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/usermenu.css")">
 <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobi.css")">
 <link rel='stylesheet' href="@routes.Assets.at("javascripts/lib/nprogress/nprogress.css")"/>
+<link rel="stylesheet" href="@routes.Assets.at("javascripts/lib/magnific-popup/magnific-popup.css")" />
 <script type="text/javascript" src="@routes.Assets.at("javascripts/yona-layout.js")"></script>
 
 </head>
@@ -58,6 +59,22 @@
         var UsermenuUrl = "@routes.UserApp.usermenuTabContentList()";
     </script>
     <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yona.Usermenu.js")"></script>
+    <script src="@routes.Assets.at("javascripts/lib/magnific-popup/jquery.magnific-popup.js")"></script>
+
+    <script>
+            $(".markdown-wrap").find("img").on("click", function () {
+                var img = $(this);
+                $.magnificPopup.open({
+                    items: {
+                        src: img.attr("src")
+                    },
+                    type: 'image'
+                });
+            }).on("mouseover", function () {
+                var img = $(this);
+                img.css("cursor", "pointer");
+            });
+    </script>
 
     @if(Application.SEND_YONA_USAGE){
     <script>