勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/07  jQuery JavaScript

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>

 

 - jQuery JavaScript

  関連記事

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...