CODEWITHSUNDEEP
javascriptjqueryhtmlcsslightbox2
Zerb
Zerb

Reputation: 21

Having trouble with positioning the Lightbox2 close button

I'm trying to customize the placement of a close button for lightbox2 and I could use your help.

Currently, my close button appears over the lightbox image in the upper right as shown in my example on CodePen: http://codepen.io/xyzerb/pen/zryvmJ.

I need for the close button to appear on top of the image in the upper right as shown here: https://i.sstatic.net/r4mVn.png.

Any ideas on what I'm doing wrong? I'm new to programming, but I didn't expect this part to be challenging.

Thank you in advance. Please let me know if there's anything that I can do to help you in return.

Please Ignore the Following Comment

/*! The system requires inclusion of a line of code if you link to CodePen, so I'm adding a comment. Please ignore. */

Upvotes: 0

Views: 887

Answers (3)

Sushan
Sushan

Reputation: 3233

This is not the actual solution for Lightbox v2.11.3 but it works.

.lightbox{
  display: flex;
  flex-direction: column-reverse;
}

as it just reverse the column order.

Upvotes: 0

Jesse Dockett
Jesse Dockett

Reputation: 166

Add the following:

.lb-data .lb-close {
    position: relative;
    top: 18px;
    left: 18px;
    z-index: 999;
}

Upvotes: 1

Manikandan S
Manikandan S

Reputation: 922

We can fix this by using css. Below css code will help you to fix. 

.lb-dataContainer{ position:relative; }
.lb-closeContainer{ position: absolute; right: -11px; top: -8px; z-index: 11; }

Upvotes: 0

Related Questions