地方燈箱右上角的關閉按鈕

Question

我該怎麼做？礦井出現在右下方。我正在使用Lightbox v2.7.1。

Answer 1

替換代碼爲v2.8.1。 這會將關閉按鈕和標題移到頂部。

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

您需要將數據容器移動到外部容器上方。將lightbox.js文件的第59行開始的代碼替換爲：

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

這是v2.7.1的工作代碼。替換代碼開始上線lightbox.js 59文件與此：

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

基於從APAD1和user1999659的答案，我做了以下，使關閉按鈕上去右上角，但保留圖片下方的標題。

這是v2.7.1的工作代碼。用以下代碼替換Lightbox.js文件第59行開頭的代碼：

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-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 class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div></div></div></div>").appendTo($('body'));  
    $('.lb-data .lb-details').css('width', '100%'); 

希望它可以幫助別人。

Answer 5

我編輯喜歡這裏的代碼（移動靠近塊其他分區）：

Lightbox.prototype.build = function() { 
var self = this; 
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-closeContainer"><a class="lb-close"></a></div><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 class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div></div></div></div>').appendTo($('body')); 

並添加以下CSS

.lb-closeContainer { 
    position: absolute; 
    top: -2px; 
    right: -28px; 
} 

而這個CSS一些編輯

.lb-closeContainer .lb-close { 
    display: block; 
    float: right; 
    width: 24px; 
    height: 24px; 
    background: url(../images/close.png) top right no-repeat; 
    background-size: contain; 
    text-align: right; 
    outline: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
    -webkit-transition: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 

.lb-closeContainer .lb-close:hover { 
    cursor: pointer; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
} 

結果：http://i.stack.imgur.com/AuYQ9.png