diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js index ca55282..5085d84 100644 --- a/app/assets/javascripts/theater.js +++ b/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); - mainPicLoading = 1; - img.fadeIn(100); + one_load(img) }) gt.isTheaterInitialized = true; }else{ @@ -419,7 +429,9 @@ var GalleryTheater = function(){ }else{ gt.descriptionArea.removeClass("hide"); } - calculateHeight(gt.imageContainer.find(".gal-active")); + 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"); diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css index 26969a8..51485fb 100644 --- a/app/assets/stylesheets/theater.css +++ b/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{