勉強したことのメモ

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

  関連記事

javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

さくらレンタルサーバでCookieが保存できない

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

無料でジオコーディング(住所→経度緯度)を行う

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...