images are shown in a single row and can be scrolled using buttons on sides

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");
 

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;
   }
 }

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>