upgrade lightbox + add thumbnails

style/_lightbox.scss

@@ -1,11 +1,9 @@
-/* Preload images */
-body:after {
-  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
-  display: none;
-}
-
-body.lb-disable-scrolling {
+html.lb-disable-scrolling {
   overflow: hidden;
+  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
 }
 
 .lightboxOverlay {
@@ -33,7 +31,11 @@ body.lb-disable-scrolling {
   display: block;
   height: auto;
   max-width: inherit;
+  max-height: none;
   border-radius: 3px;
+
+  /* Image border */
+  border: 4px solid white;
 }
 
 .lightbox a img {
@@ -42,12 +44,15 @@ body.lb-disable-scrolling {
 
 .lb-outerContainer {
   position: relative;
-  background-color: white;
   *zoom: 1;
   width: 250px;
   height: 250px;
   margin: 0 auto;
   border-radius: 4px;
+
+  /* Background color behind image.
+     This is visible during transitions. */
+  background-color: white;
 }
 
 .lb-outerContainer:after {
@@ -56,10 +61,6 @@ body.lb-disable-scrolling {
   clear: both;
 }
 
-.lb-container {
-  padding: 4px;
-}
-
 .lb-loader {
   position: absolute;
   top: 43%;
@@ -143,11 +144,7 @@ body.lb-disable-scrolling {
   padding-top: 5px;
   *zoom: 1;
   width: 100%;
-  -moz-border-radius-bottomleft: 4px;
-  -webkit-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  -webkit-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
@@ -175,6 +172,10 @@ body.lb-disable-scrolling {
   line-height: 1em;
 }
 
+.lb-data .lb-caption a {
+  color: #4ae;
+}
+
 .lb-data .lb-number {
   display: block;
   clear: left;
@@ -203,4 +204,4 @@ body.lb-disable-scrolling {
   cursor: pointer;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
-}
+}