Javascript Lightbox 2.51-如何将关闭按钮和图像编号移动到顶部？

我正在使用Lightbox 2.51，我找不到一个解决方案来将带有关闭按钮和当前图像编号等的lb dataContainer移动到顶部

我只找到了旧版本的解决方案

---

代码可在此处找到：

解决方案是使用数据容器更改外部容器：

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

Lightbox.prototype.build=function（）{
var$lightbox，
_这个=这个；
$（“”，{id:'lightboxOverlay'}）。之后
(
$（''，{id:'lightbox'}
).附加(
$('', {
“类”：“lb数据容器”
}).附加（$（''）{
“类”：“lb数据”
}).附加（$（''）{
“类别”：“lb详细信息”
}).附加（$（''）{
“类”：“lb标题”
}), $('', {
“类别”：“磅数”
})), $('', {
“类别”：“lb closeContainer”
}).附加（$（''）{
“类别”：“lb关闭”
}).append（$（''，{“类”：'lb outerContainer'}）.append
( $('', {
“类别”：“磅集装箱”
}).append（$（'我的答案有点抽象，但我希望这能有所帮助，并为我糟糕的英语道歉：）

必须在lb outerContainer上方创建一个div
找到这条线，我想它在第85行。
代码：

这将使您的浮动到左上角。
只要看一看，你就会找到答案！
对于任何需要它的人，这里的代码只将关闭按钮移动到右上角，将标题保留在底部。这是网络上的标准用户界面

使用以下代码在lightbox.js文件中构建lightbox：

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

这是编辑lightbox-2.6.min.js文件的简单方法：

在lightbox-2.6.min.js文件中搜索以下代码

发件人：

这是几年后的事了，但是如果你想用最简单的方法来实现这一点，只需使用以下4行CSS即可：

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

flexbox将翻转容器上的显示顺序，使其与DOM相反。
代码在哪里。从文本中看不清楚您尝试执行的是什么+1，相同的解决方案，经过测试并有效。您击败了我，用户1327。这比其他任何解决方案都要好。智能快速。谢谢
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'));

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

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

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

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