Activate BlueImp gallery viewer

public/theme.css

@@ -63,18 +63,18 @@ nav li:not(.active):hover {
   background-color: #eee;
 }
 
-.gallery li {
+#gallery li {
   display: inline-block;
   margin-right: 0.5em;
   margin-bottom: 0.5em;
   position: relative;
 }
 
-.gallery img {
+#gallery img {
   border-radius: 2px;
 }
 
-.gallery .play-overlay {
+#gallery .play-overlay {
   color: #fff;
   font-size: 2em;
   height: 100%;

src/index.js

@@ -14,7 +14,6 @@ exports.build = function(opts) {
 
   fs.mkdirp(opts.output);
   var list = galleries.fromDisk(opts.input, opts.mediaPrefix);
-  console.log(require('util').inspect(list, {depth:6, color:true}))
   
   gulp.task('thumbs', function () {
     var dest = opts.output + '/thumbs';
@@ -26,7 +25,8 @@ exports.build = function(opts) {
   });
   
   gulp.task('index', function() {
-    // render('index.hbs', {salt: SALT}, 'index.html');
+    // TODO render index page
+    // render.index(...);
   });
   
   gulp.task('public', function() {
@@ -38,9 +38,6 @@ exports.build = function(opts) {
   });
   
   gulp.task('galleries', function() {
-    // var dest = opts.output + '/galleries';
-    // wrench.rmdirSyncRecursive(dest, true);
-    // fs.mkdirp(dest);
     list.forEach(function(folder) {
       var rendered = render.gallery(list, folder);
       var outputPath = path.join(opts.output, folder.url);

templates/gallery.hbs

@@ -28,7 +28,7 @@
       </ul>
     </nav>
 
-    <ul class="gallery">
+    <ul id="gallery">
       {{#each gallery.media}}<li>
         {{#if media.video}}
           <a href="{{url}}"
@@ -59,6 +59,17 @@
     <script src="public/blueimp/js/blueimp-gallery-video.js"></script>
     <script src="public/blueimp/js/blueimp-gallery-indicator.js"></script>
 
+    <script>
+      document.getElementById('gallery').onclick = function(event) {
+        event = event || window.event;
+        var target = event.target || event.srcElement,
+            link = target.src ? target.parentNode : target,
+            options = {index: link, event: event},
+            links = this.getElementsByTagName('a');
+        blueimp.Gallery(links, options);
+      };
+    </script>
+
   </body>
 
 </html>