勉強したことのメモ

webプログラマが勉強したことのメモ。

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>

 

 - jQuery, JavaScript

  関連記事

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

クリップボードの操作

<? /* クリックでクリップボードにコピーする。 http://zxcv ...