Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Lightbox gallery background

Calder free asked 4 years ago


Is it possible to modify the background of the lightbox gallery so that it is an alternative to solid black? I'd like to change the opacity if possible so that a little of the underlying page can be seen.


Roman priority answered 3 years ago


Hi, is there a similar way how to do it in MDB5?


Marcin Luczak staff commented 3 years ago

Hi,

The class of wrapper element containing background options for the lightbox gallery is .lightbox-gallery. You can change its `background-color value to change its color.

Keep coding, Marcin


Roman priority commented 3 years ago

Hi,Thank you, it is interesting, too. My question was inaccurate. Is it possible to use the white rgba mask on thumbnails like in the snippet https://mdbootstrap.com/snippets/jquery/marcin-luczak/2695049?

Thank you

Roman


Marcin Luczak staff commented 3 years ago

In this case this css styles should work for lightbox thumbnails: `.lightbox img:hover { opacity: 0.8; }

.lightbox img { transition: opacity .4s; }`


Roman priority commented 3 years ago

Thank you, it works as expected.


Marcin Luczak staff commented 3 years ago

You're welcome :)

Keep coding, Marcin


Marcin Luczak staff answered 4 years ago


Hi Calder,

There is no method for changing default background color and opacity for Lightbox Gallery but you can achieve it by changing background-color style of .pswp__bg class, which is responsible for the background color. Please see the CSS tab from my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2695049

Regards, Marcin



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: MacBook Air
  • Browser: Google Chrome Version 86.0.4240.
  • OS: OSX 10.14.6 Mojave
  • Provided sample code: No
  • Provided link: No
Tags