mirror of
https://github.com/GenZmeY/casper-i18n.git
synced 2024-11-10 02:28:02 +00:00
Added lightbox support
This commit is contained in:
Sodbileg Gansukh
parent
592226b75e
commit
43688cfa01
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -19,6 +19,7 @@ production stylesheet in assets/built/screen.css
|
|||||||
9. Error Template
|
9. Error Template
|
||||||
10. Site Footer
|
10. Site Footer
|
||||||
11. Dark Mode
|
11. Dark Mode
|
||||||
|
12. Lightbox
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@ -1559,6 +1560,11 @@ except for when immediately preceeded by a heading */
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kg-image[width][height],
|
||||||
|
.kg-gallery-image {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
|
.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
}
|
}
|
||||||
@ -2513,6 +2519,503 @@ html.dark-mode .footer-cta-title {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 12. Lightbox
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.pswp {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3999999;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
outline: none;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp img {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--animate_opacity {
|
||||||
|
opacity: 0.001;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__img {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__img {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--dragging .pswp__img {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transform: translateZ(0);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__scroll-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
touch-action: none;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__img {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__bg,
|
||||||
|
.pswp--animated-in .pswp__zoom-wrap {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__item {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img--placeholder {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__img--placeholder--blank {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--ie .pswp__img {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__error-msg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: var(--color-secondary-text);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__error-msg a {
|
||||||
|
color: var(--color-secondary-text);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button:focus,
|
||||||
|
.pswp__button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button:active {
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui--over-close .pswp__button--close {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button,
|
||||||
|
.pswp__button--arrow--left::before,
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: url("../images/default-skin.png") 0 0 no-repeat;
|
||||||
|
background-size: 264px 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||||
|
.pswp--svg .pswp__button,
|
||||||
|
.pswp--svg .pswp__button--arrow--left::before,
|
||||||
|
.pswp--svg .pswp__button--arrow--right::before {
|
||||||
|
background-image: url("../images/default-skin.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--svg .pswp__button--arrow--left,
|
||||||
|
.pswp--svg .pswp__button--arrow--right {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--close {
|
||||||
|
background-position: 0 -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--share {
|
||||||
|
background-position: -44px -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--fs {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--supports-fs .pswp__button--fs {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--fs .pswp__button--fs {
|
||||||
|
background-position: -44px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--zoom {
|
||||||
|
display: none;
|
||||||
|
background-position: -88px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__button--zoom {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__button--zoom {
|
||||||
|
background-position: -132px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--touch .pswp__button--arrow--left,
|
||||||
|
.pswp--touch .pswp__button--arrow--right {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left,
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -50px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left::before,
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
width: 32px;
|
||||||
|
height: 30px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--left::before {
|
||||||
|
left: 6px;
|
||||||
|
background-position: -138px -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
right: 6px;
|
||||||
|
background-position: -94px -44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__counter {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #fff;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center {
|
||||||
|
max-width: 420px;
|
||||||
|
padding: 25px 15px 30px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center .post-caption-title {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
|
||||||
|
padding: 0 4px;
|
||||||
|
content: "\02022";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption--empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption--fake {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
margin-left: -22px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
direction: ltr;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
background: url("../images/preloader.gif") 0 0 no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
animation: clockwise 500ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||||
|
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__icn {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__cut {
|
||||||
|
position: relative;
|
||||||
|
width: 7px;
|
||||||
|
height: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__donut {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.pswp__preloader {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(-140deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui {
|
||||||
|
z-index: 1550;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__top-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption,
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui--idle .pswp__top-bar {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--right {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui--hidden .pswp__top-bar,
|
||||||
|
.pswp__ui--hidden .pswp__caption,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
opacity: 0.001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||||
|
.pswp__ui--one-slide .pswp__counter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__element--disabled {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--minimal--dark .pswp__top-bar {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Hey! You reached the end.
|
Hey! You reached the end.
|
||||||
|
|||||||
BIN
assets/images/default-skin.png
Executable file
BIN
assets/images/default-skin.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
1
assets/images/default-skin.svg
Executable file
1
assets/images/default-skin.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/preloader.gif
Executable file
BIN
assets/images/preloader.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
4
assets/js/lib/photoswipe-ui-default.min.js
vendored
Executable file
4
assets/js/lib/photoswipe-ui-default.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
4
assets/js/lib/photoswipe.min.js
vendored
Executable file
4
assets/js/lib/photoswipe.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
109
assets/js/lightbox.js
Normal file
109
assets/js/lightbox.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
function lightbox(trigger) {
|
||||||
|
var onThumbnailsClick = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var items = [];
|
||||||
|
var index = 0;
|
||||||
|
|
||||||
|
var prevSibling = e.target.closest('.kg-card').previousElementSibling;
|
||||||
|
|
||||||
|
while (prevSibling && (prevSibling.classList.contains('kg-image-card') || prevSibling.classList.contains('kg-gallery-card'))) {
|
||||||
|
var prevItems = [];
|
||||||
|
|
||||||
|
prevSibling.querySelectorAll('img').forEach(function (item) {
|
||||||
|
prevItems.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
})
|
||||||
|
|
||||||
|
index += 1;
|
||||||
|
});
|
||||||
|
prevSibling = prevSibling.previousElementSibling;
|
||||||
|
|
||||||
|
items = prevItems.concat(items);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.classList.contains('kg-image')) {
|
||||||
|
items.push({
|
||||||
|
src: e.target.getAttribute('src'),
|
||||||
|
msrc: e.target.getAttribute('src'),
|
||||||
|
w: e.target.getAttribute('width'),
|
||||||
|
h: e.target.getAttribute('height'),
|
||||||
|
el: e.target,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var reachedCurrentItem = false;
|
||||||
|
|
||||||
|
e.target.closest('.kg-gallery-card').querySelectorAll('img').forEach(function (item) {
|
||||||
|
items.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!reachedCurrentItem && item !== e.target) {
|
||||||
|
index += 1;
|
||||||
|
} else {
|
||||||
|
reachedCurrentItem = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var nextSibling = e.target.closest('.kg-card').nextElementSibling;
|
||||||
|
|
||||||
|
while (nextSibling && (nextSibling.classList.contains('kg-image-card') || nextSibling.classList.contains('kg-gallery-card'))) {
|
||||||
|
nextSibling.querySelectorAll('img').forEach(function (item) {
|
||||||
|
items.push({
|
||||||
|
src: item.getAttribute('src'),
|
||||||
|
msrc: item.getAttribute('src'),
|
||||||
|
w: item.getAttribute('width'),
|
||||||
|
h: item.getAttribute('height'),
|
||||||
|
el: item,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
nextSibling = nextSibling.nextElementSibling;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pswpElement = document.querySelectorAll('.pswp')[0];
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
bgOpacity: 0.9,
|
||||||
|
closeOnScroll: true,
|
||||||
|
fullscreenEl: false,
|
||||||
|
history: false,
|
||||||
|
index: index,
|
||||||
|
shareEl: false,
|
||||||
|
zoomEl: false,
|
||||||
|
getThumbBoundsFn: function(index) {
|
||||||
|
var thumbnail = items[index].el,
|
||||||
|
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||||
|
rect = thumbnail.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||||
|
gallery.init();
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var triggers = document.querySelectorAll(trigger);
|
||||||
|
triggers.forEach(function (trig) {
|
||||||
|
trig.addEventListener('click', function (e) {
|
||||||
|
onThumbnailsClick(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
lightbox(
|
||||||
|
'.kg-image-card > .kg-image[width][height], .kg-gallery-image > img'
|
||||||
|
);
|
||||||
|
})();
|
||||||
@ -91,6 +91,9 @@
|
|||||||
</div>
|
</div>
|
||||||
{{!-- /.viewport --}}
|
{{!-- /.viewport --}}
|
||||||
|
|
||||||
|
{{#is "post, page"}}
|
||||||
|
{{> "lightbox"}}
|
||||||
|
{{/is}}
|
||||||
|
|
||||||
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
||||||
<script
|
<script
|
||||||
|
|||||||
41
partials/lightbox.hbs
Normal file
41
partials/lightbox.hbs
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
|
<div class="pswp__bg"></div>
|
||||||
|
|
||||||
|
<div class="pswp__scroll-wrap">
|
||||||
|
<div class="pswp__container">
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pswp__ui pswp__ui--hidden">
|
||||||
|
<div class="pswp__top-bar">
|
||||||
|
<div class="pswp__counter"></div>
|
||||||
|
|
||||||
|
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||||
|
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||||
|
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||||
|
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||||
|
|
||||||
|
<div class="pswp__preloader">
|
||||||
|
<div class="pswp__preloader__icn">
|
||||||
|
<div class="pswp__preloader__cut">
|
||||||
|
<div class="pswp__preloader__donut"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||||
|
<div class="pswp__share-tooltip"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
|
||||||
|
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
|
||||||
|
|
||||||
|
<div class="pswp__caption">
|
||||||
|
<div class="pswp__caption__center"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user