Close button Placement & custom css implementation

[MsumanP]

Is there any way to put the close button to top-right side corner & use custom css ?

[themyth92]

Yes probably use custom css to override the .lb-close class.

[MsumanP]

I am not good in CSS. But I tried. Need help !!

[faizalshap]

You need to override .lb-dataContainer

.lb-dataContainer {
  position: absolute;
  top: 0px;
  right: 0;
}

[Chewieez]

One issue with overriding .lb-dataContainer using absolute positioning is then the element is stuck on the far right side of the screen. This works well in mobile in portrait mode, but is way off to the right side when viewing the lightbox on desktop, or even mobile in landscape view. You could use a percentage instead of a pixel amount but we don't know the width of the image, so it's still hard to consistently line up the element.

I think a config option to move the x button or the entire data container with caption and x button to the top would be a better solution.

[fromage9747]

@faizalshap Thank you for providing the class that needs to be modified.

I copied and pasted your code snippet and received the below:

At least with the right class, modifications can be made. it would be great though if this could be a configurable option. The image text I would like to keep at the bottom but the close button I would like at the top right.

[h5aaimtron]

.lb-dataContainer { position: absolute; top:-50px; left: 50%; transform: translateX(-50%); }

This moves it to the top and centers it horizontally. Unfortunately, the lib has issues when resizing into mobile mode. Also has some issues with images overflowing in mobile. Really close though.