css: Support image gallery feature

yona-projects · Sep 24, 2017 · 14b787e · 14b787e
1 parent 1ee4a9b
commit 14b787e
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/app/views/layout.scala.html b/app/views/layout.scala.html
@@ -62,18 +62,26 @@
     <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")
+        $(function () {
+            $(".markdown-wrap").each(function () { // the containers for all your galleries
+                var that = $(this);
+                that.find("img").on("mouseover", function(){
+                    $(this).css("cursor", "pointer");
+                });
+                that.magnificPopup({
+                    delegate: 'img',
+                    type: 'image',
+                    gallery: {
+                        enabled: true
                     },
-                    type: 'image'
+                    callbacks: {
+                        elementParse: function (item) {
+                            item.src = item.el.attr('src');
+                        }
+                    }
                 });
-            }).on("mouseover", function () {
-                var img = $(this);
-                img.css("cursor", "pointer");
             });
+        })
     </script>
 
     @if(Application.SEND_YONA_USAGE){