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

Question

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

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

代码可以在这里找到：http: //lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

Answer 1

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

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

Answer 2

这是几年后的事了，但如果你想要迄今为止最简单的方法，只需使用以下 4 行 CSS：

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

flexbox 会将容器上的显示顺序翻转为与 DOM 相反。

Answer 3

我的回答有点抽象，但我希望这能有所帮助，并对我糟糕的英语感到抱歉:)

您必须在 lb-outerContainer 上方创建一个 div 找到这一行，我认为它在第 85 行。代码：

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

然后把它放在你的CSS上

.lb-close{
float:right;
}

这将使您的浮动到左上角。看看你就知道了！

Answer 4

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

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

从：

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

Answer 5

对于任何需要它的人来说，代码仅将关闭按钮移动到右上角，将标题留在底部。网络上的标准用户界面。

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

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

这是我的关闭按钮的CSS：

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