Lightbox 2.51 - how to move close button and image number to the top?

Question

I'm using Lightbox 2.51 and I can't find a solution to move lb-dataContainer with close button and current image number etc to the top

enter image description here

I only found solutions for the old versions.

Code can be found here: http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

Where is the code. It is not clear from the text what you are trying to do — Tariq Aziz, Nov 04 '12 at 13:29

score 4 · Accepted Answer · answered Nov 04 '12 at 14:05

The solution is to change outer container with data container:

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;

  $("<div>", {id: 'lightboxOverlay'}).after
    (
          $('<div/>', {id: 'lightbox'}
          ).append(

          $('<div/>', {
            "class": 'lb-dataContainer'
          }).append($('<div/>', {
            "class": 'lb-data'
          }).append($('<div/>', {
            "class": 'lb-details'
          }).append($('<span/>', {
            "class": 'lb-caption'
          }), $('<span/>', {
            "class": 'lb-number'
          })), $('<div/>', {
            "class": 'lb-closeContainer'
          }).append($('<a/>', {
            "class": 'lb-close'
          }).append($('<img/>', {
            src: this.options.fileCloseImage
        })))
 )),

          $('<div/>', {"class": 'lb-outerContainer'}).append
          ( $('<div/>', {
                "class": 'lb-container'
              }).append($('<img/>', {
                "class": 'lb-image'
              }), $('<div/>', {
                "class": 'lb-nav'
              }).append($('<a/>', {
                "class": 'lb-prev'
              }), $('<a/>', {
                "class": 'lb-next'
              })), $('<div/>', {
                "class": 'lb-loader'
              }).append($('<a/>', {
                "class": 'lb-cancel'
              }).append($('<img/>', {
                src: this.options.fileLoadingImage
              }))))
          )

)
    ).appendTo($('body'));
  $('#lightboxOverlay').hide().on('click', function(e) {
    _this.end();
    return false;
  });

+1, same solution, tested and works. You beat me to it, user1327. — montrealist, Nov 04 '12 at 14:17

score 4 · Answer 2 · answered Nov 15 '17 at 21:55

4

This is YEARS later, but if you want the easiest way to do this by far, simply use the following 4 lines of CSS:

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

The flexbox will flip the display order on the container to be in reverse from the DOM.

answered Nov 15 '17 at 21:55

dano

5,640
5
27
27

1

This is way better than any of the other solutions – labago Mar 24 '20 at 18:52
Smart and quick. Thanks – Sushan May 17 '21 at 10:25

score 1 · Answer 3 · answered Apr 11 '13 at 11:52

My answer is a bit abstract but I wish this could help and sorry for my bad english :)

you must create a div above the lb-outerContainer find this line, i think its in line 85. code:

Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after
(
$('<div/>', {
id: 'lightbox'
}).append($('<div/>', {             //this is the div you have to append...
"class": 'lb-dataContainer'     
}).append($('<a/>', {
"class": 'lb-close',
"href":'#'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))
.append(
$('<div/>', {
"class": 'lb-outerContainer'    //this is the container
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
})))

then place this on your css

.lb-close{
float:right;
}

this will make your float to the upper left. Just look and you'll figure it out!

willis · Answer 4 · 2014-02-16T16:03:59.103

That is the simple way to edit the lightbox-2.6.min.js file:

search below code in lightbox-2.6.min.js file,

FROM:

<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><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>

REPLACE ABOVE TO:

<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></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>

score 0 · Answer 5 · answered Jul 19 '13 at 16:43

For anyone who needs it here is the code to move ONLY the Close button to the upper right hand corner, leaving the caption at the bottom. The standard User Interface across the web.

Build the lightbox in the lightbox.js file with this code:

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

Here is my css for the close button:

.lb-closeContainer .lb-close {
float:right;
margin-top:-10px;
display:block;
outline-style:none;
text-decoration:none;
width:22px;
height:23px;
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 0; 
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout     
/lightbox/close.png', sizingMethod='scale');
}


.lb-closeContainer .lb-close:hover {
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout
/lightbox/close.png', sizingMethod='scale');    
}

Lightbox 2.51 - how to move close button and image number to the top?

5 Answers5

Linked