CODEWITHSUNDEEP
lightbox2
Prince Kohli
Prince Kohli

Reputation: 1

LIghtbox image X Closed button align Top right on the image

I need to align the close button on the Top right of the image. I have tried to give the position but its not taking with the css.

.lb-closeContainer {
   position: absolute;
   top: -10px;
   right:40px;
 }

For the actual result, I have attached the image with it.

enter image description here

Upvotes: -1

Views: 3336

Answers (5)

patwary
patwary

Reputation: 625

a.lb-close {
    position: absolute;
    top: -30px;
    right: 0;
}

div#lightbox {
    width: auto;
    left: 50% !important;
    transform: translateX(-50%);
}

Seen Image

For another solution, You can explore this code on CodePen by following this link: https://codepen.io/AlexSND/pen/zXxWxV

Upvotes: 0

Leffa
Leffa

Reputation: 494

In this plugin js you need change the files lightbox.js and the lightbox.css (or respectives .min)

First: In lightbox.js find:

<div class="lb-closeContainer"><a class="lb-close"></a></div>

and then cut and past inside

<div class="lb-outerContainer">

Now, in CSS you adjust the classes. Change all .lb-data .lb-close by .lb-outerContainer .lb-close and finally add style:

.lb-outerContainer .lb-close {
  position:absolute;
  right: -30px;
  top: -30px;
}

Upvotes: 0

crz
crz

Reputation: 1

Solution from Lokesh Dhakar not quite right, tag with the lb-close class should be placed in the end of lb-nav class then the button will work correctly and display. Also do not forget to add .lb-nav tag to .lb-close, so that it would be like this: .lb-nav a.lb-close {...}

Upvotes: -1

Lokesh Dhakar
Lokesh Dhakar

Reputation: 5569

There is no API offered by the library to make this change so you will have to hack/monkeypatch it.

Modifying the html. The ideal way to do this would be to update the markup generated by lightbox.js and move the <a> tag with the lb-close class inside of <div class="lb-container"> as pictured below. To do this, you could modify lightbox.js. On line 102 you can see the markup that is generated: https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox.js#L102

Positioning with CSS. Then you would need to apply some CSS for positioning the 'X' button:

position: absolute;
right: 16px;
top: 16px;

Oh and note that since the anchor tag with the lb-close has been moved, the CSS selector that previously styled it has been updated. Now it is simply .lb-close.

enter image description here

Upvotes: 0

Orlando Gutierrez
Orlando Gutierrez

Reputation: 1

.lb-data .lb-close {
display:block;
position:absolute;
right:50px;
top:5px;
/*float: right;*/
}

like that I resolved it

Upvotes: 0

Related Questions