Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下から右上に変更し、更に閉じるボタンを画像からテキスト表示に変更したかった。調べてみたところオプションでの変更は難しく、JavaScriptファイル内容の変更及びCSSでの調整が必要っぽい。以下に方法をメモ。

サンプルページ

https://taitan916.info/sample/lightbox2/

画像拡大時に右上に「クリックで閉じる」というテキストが表示され、当該テキストをクリックすると画像が非表示になる点を確認できる。

Lightboxの準備

以下からバージョン2.7.1のlightbox.jsをダウンロードする。

https://cdnjs.com/libraries/lightbox2/2.7.1

61行目付近の以下コメントアウト&追記。「クリックで閉じる」部分は適宜変更する。

//以下コメントアウト
//$("<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><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));
//以下追記
$('<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'));

上記JSファイルを適当なディレクトリにアップロードし以下で読み込む。

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./lightbox.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">

CSSで調整

<style>
.lb-closeContainer {
    position: absolute;
    top: -20px;
    right: -1px;
    color: #fff;
    font-weight: bold;
}
.lb-closeContainer .lb-close {
    display: block;
    float: right;
    height: 24px;
    background-size: contain;
    text-align: right;
    outline: none;
}
.lb-closeContainer .lb-close:hover {
    cursor: pointer;
    opacity: 1;
}
</style>