燈箱2.51 - 如何將關閉按鈕和圖像編號移動到頂部？

Question

我使用燈箱2.51，我無法找到一個解決方案與關閉按鈕和當前圖像編號等移動磅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

我的回答是有點抽象，但我希望這將有助於和我不好對不起英語:)

必須創建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 3

對於任何需要此功能的用戶，只需將關閉按鈕移至右上角，即可將標題留在底部。跨網絡的標準用戶界面。

構建收藏與此代碼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');  
} 

Answer 4

這是簡單的方法來編輯lightbox- 2.6.min.js文件：

低於燈箱，2.6.min.js文件代碼搜索，

˚F ROM：

<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

這是年後的今天，但如果你想目前爲止要做到這一點最簡單的方法，只需使用下面的4行的CSS：

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

Flexbox會將容器上的顯示順序翻轉爲與DOM相反。