From 1b293c185ebdc1eac01ddab0f43e298f1012789b Mon Sep 17 00:00:00 2001 From: Harry Bomrah Date: Wed, 23 Sep 2015 15:01:54 +0800 Subject: [PATCH] description added to theater mode --- app/assets/javascripts/theater.js | 16 + app/assets/stylesheets/theater.css | 501 ++++++++++++++++------------- app/views/galleries/show.html.erb | 7 + 3 files changed, 301 insertions(+), 223 deletions(-) diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js index 0b24d7f..170a847 100644 --- a/app/assets/javascripts/theater.js +++ b/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("

" + currentPic.image.description + "

"); + 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"); diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css index 237a024..83e586e 100644 --- a/app/assets/stylesheets/theater.css +++ b/app/assets/stylesheets/theater.css @@ -1,402 +1,457 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); + /* Reset and basic styles */ body { - overflow-x: hidden; + overflow-x: hidden; } *, *:before, *:after { - box-sizing: border-box; + box-sizing: border-box; } .gallery-mode-on { - /*overflow-y: hidden;*/ + /*overflow-y: hidden;*/ } + + /* Gallery */ #gallery-theater-stage { - display: none; + display: none; } #gallery-theater-stage > .gallery { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #000; - z-index: 2000; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + z-index: 2000; } .gallery-loader { - padding: 10px; - position: absolute; - display: none; - left: 50%; - top: 10px; - -webkit-transform: translate(-50%, 50%); - transform: translate(-50%, 50%); - border-radius: 2px; - z-index: 2000; - background-color: rgba(0, 0, 0, .6); - transition: .3s all; + padding: 10px; + position: absolute; + display: none; + left: 50%; + top: 10px; + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + border-radius: 2px; + z-index: 2000; + background-color: rgba(0, 0, 0, .6); + -webkit-transition: .3s all; + transition: .3s all; } .spinner { - margin: 0 auto; - width: 50px; - height: 20px; - text-align: center; - font-size: 10px; + margin: 0 auto; + width: 50px; + height: 20px; + text-align: center; + font-size: 10px; } .spinner > div { - background-color: #e8e8e8; - height: 100%; - width: 4px; - display: inline-block; - -webkit-animation: stretchdelay 1.2s infinite ease-in-out; - animation: stretchdelay 1.2s infinite ease-in-out; + background-color: #e8e8e8; + height: 100%; + width: 4px; + display: inline-block; + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } .spinner .rect3 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; } .spinner .rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } .spinner .rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4) - } - 20% { - -webkit-transform: scaleY(1.0) - } + 0%, + 40%, + 100% { + -webkit-transform: scaleY(0.4) + } + 20% { + -webkit-transform: scaleY(1.0) + } } @keyframes stretchdelay { - 0%, 40%, 100% { - transform: scaleY(0.4); - -webkit-transform: scaleY(0.4); - } - 20% { - transform: scaleY(1.0); - -webkit-transform: scaleY(1.0); - } + 0%, + 40%, + 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } + 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } } .gallery-actions { - position: absolute; - right: 1rem; - top: 1rem; - cursor: pointer; - background: rgba(255, 255, 255, .7); - border-radius: 2px; - z-index: 2000; + position: absolute; + right: 1rem; + top: 1rem; + cursor: pointer; + background: rgba(255, 255, 255, .7); + border-radius: 2px; + z-index: 2000; } .gallery-actions-btn { - padding: 8px 12px 8px 10px; - display: inline-block; + padding: 8px 12px 8px 10px; + display: inline-block; +} + +.gallery-actions-btn:hover { + color: #fff; } .touch .gallery-actions-btn { - padding: 12px 15px 12px 15px; + padding: 12px 15px 12px 15px; +} + +.gallery-toggle-desc.active { + color: #fff; } .gallery-theme-switch { - border-right: 1px solid rgba(255, 255, 255, .2); + 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; + color: #000; } .touch .image-container { - height: 100%; - padding-bottom: 150px; - z-index: 800; + height: 100%; + padding-bottom: 150px; + z-index: 800; } .gallery-image { - position: fixed; - left: 50%; - top: 50%; - width: 60%; - height: auto; - cursor: pointer; + position: fixed; + left: 50%; + top: 50%; + width: 60%; + height: auto; + cursor: pointer; } .no-touch .gallery-image { - -webkit-transition: .3s all; - transition: .3s all; + -webkit-transition: .3s all; + transition: .3s all; } .gal-prev { - display: none; - left: 0; - -webkit-transform: translate(-95%, -50%); - transform: translate(-95%, -50%); + display: none; + left: 0; + -webkit-transform: translate(-95%, -50%); + transform: translate(-95%, -50%); } .gal-prev:hover { - -webkit-transform: translate(-94%, -50%); - transform: translate(-94%, -50%); + -webkit-transform: translate(-94%, -50%); + transform: translate(-94%, -50%); } .gal-next { - display: none; - left: auto; - right: 0; - -webkit-transform: translate(95%, -50%); - transform: translate(95%, -50%); + display: none; + left: auto; + right: 0; + -webkit-transform: translate(95%, -50%); + transform: translate(95%, -50%); } .gal-next:hover { - -webkit-transform: translate(94%, -50%); - transform: translate(94%, -50%); + -webkit-transform: translate(94%, -50%); + transform: translate(94%, -50%); } .gal-inactive { - -webkit-transition: .3s all; - transition: .3s all; - opacity: .3; + -webkit-transition: .3s all; + transition: .3s all; + opacity: .3; } .gal-inactive:hover { - opacity: 1; + opacity: 1; } .gal-active { - display: none; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + display: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + + /* Thumbnails */ + .gallery-thumb-toggle { - position: absolute; - bottom: -1000px; + position: absolute; + bottom: -1000px; } + .gallery-thumb-wrap { - overflow-y: hidden; - overflow-x: hidden; - list-style: none; - margin: 0 auto; - padding: 10px 0; - text-align: center; - white-space: nowrap; - position: absolute; - left: 50%; - bottom: 0; - -webkit-transition: .3s all; - transition: .3s all; + overflow-y: hidden; + overflow-x: hidden; + list-style: none; + margin: 0 auto; + padding: 10px 0; + text-align: center; + white-space: nowrap; + position: absolute; + left: 50%; + bottom: 0; + -webkit-transition: .3s all; + transition: .3s all; } .gallery-item { - margin-right: 1em; - display: inline-block; + margin-right: 1em; + display: inline-block; } .gallery-item.active { - border-radius: 2px; - border-radius: 0.125rem; - border: 5px solid #fff; + border-radius: 2px; + border-radius: 0.125rem; + border: 5px solid #fff; } .gallery-thumb { - width: 50px; - height: 50px; - opacity: .5; - -webkit-transition: .3s opacity; - transition: .3s opacity; + width: 50px; + height: 50px; + opacity: .5; + -webkit-transition: .3s opacity; + transition: .3s opacity; } .gallery-thumb:hover { - opacity: 1; + opacity: 1; } .gallery-thumb-container { - height: 80px; - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background: #1b1b1b; + height: 80px; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background: #1b1b1b; } .gallery-thumb-navs { - display: none; + display: none; } .gallery-thumb-navs.show { - display: block; + display: block; } .gallery-thumb-nav { - position: absolute; - cursor: pointer; - font-size: 1.4rem; - color: rgba(255, 255, 255, .7); - background: #222; - height: 80px; - line-height: 80px; - width: 50px; - text-align: center; - z-index: 900; + position: absolute; + cursor: pointer; + font-size: 1.4rem; + color: rgba(255, 255, 255, .7); + background: #222; + height: 80px; + line-height: 80px; + width: 50px; + text-align: center; + z-index: 900; } .gallery-thumb-nav:hover { - color: #fff; + color: #fff; } .gallery-thumb-prev { - left: 0; + left: 0; } .gallery-thumb-next { - right: 0; + right: 0; } .active .gallery-thumb { - opacity: 1; + 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 { - background-color: #fffdf7; + background-color: #fffdf7; } .theme-white .gallery-actions { - background-color: #eee; - border: 1px solid #ddd; + background-color: #eee; + border: 1px solid #ddd; +} + +.theme-white .gallery-toggle-desc.active { + color: #ff4444; } .theme-white .gallery-theme-switch { - border-right: 1px solid #ddd; + border-right: 1px solid #ddd; + border-left: 1px solid #ddd; } .theme-white .gallery-thumb-toggle, .theme-white .gallery-thumb-toggle:before, .theme-white .gallery-thumb-toggle:after { - color: #777; - border-color: #aaa; + color: #777; + border-color: #aaa; } .theme-white .gallery-thumb-container { - background-color: #e2e2e2; - border-top: 1px solid #c7c7c7; + background-color: #e2e2e2; + border-top: 1px solid #c7c7c7; } .theme-white .gallery-actions-btn { - color: #777; + color: #777; } .theme-white .gallery-actions-btn:hover { - color: #ff4444; + color: #ff4444; } .theme-white .gallery-item.active { - border-color: #ff4444; + border-color: #ff4444; } .theme-white .gallery-thumb-nav { - color: #777; - background-color: #eee; + color: #777; + background-color: #eee; } .theme-white .gallery-thumb-prev { - border-right: 1px solid #c7c7c7; + border-right: 1px solid #c7c7c7; } + .theme-white .gallery-thumb-next { - border-left: 1px solid #c7c7c7; + border-left: 1px solid #c7c7c7; } .theme-white .gallery-thumb-nav:hover { - color: #ff4444; + color: #ff4444; +} + +.theme-white .gallery-img-desc { + background-color: #eee; } .theme-white .gallery-loader { - background-color: #777; + background-color: #777; } .theme-white .spinner > div { - color: #ff4444; + color: #ff4444; } @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; - color: #fff; - width: 100%; - text-align: center; - -webkit-transition: .1s all; - transition: .1s all; - } - - .gallery-thumb-toggle.up { - bottom: 96px; - } - - .gallery-thumb-toggle:before { - content: ""; - position: absolute; - top: 50%; - left: 10%; - margin: auto; - width: 38%; - border-top: 1px solid rgba(255, 255, 255, .2); - height: 1px; - } - - .gallery-thumb-toggle:after { - content: ""; - position: absolute; - top: 50%; - right: 10%; - margin: auto; - width: 38%; - border-top: 1px solid rgba(255, 255, 255, .2); - height: 1px; - } - - .gallery-thumb-container { - bottom: -1000px; - -webkit-transition: .1s all; - transition: .1s all; - } - .gallery-thumb-container.show { - bottom: 0; - } + .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; + color: #fff; + width: 100%; + text-align: center; + -webkit-transition: .1s all; + transition: .1s all; + } + .gallery-thumb-toggle.up { + bottom: 96px; + } + .gallery-thumb-toggle:before { + content: ""; + position: absolute; + top: 50%; + left: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + .gallery-thumb-toggle:after { + content: ""; + position: absolute; + top: 50%; + right: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + .gallery-thumb-container { + bottom: -1000px; + -webkit-transition: .1s all; + transition: .1s all; + } + .gallery-thumb-container.show { + bottom: 0; + } } diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb index 25834f0..01300b6 100644 --- a/app/views/galleries/show.html.erb +++ b/app/views/galleries/show.html.erb @@ -15,6 +15,9 @@ +