Place Lightbox close button on top right area

Question

How can I do this? Mine appears in the bottom right side. I am using Lightbox v2.7.1.

Please add jfiddle - there's no way to help you if you don't add legit code — Riskbreaker, May 16 '14 at 16:50

score 6 · Answer 1 · answered May 16 '14 at 16:52

You need to move the data container above the outer container. Replace the code beginning on line 59 of the lightbox.js file with this:

Lightbox.prototype.build = function() {
  var self = this;
  $("<div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div><div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div>").appendTo($('body'));

score 6 · Accepted Answer · answered Nov 13 '15 at 01:38

Replacement code for v2.8.1. This will move both close button and caption to the top.

Lightbox.prototype.build = function() {
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div></div>').appendTo($('body'));

score 2 · Answer 3 · answered Nov 14 '14 at 07:12

This is working code for v2.7.1. Replace the code beginning on line 59 of the lightbox.js file with this:

Lightbox.prototype.build = function() {
var self = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div></div>").appendTo($('body'));

Vitor Régis · Answer 4 · 2021-03-23T22:31:57.243

The easiest and best approach, that is just some CSS rules and don't change the original lib (which is the best choice for maintenance issues) would might look like this:

Shall we use flexbox to our advantage? Yes, Lets go!

(obs: this is SCSS code)

#lightbox {
    display: flex;
    flex-direction: column;

    .lb-dataContainer {
        order: 0;
        margin-bottom: 10px;

        //Want to hide the text? no problem
        .lb-details {
            opacity: 0;
        }

        // Want to change the icon? no problem too.
        .lb-close {
            background: url(../images/ico/close.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;
        }
    }

    .lb-outerContainer{
        order: 1;
    }
}

This works aces in 2021, I guess you should specify it is not css but needs to be compiled :) — Paranoid Android, Mar 18 '21 at 10:44
Yess! It's soo usual to me that i forgot to explain that is SCSS code! thank you — Vitor Régis, Mar 23 '21 at 22:31

curious1 · Answer 5 · 2015-02-28T02:51:23.610

Based on the answers from APAD1 and user1999659, I did the following to make the close button go up-right corner, but keep the caption below the image.

This is working code for v2.7.1. Replace the code beginning on line 59 of the lightbox.js file with this:

Lightbox.prototype.build = function() {
  var self = this;
  $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div></div></div></div>").appendTo($('body'));      
  $('.lb-data .lb-details').css('width', '100%');

Hope it helps someone else.

score 0 · Answer 6 · answered Dec 21 '15 at 10:19

I edited code like here (moved close block to other Div):

Lightbox.prototype.build = function() {
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-closeContainer"><a class="lb-close"></a></div><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div></div></div></div>').appendTo($('body'));

And added following CSS

.lb-closeContainer {
    position: absolute;
    top: -2px;
    right: -28px;
}

And this CSS some edited

.lb-closeContainer .lb-close {
  display: block;
  float: right;
  width: 24px;
  height: 24px;
  background: url(../images/close.png) top right no-repeat;
  background-size: contain;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-closeContainer .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Result: https://i.stack.imgur.com/AuYQ9.png

score 0 · Answer 7 · answered Jun 21 '22 at 21:48

I took the code from Vitor Régis which is scss and converted it to css for those who don't have a compiler. This definitely the best option since it doesn't require modifying the source code at all.

#lightbox {
    display: flex;
    flex-direction: column;
}

#lightbox .lb-dataContainer {
    order: 0;
    margin-bottom: 10px;
}

#lightbox .lb-dataContainer .lb-details {
    opacity: 0;
}

#lightbox .lb-dataContainer .lb-close {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

#lightbox .lb-outerContainer{
    order: 1;
}

Place Lightbox close button on top right area

7 Answers7