Use image gallery feature of magnific

commit cc7061e9458d04dd02aad9c02ba3a89306e0fae7
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 11:21:08 2017 +0900

    ;

commit 9233be7e432daff605812e6b49042f69d348b6e7
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 10:01:26 2017 +0900

    Don't break if $elem is undefined

commit 598a694c070c86df8d9f5ffa1ed84e2f8756e65f
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:51:14 2017 +0900

    .

commit 1711685a33ccd236011f54d3e652991728530b3a
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:34:11 2017 +0900

    ;

commit 81703f36c0593250aeac3418fde86660fd307092
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:12:37 2017 +0900

    Use image gallery functionality in magnific

app/assets/javascripts/discourse/lib/lightbox.js.es6

@@ -2,47 +2,47 @@ import loadScript from 'discourse/lib/load-script';
 import { escapeExpression } from 'discourse/lib/utilities';
 
 export default function($elem) {
-  $("a.lightbox", $elem).each(function(i, e) {
+  if (!$elem) { return; }
-    loadScript("/javascripts/jquery.magnific-popup-min.js").then(function() {
+  loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
-      const $e = $(e);
+    const spoilers = $elem.find('.spoiler a.lightbox, .spoiled a.lightbox');
-      // do not lightbox spoiled images
+    $elem.find('a.lightbox').not(spoilers).magnificPopup({
-      if ($e.parents(".spoiler").length > 0 || $e.parents(".spoiled").length > 0) { return; }
+      type: "image",
+      closeOnContentClick: false,
+      removalDelay: 300,
+      mainClass: "mfp-zoom-in",
 
-      $e.magnificPopup({
+      gallery: {
-        type: "image",
+        enabled: true
-        closeOnContentClick: false,
+      },
-        removalDelay: 300,
-        mainClass: "mfp-zoom-in",
 
-        callbacks: {
+      callbacks: {
-          open() {
+        open() {
-            const wrap = this.wrap,
+          const wrap = this.wrap,
-                  img = this.currItem.img,
+                img = this.currItem.img,
-                  maxHeight = img.css("max-height");
+                maxHeight = img.css("max-height");
 
-            wrap.on("click.pinhandler", "img", function() {
+          wrap.on("click.pinhandler", "img", function() {
-              wrap.toggleClass("mfp-force-scrollbars");
+            wrap.toggleClass("mfp-force-scrollbars");
-              img.css("max-height", wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight);
+            img.css("max-height", wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight);
-            });
+          });
-          },
-          beforeClose() {
-            this.wrap.off("click.pinhandler");
-            this.wrap.removeClass("mfp-force-scrollbars");
-          }
         },
-
+        beforeClose() {
-        image: {
+          this.wrap.off("click.pinhandler");
-          titleSrc(item) {
+          this.wrap.removeClass("mfp-force-scrollbars");
-            const href = item.el.data("download-href") || item.src;
-            let src = [escapeExpression(item.el.attr("title")), $("span.informations", item.el).text().replace('x', '×')];
-            if (!Discourse.SiteSettings.prevent_anons_from_downloading_files || Discourse.User.current()) {
-              src.push('<a class="image-source-link" href="' + href + '">' + I18n.t("lightbox.download") + '</a>');
-            }
-            return src.join(' &middot; ');
-          }
         }
+      },
+
+      image: {
+        titleSrc(item) {
+          const href = item.el.data("download-href") || item.src;
+          let src = [escapeExpression(item.el.attr("title")), $("span.informations", item.el).text().replace('x', '&times;')];
+          if (!Discourse.SiteSettings.prevent_anons_from_downloading_files || Discourse.User.current()) {
+            src.push('<a class="image-source-link" href="' + href + '">' + I18n.t("lightbox.download") + '</a>');
+          }
+          return src.join(' &middot; ');
+        }
+      }
 
-      });
     });
   });
 }

test/javascripts/test_helper.js

@@ -39,7 +39,7 @@
 //= require plugin_tests
 //= require_self
 //
-//= require jquery.magnific-popup-min.js
+//= require jquery.magnific-popup.min.js
 
 window.inTestEnv = true;