Finish up Gallery for the time being

src/General/css/layout.css

@@ -1791,29 +1791,29 @@ a:only-of-type > .remove {
 }
 /* Ads */
 .fade-ads .topad img,
-.fade-ads .middlead img,
 .fade-ads .bottomad img {
   opacity: 0.3;
   transition: opacity .3s linear;
 }
 .fade-ads .topad img:hover,
-.fade-ads .middlead img:hover,
 .fade-ads .bottomad img:hover {
   opacity: 1;
 }
 .hide-ads .bottomad + hr,
 .hide-ads .topad,
-.hide-ads .middlead,
 .hide-ads .bottomad,
 .hide-ads .ad-plea {
   display: none;
 }
 .shrink-ads .topad a img,
-.shrink-ads .middlead a img,
 .shrink-ads .bottomad a img {
   width: 500px;
   height: auto;
 }
+.ad-plea-middle,
+.middlead {
+  display: none;
+}
 /* Mascot Positions */
 #mascot {
   display: none;
@@ -2244,17 +2244,12 @@ article li {
   <%= flex %>-direction: row;
   background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.5));
 }
-.gal-close {
-  position: fixed;
-  top: 10px;
-  left: 25px;
-  font-size: 20px;
-}
 .gal-viewport {
   display: <%= flex %>;
   <%= align %>-items: stretch;
   <%= flex %>-direction: row;
   <%= flex %>: 1 1 auto;
+  position: relative;
 }
 .gal-thumbnails {
   <%= flex %>: 0 0 150px;
@@ -2323,6 +2318,7 @@ article li {
   overflow: auto;
   /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
   width: 1%;
+  padding-top: 4em;
 }
 .gal-image a {
   margin: auto;
@@ -2330,6 +2326,31 @@ article li {
 .gal-image img {
   max-width: 100%;
 }
+.gal-info {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  left: 20px;
+  height: 4em;
+  background-color: rgba(0,0,0,0.3);
+  text-align: center;
+  text-overflow: ellipsis
+  overflow: hidden;
+  padding: 0 20px;
+}
+.gal-close {
+  font-size: 2.8em;
+  float: right;
+  padding-right: 8px;
+}
+.gal-name {
+  font-size: 2.8em;
+  color: #ddd;
+}
+.gal-count {
+  font-size: 1.6em;
+  color: #ddd;
+}
 /* Catalog */
 #content .navLinks,
 #info .navLinks,

src/Images/Gallery.coffee

@@ -19,8 +19,9 @@ Gallery =
 
   node: ->
     return unless @file?.isImage
-
-    Gallery.generateThumb $ '.file', @nodes.root if Gallery.el
+    if Gallery.el
+      Gallery.generateThumb $ '.file', @nodes.root
+      Gallery.total.textContent = Gallery.images.length
 
     unless Conf['Image Expansion']
       $.on @file.thumb.parentNode, 'click', Gallery.cb.image
@@ -29,24 +30,35 @@ Gallery =
     Gallery.el = dialog = $.el 'div',
       id: 'a-gallery'
       innerHTML: """
-<a href=javascript:; class=gal-close>✖</a>
 <div class=gal-viewport>
+  <div class=gal-info>
+    <a href=javascript:; class=gal-close>✖</a>
+    <a class=gal-name></a>
+    <span class=gal-count>(<span class='count'></span> / <span class='total'></span>)</a>
+  </div>
   <div class=gal-prev></div>
   <div class=gal-image>
-    <a><img></a>
+    <a href=javascript:;><img></a>
   </div>
   <div class=gal-next></div>
 </div>
 <div class=gal-thumbnails></div>
 """
-    Gallery.frame   = $ '.gal-image', dialog
-    Gallery.url     = $ 'a',          Gallery.frame
-    Gallery.current = $ 'img',        Gallery.url
-    Gallery.thumbs  = $ '.gal-thumbnails', dialog
+    Gallery[key] = $ value, dialog for key, value of {
+      frame:   '.gal-image'
+      name:    '.gal-name'
+      count:   '.count'
+      total:   '.total'
+      thumbs:  '.gal-thumbnails'
+      next:    '.gal-image a'
+      current: '.gal-image img'
+    }
+
     Gallery.images  = []
 
-    $.on Gallery.current, 'click', Gallery.cb.download
-
+    $.on Gallery.frame,            'click', Gallery.cb.blank
+    $.on Gallery.current,          'click', Gallery.cb.download
+    $.on Gallery.next,             'click', Gallery.cb.next
     $.on ($ '.gal-prev',  dialog), 'click', Gallery.cb.prev
     $.on ($ '.gal-next',  dialog), 'click', Gallery.cb.next
     $.on ($ '.gal-close', dialog), 'click', Gallery.cb.close
@@ -69,6 +81,7 @@ Gallery =
       Gallery.images[0]
 
     d.body.style.overflow = 'hidden'
+    Gallery.total.textContent = --i
 
   generateThumb: (file) ->
     title = ($ '.fileText a', file).textContent
@@ -110,14 +123,15 @@ Gallery =
       $.addClass @,  'gal-highlight'
 
       img = $.el 'img',
-        src:   Gallery.url.href     = @href
-        title: Gallery.url.download = @title
+        src:   Gallery.name.href     = @href
+        title: Gallery.name.download = Gallery.name.textContent = @title
 
       img.dataset.id = @dataset.id
       $.replace Gallery.current, img
+      Gallery.count.textContent = +@dataset.id + 1
       Gallery.current = img
       Gallery.frame.scrollTop = 0
-      Gallery.url.focus()
+      Gallery.current.focus()
 
     image: (e) ->
       e.preventDefault()
@@ -127,6 +141,7 @@ Gallery =
     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 then Gallery.cb.close else Gallery.build)()
+    blank: (e) -> Gallery.cb.close() if e.target is @
 
     close: ->
       $.rm Gallery.el