Add option for custom buttons (#245)

robistek · web-flow · commit d8ad2cacfdaf · 2024-07-14T02:12:39.000+02:00
Customize buttons using the following options:
 - leftArrow
 - rightArrow
 - closeX

All options must be strings and valid HTML/SVG markup.
diff --git a/src/baguetteBox.js b/src/baguetteBox.js
@@ -48,7 +48,10 @@
             afterShow: null,
             afterHide: null,
             onChange: null,
-            overlayBackgroundColor: 'rgba(0,0,0,.8)'
+            overlayBackgroundColor: 'rgba(0,0,0,.8)',
+            closeX: closeX,
+            leftArrow: leftArrow,
+            rightArrow: rightArrow
         };
     // Object containing information about features compatibility
     var supports = {};
@@ -398,6 +401,12 @@
         }
         // Set buttons style to hide or display them
         previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none');
+        // Set custom markup for buttons
+        closeButton.innerHTML = options.closeX;
+        if (options.buttons) {
+            previousButton.innerHTML = options.leftArrow;
+            nextButton.innerHTML = options.rightArrow;
+        }
         // Set overlay color
         try {
             overlay.style.backgroundColor = options.overlayBackgroundColor;
