2 files changed, 40 insertions, 6 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index fc375f6a2..971e8f2ac 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -68,16 +68,28 @@
         color: black;
     }
 
-    .mainView-lightBoxFrame {
+    .mainView-lightBox-frame {
         position: absolute; 
         top: 0; left: 0;
         width: 100%;
         height: 100%;
         background: #000000bb;
         z-index: 10000;
-    }
-    .mainView-lightBoxContents {
-        position: absolute;
+        .mainView-lightBox-contents {
+            position: absolute;
+        }
+        .mainView-lightBox-navBtn {
+            margin: auto;
+            position: relative;
+            background: transparent;
+            border-radius: 8;
+            color:white;
+            opacity: 0.7;
+            width: 30;
+            &:hover {
+                opacity: 1;
+            }
+        }
     }
 }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8598a7303..1f96a26a4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -597,10 +597,13 @@ export class MainView extends React.Component {
     lightboxWidth = () => window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2;
     lightboxHeight = () => window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2;
     lightboxScreenToLocal = () => new Transform(-Math.min(window.innerWidth / 4, 200), -Math.min(window.innerHeight / 4, 100), 1);
+    lightboxHistory: (Opt<Doc>)[] = [];
+    lightboxFuture: (Opt<Doc>)[] = [];
     @computed get lightboxView() {
+        if (this.lightboxHistory.lastElement() !== this.LightboxDoc) this.lightboxHistory.push(this.LightboxDoc);
         return !this.LightboxDoc ? (null) :
-            <div className="mainView-lightBoxFrame" onPointerDown={action(() => this.LightboxDoc = undefined)}  >
-                <div className="mainView-lightBoxContents" style={{
+            <div className="mainView-lightBox-frame" onClick={action(() => this.LightboxDoc = undefined)}  >
+                <div className="mainView-lightBox-contents" style={{
                     left: Math.min(window.innerWidth / 4, 200),
                     top: Math.min(window.innerHeight / 4, 100),
                     width: window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2,
@@ -630,6 +633,25 @@ export class MainView extends React.Component {
                         ContainingCollectionDoc={undefined}
                         renderDepth={0} />
                 </div>
+                <div style={{ position: "absolute", width: Math.min(window.innerWidth / 4, 200) }}>
+                    <div className="mainView-lightBox-navBtn" style={{ top: window.innerHeight / 2 - 12.50 }}
+                        onClick={action(e => {
+                            e.stopPropagation();
+                            if (this.lightboxHistory.lastElement() !== this.lightboxFuture.lastElement()) this.lightboxFuture.push(this.lightboxHistory.pop());
+                            this.LightboxDoc = this.lightboxHistory.lastElement();
+                        })}>
+                        <FontAwesomeIcon icon={"chevron-left"} size="3x" />
+                    </div>
+                </div>
+                <div style={{ position: "absolute", left: window.innerWidth - Math.min(window.innerWidth / 4, 200), width: Math.min(window.innerWidth / 4, 200) }}>
+                    <div className="mainView-lightBox-navBtn" style={{ top: window.innerHeight / 2 - 12.50 }}
+                        onClick={action(e => {
+                            e.stopPropagation();
+                            this.LightboxDoc = this.lightboxFuture.pop();
+                        })}>
+                        <FontAwesomeIcon icon={"chevron-right"} size="3x" />
+                    </div>
+                </div>
             </div>;
     }