From f9215ce7ddc958779d25753f6427a1d2de422f28 Mon Sep 17 00:00:00 2001
From: Faldrian <faldrian@och-noe.de>
Date: Sun, 3 Aug 2014 14:41:12 +0200
Subject: [PATCH] images are shown in a single row and can be scrolled using
 buttons on sides

---
 app/assets/javascripts/widgets/lightbox.js | 16 ++++++++++-
 app/assets/stylesheets/lightbox.css.scss   | 32 +++++++++++++++++++---
 app/assets/templates/header_tpl.jst.hbs    |  6 +++-
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js
index 6152762de..f75ddf92a 100644
--- a/app/assets/javascripts/widgets/lightbox.js
+++ b/app/assets/javascripts/widgets/lightbox.js
@@ -28,9 +28,12 @@ jQuery.fn.center = (function() {
     this.subscribe("widget/ready", function(evt) {
       $.extend(self, {
         lightbox: $("#lightbox"),
+        navigation: $("#lightbox-navigation"),
         imageset: $("#lightbox-imageset"),
         backdrop: $("#lightbox-backdrop"),
         closelink: $("#lightbox-close-link"),
+        scrollleft: $("#lightbox-scrollleft"),
+        scrollright: $("#lightbox-scrollright"),
         image: $("#lightbox-image"),
         body: $(document.body),
         window: $(window)
@@ -47,7 +50,6 @@ jQuery.fn.center = (function() {
         evt.preventDefault();
         self.resetLightbox();
       });
-      self.backdrop.click(self.resetLightbox);
       self.lightbox.click(self.resetLightbox);
 
       self.backdrop.click(function(evt) {
@@ -55,6 +57,18 @@ jQuery.fn.center = (function() {
         self.resetLightbox();
       });
 
+      self.scrollleft.click(function(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        self.navigation.scrollLeft(self.navigation.scrollLeft() - (self.window.width() - 150));
+      });
+
+      self.scrollright.click(function(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        self.navigation.scrollLeft(self.navigation.scrollLeft() + (self.window.width() - 150));
+      });
+
       self.body.keydown(function(evt) {
         var imageThumb = self.imageset.find("img.selected");
 
diff --git a/app/assets/stylesheets/lightbox.css.scss b/app/assets/stylesheets/lightbox.css.scss
index b5aca7a19..7e65ee856 100644
--- a/app/assets/stylesheets/lightbox.css.scss
+++ b/app/assets/stylesheets/lightbox.css.scss
@@ -88,16 +88,41 @@
   display: none;
 }
 
-#lightbox-imageset{
+#lightbox-navigation{
   z-index: 1004;
   position: fixed;
   width: 100%;
   left: 0;
   bottom: 0;
-  display: none;
   text-align: center;
   background-color: rgba(0,0,0,0.4);
   padding: 5px 0;
+  white-space: nowrap;
+  margin: 0 30px 0 30px;
+  overflow: hidden;
+}
+
+#lightbox-scrollleft, #lightbox-scrollright{
+  color: #fff;
+  display: inline-block;
+  height: 70px;
+  width: 30px;
+  position: fixed;
+}
+
+#lightbox-scrollleft{
+  left: 0px;
+}
+
+#lightbox-scrollright{
+  right: 0px;
+}
+
+#lightbox-imageset{
+  display: inline-block;
+  vertical-align: bottom;
+  padding-right: 100px;
+  padding-left: 40px;
 
   img{
     @include transition(opacity, 0.2s);
@@ -120,8 +145,7 @@
 
 body.lightboxed{
   overflow: hidden;
-  #lightbox-backdrop,
-  #lightbox-imageset{
+  #lightbox-backdrop{
     display: block;
   }
 }
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index 99d64aedd..1eb8fbee3 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/app/assets/templates/header_tpl.jst.hbs
@@ -114,7 +114,11 @@
     <div id="lightbox-content">
       <a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
       <img id="lightbox-image">
-      <div id="lightbox-imageset"></div>
+      <div id="lightbox-navigation">
+        <div id="lightbox-scrollleft">«</div>
+        <div id="lightbox-imageset"></div>
+        <div id="lightbox-scrollright">»</div>
+      </div>
     </div>
   </div>
   <div id="lightbox-backdrop"></div>