Lightbox Fix –

I wasted a half a day tracking down the css and the javascript to make this function.  I shouldn't have  waste my time to fix something that should work out of the box or at least have the proper documentation.

To get this to work you need the html, the script to initialize the lightbox - https://mdbootstrap.com/javascript/lightbox/

You also need to make sure the MDB PRO download folder has the following folders included in your project:

1. JS/Modules/lightbox.js
   add script reference to your page.  Get familiar with these because you need these references for half the functionality of the modules.<script type="text/javascript" src="js/modules/lightbox.js"></script>
2. img/lightbox
   img/svg
   img/overlay
3. You also must include the css (BELOW) which seems to be completely missing from any css file in the MDB pro download.  I had to track it down in the example page itself and strip out the css from the dev tools.MAKE sure you change the background URL's in the CSS for the UI images if you place the image folders listed above somewhere else.
4. Make sure you have the mdb-addons folder

MISSING CSS FROM MDB PRO DOWNLOAD

.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
outline: 0
}
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.pswp img {
max-width: none
}
.pswp--animate_opacity {
opacity: .001;
will-change: opacity;
-webkit-transition: opacity 333mscubic-bezier(.4,0,.22,1);
-o-transition: opacity 333mscubic-bezier(.4,0,.22,1);
transition: opacity 333mscubic-bezier(.4,0,.22,1)
}
.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;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
will-change: opacity
}
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden
}
.pswp__container,.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0
}
.pswp__container,.pswp__img {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: lefttop;
-ms-transform-origin: lefttop;
transform-origin: lefttop;
-webkit-transition: -webkit-transform 333mscubic-bezier(.4,0,.22,1);
transition: -webkit-transform 333mscubic-bezier(.4,0,.22,1);
-o-transition: transform 333mscubic-bezier(.4,0,.22,1);
transition: transform 333mscubic-bezier(.4,0,.22,1);
transition: transform 333mscubic-bezier(.4,0,.22,1),-webkit-transform 333mscubic-bezier(.4,0,.22,1)
}
.pswp__bg {
will-change: opacity;
-webkit-transition: opacity 333mscubic-bezier(.4,0,.22,1);
-o-transition: opacity 333mscubic-bezier(.4,0,.22,1);
transition: opacity 333mscubic-bezier(.4,0,.22,1)
}
.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
-o-transition: none;
transition: none
}
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden
}
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0
}
.pswp__img--placeholder--blank {
background: #222
}
.pswp--ie .pswp__img {
width: 100%!important;
height: auto!important;
left: 0;
top: 0
}
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #ccc
}
.pswp__error-msg a {
color: #ccc;
text-decoration: underline
}
.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: 00;
cursor: pointer;
overflow: visible;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: .75;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
-webkit-box-shadow: none;
box-shadow: none
}
.pswp__button:focus,.pswp__button:hover {
opacity: 1
}
.pswp__button:active {
outline: 0;
opacity: .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 {
background: url(img/lightbox/default-skin.png) 00no-repeat;
-webkit-background-size: 264px88px;
background-size: 264px88px;
width: 44px;
height: 44px
}
@media (-webkit-min-device-pixel-ratio: 1.1),(-webkit-min-device-pixel-ratio:1.09375),(-o-min-device-pixel-ratio:35/32),(min-resolution:105dpi),(-o-min-device-pixel-ratio:11/10),(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(../img/lightbox/default-skin.svg)
}
.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right {
background: 00
}
}
.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: -44px0
}
.pswp__button--zoom {
display: none;
background-position: -88px0
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px0
}
.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right {
visibility: hidden
}
.pswp__button--arrow--left,.pswp__button--arrow--right {
background: 00;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute
}
.pswp__button--arrow--left {
left: 0
}
.pswp__button--arrow--right {
right: 0
}
.pswp__button--arrow--left:before,.pswp__button--arrow--right:before {
content: "";
top: 35px;
background-color: rgba(0,0,0,.3);
height: 30px;
width: 32px;
position: absolute
}
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px-44px
}
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px-44px
}
.pswp__counter,.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.pswp__share-modal {
display: block;
background: rgba(0,0,0,.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity .25sease-out;
-o-transition: opacity .25sease-out;
transition: opacity .25sease-out;
will-change: opacity
}
.pswp__share-modal--hidden {
display: none
}
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #fff;
top: 56px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
-webkit-box-shadow: 02px5pxrgba(0,0,0,.25);
box-shadow: 02px5pxrgba(0,0,0,.25);
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform .25s;
transition: -webkit-transform .25s;
-o-transition: transform .25s;
transition: transform .25s;
transition: transform .25s,-webkit-transform .25s;
will-change: transform
}
.pswp__share-tooltip a {
display: block;
padding: 8px12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px
}
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000
}
.pswp__share-tooltip a:first-child {
-webkit-border-radius: 2px2px00;
border-radius: 2px2px00
}
.pswp__share-tooltip a:last-child {
-webkit-border-radius: 002px2px;
border-radius: 002px2px
}
.pswp__share-modal--fade-in {
opacity: 1
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.pswp--touch .pswp__share-tooltip a {
padding: 16px12px
}
a.pswp__share--facebook:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6pxsolidtransparent;
border-bottom-color: #fff;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none
}
a.pswp__share--facebook:hover {
background: #3e5c9a;
color: #fff
}
a.pswp__share--facebook:hover:before {
border-bottom-color: #3e5c9a
}
a.pswp__share--twitter:hover {
background: #55acee;
color: #fff
}
a.pswp__share--pinterest:hover {
background: #ccc;
color: #ce272d
}
a.pswp__share--download:hover {
background: #ddd
}
.pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 13px;
line-height: 44px;
color: #fff;
opacity: .75;
padding: 010px
}
.pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px
}
.pswp__caption small {
font-size: 11px;
color: #bbb
}
.pswp__caption__center {
text-align: center;
max-width: 500px;
margin: 0auto;
font-size: 13px;
padding: 10px;
line-height: 20px;
color: #ccc
}
.pswp__caption--empty {
display: none
}
.pswp__caption--fake {
visibility: hidden
}
.pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
-webkit-transition: opacity .25sease-out;
-o-transition: opacity .25sease-out;
transition: opacity .25sease-out;
will-change: opacity;
direction: ltr
}
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px
}
.pswp__preloader--active {
opacity: 1
}
.pswp__preloader--active .pswp__preloader__icn {
background: url(img/lightbox/preloader.gif) 00no-repeat
}
.pswp--css_animation .pswp__preloader--active {
opacity: 1
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
-webkit-animation: clockwise .5slinearinfinite;
animation: clockwise .5slinearinfinite
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
-webkit-animation: donut-rotate 1scubic-bezier(.4,0,.22,1) infinite;
animation: donut-rotate 1scubic-bezier(.4,0,.22,1) infinite
}
.pswp--css_animation .pswp__preloader__icn {
background: 00;
opacity: .75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0
}
.pswp--css_animation .pswp__preloader__cut {
position: relative;
width: 7px;
height: 14px;
overflow: hidden
}
.pswp--css_animation .pswp__preloader__donut {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2pxsolid#fff;
-webkit-border-radius: 50%;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: 00;
margin: 0
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
position:relative;
left: auto;
top: auto;
margin: 0;
float: right
}
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes clockwise {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
}
@keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
}
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550
}
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%
}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right,.pswp__caption,.pswp__top-bar {
will-change: opacity;
-webkit-transition: opacity 333mscubic-bezier(.4,0,.22,1);
-o-transition: opacity 333mscubic-bezier(.4,0,.22,1);
transition: opacity 333mscubic-bezier(.4,0,.22,1)
}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible
}
.pswp__caption,.pswp__top-bar {
background-color: rgba(0,0,0,.5)
}
.pswp__ui--fit .pswp__caption,.pswp__ui--fit .pswp__top-bar {
background-color: rgba(0,0,0,.3)
}
.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__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__top-bar {
opacity: .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: 00
}
.mdb-lightbox figure {
margin: 0;
float: left
}
.mdb-lightbox figure .img-fluid,.mdb-lightbox figure .modal-dialog.cascading-modal.modal-avatar .modal-header,.mdb-lightbox figure .section-blog-fw .view img,.modal-dialog.cascading-modal.modal-avatar .mdb-lightbox figure .modal-header,.section-blog-fw .view .mdb-lightbox figure img {
display: inline
}
.mdb-lightbox figure img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
-webkit-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
-webkit-border-radius: 0;
border-radius: 0
}
.mdb-lightbox figure img:hover {
opacity: .8
}
.mdb-lightbox figure figcaption {
display: none
}
.mdb-lightbox.no-margin [class*=col-] {
padding: 0
}
.mdb-lightbox [class*=col-] {
padding: .5rem
}
.chip {
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: rgba(0,0,0,.6);
line-height: 32px;
padding: 012px;
-webkit-border-radius: 16px;
border-radius: 16px;
background-color: #eceff1;
margin-bottom: 1rem;
margin-right: 1rem;
cursor: pointer;
-webkit-transition: all.3slinear;
-o-transition: all.3slinear;
transition: all.3slinear
}
.chip:hover {
-webkit-transition: all.3slinear;
-o-transition: all.3slinear;
transition: all.3slinear;
background-color: #e0e0e0
}
.chip img {
float: left;
margin: 08px0-12px;
height: 32px;
width: 32px;
-webkit-border-radius: 50%;
border-radius: 50%
}
.chip .close {
cursor: pointer;
float: right;
font-size: 16px;
line-height: 32px;
padding-left: 8px;
-webkit-transition: all.1slinear;
-o-transition: all.1slinear;
transition: all.1slinear
}
.chips {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-bottom: 1pxsolid#ced4da;
margin-bottom: 30px;
min-height: 45px;
padding-bottom: 1rem;
-webkit-transition: all.3s;
-o-transition: all.3s;
transition: all.3s
}
.chips.focus {
border-bottom: 1pxsolid#4285f4;
-webkit-box-shadow: 01px00#4285f4;
box-shadow: 01px00#4285f4
}
.chips:hover {
cursor: text
}
.chips .tag.selected {
border-bottom: 1pxsolid#4285f4;
color: #fff
}
.chips .input {
display: inline-block;
background: 00;
border: 0;
outline: 0;
padding: 0!important;
width: 120px!important;
color: rgba(0,0,0,.6);
font-size: 13px;
font-weight: 500;
height: 32px;
margin-right: 20px;
line-height: 32px
}
.chips .input:focus {
border: 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important
}