Small Gallery. I'm not sure where I'm going with it yet.

src/General/Main.coffee

@@ -160,6 +160,7 @@ Main =
       'Relative Post Dates':       RelativeDates
       'File Info Formatting':      FileInfo
       'Fappe Tyme':                FappeTyme
+      'Gallery':                   Gallery
       'Sauce':                     Sauce
       'Image Expansion':           ImageExpand
       'Image Expansion (Menu)':    ImageExpand.menu

src/General/css/layout.css

@@ -406,6 +406,9 @@ th {
 #img-controls {
   <%= order %>: 20;
 }
+#appchan-gal {
+  <%= order %>: 25;
+}
 #fappeTyme {
   <%= order %>: 30;
 }
@@ -2215,6 +2218,46 @@ article li {
   left: 10px;
   bottom: 0;
 }
+/* Gallery */
+#a-gallery {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  display: <%= flex %>;
+  <%= flex %>-direction: column;
+}
+.gal-viewport {
+  display: <%= flex %>;
+  align-items: stretch;
+  <%= flex %>-direction: row;
+  <%= flex %>: 1 1 auto;
+}
+.gal-thumbnails {
+  <%= flex %>: 0 0 270px;
+  overflow-x: auto;
+}
+.gal-prev {
+  order: 0;
+  <%= flex %>: 0 0 20px;
+}
+.gal-next {
+  order: 2;
+  <%= flex %>: 0 0 20px;
+}
+.gal-image {
+  order: 1;
+  <%= flex %>: 1 0 auto;
+  display: <%= flex %>;
+  align-items: center;
+  justify-content: center;
+}
+.gal-image img {
+  max-height: 100%;
+  max-width: 100%;
+}
 /* Catalog */
 #content .navLinks,
 #info .navLinks,

src/Images/Gallery.coffee

@@ -0,0 +1,81 @@
+Gallery =
+  init: ->
+    el = $.el 'a',
+      href: 'javascript:;'
+      id:   'appchan-gal'
+      title: 'Gallery'
+      className: 'icon'
+      textContent: '\uf03e'
+
+    $.on el, 'click', @cb.toggle
+
+    Header.addShortcut el
+
+    Post::callbacks.push
+      name: 'Gallery'
+      cb: @node
+  
+  node: ->
+    return unless Gallery.el and @file?.isImage
+
+    Gallery.generateThumb $ '.file', @nodes.root
+
+  build: ->
+    Gallery.el = dialog = $.el 'div',
+      id: 'a-gallery'
+      innerHTML: """
+<a href=javascript:; class=gal-close></a>
+<div class=gal-viewport>
+  <div class=gal-prev></div>
+  <div class=gal-image>
+    <img>
+  </div>
+  <div class=gal-next></div>
+</div>
+<div class=gal-thumbnails></div>
+"""
+    files = $$ '.post .file'
+    Gallery.current = $ '.gal-image img', dialog
+    Gallery.thumbs  = $ '.gal-thumbnails', dialog
+    Gallery.images  = []
+
+    $.on ($ '.gal-prev', dialog), 'click', Gallery.cb.prev
+    $.on ($ '.gal-next', dialog), 'click', Gallery.cb.next
+    
+    i = 0
+    while file = files[i++]
+      Gallery.generateThumb file
+    $.add d.body, dialog
+
+  generateThumb: (file) ->
+    image = $ '.fileThumb', file
+    name  = ($ '.fileText a', file).textContent
+    thumb = image.cloneNode true
+
+    thumb.className = 'a-thumb'
+    thumb.name = name
+    thumb.dataset.id   = Gallery.images.length
+
+    $.on thumb, 'click', Gallery.cb.open
+
+    Gallery.images.push thumb
+    $.add Gallery.thumbs, thumb
+  
+  cb:
+    open: (e) ->
+      if e
+        e.preventDefault()
+      Gallery.current.dataset.id = @dataset.id
+      Gallery.current.src = @href
+      Gallery.current.name = @name
+    prev: ->
+      Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id - 1]
+    next: ->
+      Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id + 1]
+    toggle: ->
+      if Gallery.el
+        return Gallery.close()
+      Gallery.build()
+    close: ->
+      $.rm Gallery.el
+      delete Gallery.el