Add viewer js when viewing marhun photo

public/css/app.css

@@ -16805,4 +16805,4 @@ a.article:hover {
 
 .user-info {
   /* display: flex; */
-}
+}

public/css/fix-page-zoom-when-modal-load.css

@@ -0,0 +1,7 @@
+body {
+    padding-right: 0px !important
+}
+
+.modal-open {
+    overflow-y: auto;
+}

public/js/marhun-photo-viewer.js

@@ -0,0 +1,48 @@
+function marhunPhotoViewerFactory(button_selector) {
+
+    return {
+        attachPhotoViewer: function () {
+            document.querySelector(button_selector).addEventListener('click', (event) => {
+            // document.querySelector('a.btn-view-marhun-photo').addEventListener('click', (event) => {
+                event.preventDefault();
+
+                const image = new Image();
+                image.src = event.target.href
+
+                const viewer = new Viewer(image, {
+                    hidden: function () {
+                        viewer.destroy();
+                    },
+                    navbar: false,
+                    title: false,
+                    toolbar: {
+                        zoomIn: {
+                            show: true,
+                            size: 'large',
+                        },
+                        oneToOne: {
+                            show: true,
+                            size: 'large',
+                        },
+                        zoomOut: {
+                            show: true,
+                            size: 'large',
+                        },
+                    },
+                    viewed() {
+                        // Zoom to 50% from the center of the window.
+                        viewer.zoomTo(1.25, {
+                            x: window.innerWidth / 2,
+                            y: viewer.innerHeight / 2,
+                        });
+                    },
+                });
+
+
+                viewer.show();
+
+            })
+
+        }
+    }
+}