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.

Answer 1

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'));

Answer 2

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'));

Answer 3

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'));

Answer 4

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;
    }
}