description added to theater mode
This commit is contained in:
parent
88eea54f76
commit
1b293c185e
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue