Merge pull request #4831 from gdpelican/image-gallery

FEATURE: Use image gallery functionality in magnific

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

@@ -2,18 +2,19 @@ import loadScript from 'discourse/lib/load-script';
 import { escapeExpression } from 'discourse/lib/utilities';
 
 export default function($elem) {
-  $("a.lightbox", $elem).each(function(i, e) {
-    loadScript("/javascripts/jquery.magnific-popup-min.js").then(function() {
-      const $e = $(e);
-      // do not lightbox spoiled images
-      if ($e.parents(".spoiler").length > 0 || $e.parents(".spoiled").length > 0) { return; }
-
-      $e.magnificPopup({
+  if (!$elem) { return; }
+  loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
+    const spoilers = $elem.find('.spoiler a.lightbox, .spoiled a.lightbox');
+    $elem.find('a.lightbox').not(spoilers).magnificPopup({
       type: "image",
       closeOnContentClick: false,
       removalDelay: 300,
       mainClass: "mfp-zoom-in",
 
+      gallery: {
+        enabled: true
+      },
+
       callbacks: {
         open() {
           const wrap = this.wrap,
@@ -44,5 +45,4 @@ export default function($elem) {
 
     });
   });
-  });
 }

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;