description added to theater mode

app/assets/javascripts/theater.js

@@ -17,11 +17,13 @@ var GalleryTheater = function(){
       gt.stripNextBtn = null;
       gt.stripPrevBtn = null;
       gt.thumbToggle = null;
+      gt.descriptionToggle = null;
       gt.closeBtn = null;
       gt.imageContainer = null;
       gt.albumData = {};
       gt.loader = null;
       gt.thumbStrip = null;
+      gt.descriptionArea = null;
       gt.isTheaterInitialized = false;
 
   var initialize = function(){
@@ -34,6 +36,8 @@ var GalleryTheater = function(){
     gt.loader = gt.stage.find(".gallery-loader");
     gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
     gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
     windowScreenThresholdForTouch = windowWidth / 3;
     startLoading();
     windowHeight = $(window).height();
@@ -56,6 +60,7 @@ var GalleryTheater = function(){
     })
 
      gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
      gt.stripPrevBtn.on("click", gt.scrollStripRight);
      gt.stripNextBtn.on("click", gt.scrollStripLeft);
 
@@ -230,6 +235,11 @@ var GalleryTheater = function(){
       }
    }
 
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
    var startLoading = function(){
     loadingProcess = 1;
     mainPicLoading = 0;
@@ -330,6 +340,12 @@ var GalleryTheater = function(){
       }
       mainPicLoading = 1;
     }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
     calculateHeight(gt.imageContainer.find(".gal-active"));
     gt.thumbStrip.find("li.active").removeClass("active");
     gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");

app/assets/stylesheets/theater.css

@@ -1,3 +1,5 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
 /* Reset and basic styles */
 
 body {
@@ -13,6 +15,8 @@ body {
 .gallery-mode-on {
   /*overflow-y: hidden;*/
 }
+
+
 /* Gallery */
 
 #gallery-theater-stage {
@@ -40,6 +44,7 @@ body {
   border-radius: 2px;
   z-index: 2000;
   background-color: rgba(0, 0, 0, .6);
+  -webkit-transition: .3s all;
   transition: .3s all;
 }
 
@@ -81,7 +86,9 @@ body {
 }
 
 @-webkit-keyframes stretchdelay {
-    0%, 40%, 100% {
+  0%,
+  40%,
+  100% {
     -webkit-transform: scaleY(0.4)
   }
   20% {
@@ -90,7 +97,9 @@ body {
 }
 
 @keyframes stretchdelay {
-    0%, 40%, 100% {
+  0%,
+  40%,
+  100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
   }
@@ -115,23 +124,27 @@ body {
   display: inline-block;
 }
 
+.gallery-actions-btn:hover {
+  color: #fff;
+}
+
 .touch .gallery-actions-btn {
   padding: 12px 15px 12px 15px;
 }
 
+.gallery-toggle-desc.active {
+  color: #fff;
+}
+
 .gallery-theme-switch {
   border-right: 1px solid rgba(255, 255, 255, .2);
+  border-left: 1px solid rgba(255, 255, 255, .2);
 }
 
 .gallery-close {
   color: #000;
 }
 
-.gallery-theme-switch:hover,
-.gallery-close:hover {
-    color: #fff;
-}
-
 .touch .image-container {
   height: 100%;
   padding-bottom: 150px;
@@ -192,11 +205,15 @@ body {
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
+
+
 /* Thumbnails */
+
 .gallery-thumb-toggle {
   position: absolute;
   bottom: -1000px;
 }
+
 .gallery-thumb-wrap {
   overflow-y: hidden;
   overflow-x: hidden;
@@ -280,6 +297,41 @@ body {
 .active .gallery-thumb {
   opacity: 1;
 }
+
+.gallery-img-desc {
+  color: #000;
+  line-height: 1.7;
+  padding: 1rem 1.5rem;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8125rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 2px;
+  width: 90%;
+  background-color: #bdbdbd;
+  opacity: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  z-index: 1000;
+}
+
+.gallery-img-desc p {
+  overflow: hidden;
+  height: 90px;
+}
+
+.gallery-img-desc:empty {
+  display: none;
+}
+
+.gallery-img-desc.active {
+  opacity: 1;
+}
+
+
 /* White theme */
 
 .theme-white #gallery-theater-stage > .gallery {
@@ -291,8 +343,13 @@ body {
   border: 1px solid #ddd;
 }
 
+.theme-white .gallery-toggle-desc.active {
+  color: #ff4444;
+}
+
 .theme-white .gallery-theme-switch {
   border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
 }
 
 .theme-white .gallery-thumb-toggle,
@@ -327,6 +384,7 @@ body {
 .theme-white .gallery-thumb-prev {
   border-right: 1px solid #c7c7c7;
 }
+
 .theme-white .gallery-thumb-next {
   border-left: 1px solid #c7c7c7;
 }
@@ -335,6 +393,10 @@ body {
   color: #ff4444;
 }
 
+.theme-white .gallery-img-desc {
+  background-color: #eee;
+}
+
 .theme-white .gallery-loader {
   background-color: #777;
 }
@@ -344,17 +406,14 @@ body {
 }
 
 @media screen and (max-width: 768px) {
-
   .gal-prev {
     -webkit-transform: translate(-101%, -50%);
     transform: translate(-101%, -50%);
   }
-
   .gal-next {
     -webkit-transform: translate(101%, -50%);
     transform: translate(101%, -50%);
   }
-
   .gallery-thumb-toggle {
     bottom: 50px;
     left: 0;
@@ -364,11 +423,9 @@ body {
     -webkit-transition: .1s all;
     transition: .1s all;
   }
-
   .gallery-thumb-toggle.up {
     bottom: 96px;
   }
-
   .gallery-thumb-toggle:before {
     content: "";
     position: absolute;
@@ -379,7 +436,6 @@ body {
     border-top: 1px solid rgba(255, 255, 255, .2);
     height: 1px;
   }
-
   .gallery-thumb-toggle:after {
     content: "";
     position: absolute;
@@ -390,7 +446,6 @@ body {
     border-top: 1px solid rgba(255, 255, 255, .2);
     height: 1px;
   }
-
   .gallery-thumb-container {
     bottom: -1000px;
     -webkit-transition: .1s all;

app/views/galleries/show.html.erb

@@ -15,6 +15,9 @@
       </div>
     </div>
     <div class="gallery-actions">
+      <div class="gallery-toggle-desc gallery-actions-btn">
+        <i class="fa fa-comment"></i>
+      </div>
       <div class="gallery-theme-switch gallery-actions-btn">
         <i class="fa fa-circle"></i>
       </div>
@@ -38,6 +41,10 @@
         <ul class="gallery-thumb-wrap">
         </ul>
     </div>
+    <div class="gallery-img-desc">
+      <div class="gallery-img-desc-inner">
+      </div>
+    </div>
     </div>
 </div>