javascript Lightbox 2.51 - 如何将关闭按钮和图像编号移动到顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13218860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Lightbox 2.51 - how to move close button and image number to the top?
提问by user1327
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
我正在使用 Lightbox 2.51，但找不到将带有关闭按钮和当前图像编号等的 lb-dataContainer 移动到顶部的解决方案
I only found solutions for the old versions.
我只找到了旧版本的解决方案。
Code can be found here: http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip
代码可以在这里找到：http: //lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip
回答by user1327
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;
});
回答by dano
This is YEARS later, but if you want the easiest way to do this by far, simply use the following 4 lines of CSS:
这是多年以后，但如果您想要迄今为止最简单的方法，只需使用以下 4 行 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.
flexbox 会将容器上的显示顺序翻转为与 DOM 相反的顺序。
回答by willis
That is the simple way to edit the lightbox-2.6.min.js file:
这是编辑 lightbox-2.6.min.js 文件的简单方法：
search below code in lightbox-2.6.min.js file,
在 lightbox-2.6.min.js 文件中搜索以下代码，
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>
回答by Robert
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:
您必须在 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
})))
then place this on your css
然后把它放在你的 css 上
.lb-close{
float:right;
}
this will make your float to the upper left. Just look and you'll figure it out!
这将使您的浮动到左上角。看看就知道了！
回答by user2600293
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.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'));
Here is my css for the close button:
这是我的关闭按钮的 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');
}
