fix showing error for first open the page

app/assets/javascripts/theater.js

@@ -47,11 +47,6 @@ var GalleryTheater = function(){
     startLoading();
     windowHeight = $(window).height();
     windowWidth = $(window).width();
-    bindHandler();
-    if(window.location.hash != "" && window.location.hash != "#"){
-      var id = window.location.hash.split("#")[1];
-      gt.createTheater("/xhr/galleries/theater/" + id);
-    }
     var addButton = function () {
       $('.theaterButton').remove();
       if (!play_flag){
@@ -82,14 +77,19 @@ var GalleryTheater = function(){
         window.clearInterval(playtimeoutID)
       });
     }
+    window.onhashchange = locationHashChanged;
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+    
 
     addButton();
     function locationHashChanged() {
       addButton();
     }
 
-    window.onhashchange = locationHashChanged;
-
   }
 
   var bindHandler = function(){
@@ -187,7 +187,8 @@ var GalleryTheater = function(){
       $.ajax({
         url : link,
         dataType : "json",
-        type : "get"
+        type : "get",
+        async:false
       }).done(function(data){
         gt.albumData = data.data;
         var cp =  gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
@@ -380,7 +381,18 @@ var GalleryTheater = function(){
       $thumbNav.removeClass('show');
     }
   };
-
+  function one_load(img){
+    if (img[0].complete){
+      setTimeout(loaded(img),100)
+    }else{
+      setTimeout(one_load,20)
+    }
+  }
+  function loaded(img){
+    calculateHeight(img);
+    mainPicLoading = 1;
+    img.fadeIn(100);
+  }
   var setMainPic = function(direction,selectedFromStrip){
     var img = null;
     $('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
@@ -390,9 +402,7 @@ var GalleryTheater = function(){
       img.attr("src", currentPic.image.file.theater.url);
       gt.imageContainer.append(img);
       img.one("load", function(){
-        calculateHeight(img);
+        one_load(img)
-        mainPicLoading = 1;
-        img.fadeIn(100);
       })
       gt.isTheaterInitialized = true;
     }else{
@@ -419,7 +429,9 @@ var GalleryTheater = function(){
     }else{
       gt.descriptionArea.removeClass("hide");
     }
+    if (direction!=null){
       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

@@ -468,6 +468,10 @@ body {
 #theaterPlayButton,#theaterStopButton{
   left:30%;
 }
+#theaterStopButton{
+  -webkit-text-stroke: 0.02em #ffbb35;
+  text-shadow: 0em 0em 0.2em #ff0000;
+}
 .theaterButton{
 position: absolute;
 text-align: center;
@@ -484,6 +488,8 @@ font-size: 2.2rem;
 margin: 4px 2px;
 cursor: pointer;
 border-radius: 5px;
+-webkit-text-stroke: 1px #06a2ff;
+text-shadow: 0em 0em 0.2em #8F7;
 }
 
 #theaterNextButton{