saurabh
/
gallery
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

description added to theater mode

This commit is contained in:
Harry Bomrah 2015-09-23 15:01:54 +08:00
parent 88eea54f76
commit 1b293c185e
3 changed files with 301 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/javascripts/theater.js
View File

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

501
app/assets/stylesheets/theater.css
View File

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

7
app/views/galleries/show.html.erb
View File

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