lightbox arrow not shown in 4.5.7

Topic: lightbox arrow not shown in 4.5.7

webmaster1 pro asked 6 years ago

I have changed to 4.5.7 version (jquery 3.3.1 / bootstrap 4.1.2) When lighbox show images the arrows (and other element of mdb-lightbox-ui.html) are not visible (it work but is not visible). If i change to 4.5.4 version (all the rest identical) it work fine. You can see it in the demo page https://mdbootstrap.com/javascript/lightbox/

Piotr Glejzer staff commented 6 years ago

Hi webmaster1, thank you for a information. Yes, I see what's going on. It's a bug. We will try to fix this as soon as possible! Best, Piotr

Add comment

webmaster1 pro answered 6 years ago

0 0 Best answer

Hi Piotr i have the same problem in 4.5.8

Piotr Glejzer staff commented 6 years ago

Hi, I checked mdb-PRO 4.5.8 and I have everything correctly with lightbox. Did you check you path to files is good? Best, Piotr

Add comment

webmaster1 pro answered 6 years ago

0 0 Best answer

i have changed... but is not working...
<pre>// LIGHT BOX
$pswp__show-hide-transition-duration: 333ms !default;
$pswp__controls-transition-duration: $pswp__show-hide-transition-duration !default;
$pswp__background-color: $black !default;
$pswp__placeholder-color: #222 !default;
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 1500 !default;
$pswp__assets-path: "" !default; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: $slider-runnable-track-focus-bg !default; // "Image not loaded" text color
$pswp__include-minimal-style: $pswp__box-sizing-border-box !default;
$mdb-lightbox-figure-img-transition: opacity .4s !default;
$mdb-lightbox-figure-img-hover-opacity: .8 !default;
$mdb-lightbox-no-margin-padding: $autocomplete-clear-top !default;
$pswp__button-background: url(#{$image-path}/lightbox/default-skin.png) !default;
$pswp__button-background-image: url(#{$image-path1}/lightbox/default-skin.svg) !default;
$pswp__preloader__icn-background: url(#{$image-path}/lightbox/preloader.gif) !default;</pre>

Please insert min. 20 characters.

i have changed... but is not working...

// LIGHT BOX
$pswp__show-hide-transition-duration: 333ms !default;
$pswp__controls-transition-duration: $pswp__show-hide-transition-duration !default;
$pswp__background-color: $black !default;
$pswp__placeholder-color: #222 !default;
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 1500 !default;
$pswp__assets-path: "" !default; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: $slider-runnable-track-focus-bg !default; // "Image not loaded" text color
$pswp__include-minimal-style: $pswp__box-sizing-border-box !default;
$mdb-lightbox-figure-img-transition: opacity .4s !default;
$mdb-lightbox-figure-img-hover-opacity: .8 !default;
$mdb-lightbox-no-margin-padding: $autocomplete-clear-top !default;
$pswp__button-background: url(#{$image-path}/lightbox/default-skin.png) !default;
$pswp__button-background-image: url(#{$image-path1}/lightbox/default-skin.svg) !default;
$pswp__preloader__icn-background: url(#{$image-path}/lightbox/preloader.gif) !default;

Piotr Glejzer staff commented 6 years ago

Did you clean cache or did you use gulp to compile scss files? But I downloaded the latest version of MDB Pro and hmm it is weird but lightbox is working good.

webmaster1 pro commented 6 years ago

yes, i clean the explorer cache.

Piotr Glejzer staff commented 6 years ago

Hi, It's bug. We can try to fix that in next release. You can try to do something like that:


.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right {
opacity: 1 !important;
}

and file path to lightbox arrows images should be background-image: url(../img/lightbox/default-skin.svg); Change


@media (-webkit-min-device-pixel-ratio: 1.1),
(min-resolution: 105dpi),
(min-resolution: 1.1dppx) {
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
.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);
}

We are very sorry about that! Best, Piotr

Please insert min. 15 characters.

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi,

I resolved that problem. We will resolve it globally in the next release. So you have to go to your variable.scss in pro folder. Next step is that you have to find _variable $pswp__button-background-image and change url(#{$image-path}) to url(#{$image-path1}). And that's it.
If you have more questions ask me.

Best,
Piotr

Add comment

Write

Create snippet

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: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

webmaster1

Pro User 37Support score
3Questions 6Answers 0Snippets