Topic: Lightbox Fix –

josh-codes pro asked 6 years ago


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
}


Marta Wierzbicka staff answered 6 years ago


Hi, I'm not sure what is the problem with our lightbox. Everything you've pointed out is in our package. Would you explain where is the problem? I'll try to help you. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags